search

vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
615 stars 22 forks source link

Toasts created in component not showing up on page having this component #512

Open blazejjanus opened 6 months ago

blazejjanus commented 6 months ago

Describe the bug I need an easy and unified way to display Toasts (in this example HTTP status from service), so I created a component for that, unfortunately if I add such component to page the Toasts are not showing up.

To Reproduce Steps to reproduce the behavior:

  1. Create blank project from VS Template
  2. Create page and component like below
  3. Go to page you created
  4. See that no toasts are showing despite the method is executed

Expected behavior Toasts should show on page that component is part of.

Versions (please complete the following information):

Sample code

@rendermode InteractiveServer

<div class="StatusMessageContainer">
    <Toasts class="p-3" Messages="Messages" Placement="Placement" />
</div> 

@code {
    public ToastsPlacement Placement { get; set; } = ToastsPlacement.TopRight;
    private List<ToastMessage> Messages = new List<ToastMessage>();

    public void Show(APIResponse response, bool errorOnly = false) {
        if(response.Success) {
            if (errorOnly) return;
            Show(response.GetStatusString(), EventCategory.ERROR);
        } else {
            Show(response.GetStatusString(), EventCategory.SUCCESS);
        }
    }
}

In my page component I've something like that:

@page "/MyPage"
@attribute [StreamRendering]
@rendermode InteractiveServer

<h3>Mail Archive</h3>
<StatusMessage @ref="status"/>

@code {
    [Inject]
    private IMyService MyService { get; set; }
    [SupplyParameterFromForm]
    private List<MyDataDTO>? Data { get; set; } = null;
    private StatusMessage status = new StatusMessage();

    protected override async Task OnInitializedAsync() {
        await Task.Run(() => Fetch());
    }

    private void Fetch() {
        APIResponse result = MyService.FetchSomeData();
        //TEMP
        status.Show(result);
        if(!result.Success) {
            status.Show(result);
        } else {
            Data = result.GetContent<List<MyDataDTO>>();
        }
    }
}

Desktop (please complete the following information):

gvreddy04 commented 6 months ago

@blazejjanus Thank you for using BlazorBootstrap. Could you please share a GitHub repo to reproduce the issue with minimal code? This will help us better understand your issue so that we can guide you on the implementation.

blazejjanus commented 5 months ago

https://github.com/blazejjanus/BlazorBootstrapIssue512Demo

underclockeddev commented 5 months ago

I'm experiencing this as well

underclockeddev commented 5 months ago

@blazejjanus can you try replacing lines 13 and 17 on App.razor with this?


<HeadOutlet @rendermode="InteractiveServer" />
...
<Routes @rendermode="InteractiveServer" />
blazejjanus commented 5 months ago

@underclockeddev I've changed this file as you said, so now it looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorBootstrapIssue512Demo.styles.css" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

But unfortunately this didn't solve this issue.

underclockeddev commented 5 months ago

@blazejjanus I hope the dev doesn't hate me for this...

but I couldn't get it working either and switched to https://github.com/Blazored/Toast and it was much easier to get working