blazorbootstrap
blazorbootstrap copied to clipboard
vikramlearning
Toasts created in component not showing up on page having this component
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:
- Create blank project from VS Template
- Create page and component like below
- Go to page you created
- 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):
- BlazorBootstrap: 1.10.5
- Blazor WebAssembly / Server: Interactive Server
- .NET Version: .NET 8
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):
- OS: Windows 10 22H2
- Browser: Edge, Chrome
- Version: 120.0.2210.133 (Edge), 120.0.6099.217 (Chrome)
@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 can you try replacing lines 13 and 17 on App.razor with this?
<HeadOutlet @rendermode="InteractiveServer" />
...
<Routes @rendermode="InteractiveServer" />
@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.
@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