Is it possible to load a server side Blazor pages HTML before the code is executed?
Question
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?
3 answers
solution1
3 ACCPTED 2019-08-06 20:39:43
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();
}
}
solution2
0 2020-01-16 21:42:36
You can use of new changes in
OnAfterRenderAsync(bool firstRender) Like this :
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//Your code
}
return base.OnAfterRenderAsync(firstRender);
}
solution3
0 2021-06-08 05:20:55
I had similar issue using Blazor Webassembly on .Net Core 5, where my components loaded before invoking JS functions and data. Using @daniherrera approach has helped remediate the issue. See code below:
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await OnAfterFirstRenderAsync();
//Invoke Js funtion
await JS.InvokeAsync<string>("JsFuntion", "#HTMLElement");
}
}
protected async Task OnAfterFirstRenderAsync()
{
data = await someMethod.GetDataAsync();
StateHasChanged();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.