Menu
The HTML page previously would render before/while the "@code" portion of the Blazor page is running (the "Loading..." message that is in the default project) on the client side implementation of Blazor in .Net Core 2.2. However, this is no longer happening for me using .NET Core 3.0 with Blazor on a server side implementation.
For example, a page with a table that grabbed data from the database would still load all of the other elements on the page (heading, labels, table headers, etc.) but now the page only loads AFTER all of the data has been pulled from the database/the operation in the "OnInitAsync" method is finished. On top of this, there is no "loading" signal to the user that clicking on a page is actually loading anything. They are required to wait 10-15 seconds for all of the data to be loaded (no spinning cursor/prompts).
In short, I want to either make it so the user is aware the page is loading but ideally I would like it so the pages HTML is rendered and any data/operation that is not yet finished appears when it is ready (how it works in the client side implementation).
I am new to Web Development/Blazor so I'm pretty stumped here. I've tried looking everywhere for some hints but considering how new it is, there's not much out there. I even tried getting it to work with the default project (the WeatherForecaseService) but even there it didn't work.
<html> a bunch of HTML </html>
@if (data == null)
{
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
}
@code
{
Data[] data;
protected override async Task OnInitAsync()
{
data = await TaskService.GetDataAsync();
}
}
What's expected in the above example is that there is a spinner showing the data is loading but what is happening is the page doesn't load at all until the data is actually loaded (the data is never null) in which all elements appear at once. Is this just how the server side implementation works?
676
Server-side Blazor is executed on the server within an ASP.NET Core application. All UI updates, event handling, and JavaScript calls are handled from server by using a SignalR connection, even a button click will go to server.
By using Blazor route parameters, you can pass values from one page to another page. Use NavigationManager to pass a value and route the parameter to another page. Follow this example to achieve passing values from one page to another. Get the passed Page1 parameter value in Page2.
The biggest difference between Razor and Blazor is that Razor is a markup language with C#, while Blazor is the framework that lets you run C# code and use the Razor view engine in the browser.
Issac pointed to the solution in their comment:
Try to use OnAfterRenderAsync instead
I just write the code:
@code
{
protected bool Rendered = false;
protected async override Task OnAfterRenderAsync()
{
if (!Rendered)
{
Rendered = true;
await OnAfterFirstRenderAsync();
}
}
protected async Task OnAfterFirstRenderAsync()
{
data = await TaskService.GetDataAsync();
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
