Please tell me :
How can I wait a task until it is finished in Blazor WASM, no matter the time it takes to complete ?
My UserInfoService.GetUserBasicInfoToListAsync() task through an API controller gets some data from a server SQL table.
Thank You !
protected override async Task OnInitializedAsync()
{
await UserInfoService.GetUserBasicInfoToListAsync().ConfigureAwait(false);
//here must wait the previous task to complete
if (UserInfoService.UserBasicInfoList.Count > 0)
{ //do some code}
}
I think what you're looking for is something like this: I'm assuming your problem is the UI rendering before the async call is complete. [But I may be wrong!]
#page "/"
<PageTitle>Index</PageTitle>
#if (loaded)
{
<div class="bg-dark text-white p-2 m-2">
Rows Retrieved: #NoOfRows
</div>
}
else
{
<div class="alert alert-warning">Loading Records to find the number</div>
}
#code {
private bool loaded;
private int NoOfRows = 0;
protected override async Task OnInitializedAsync()
{
// Task Delay to emulate a slow async call into the data pipeline
// replace with your await
await Task.Delay(3000);
// await UserInfoService.GetUserBasicInfoToListAsync()
NoOfRows = Random.Shared.Next(1, 10);
loaded = true;
}
}
Related
I want get data from db once on OnInitializedAsync. I try to use tableLoading to judue,but it's not work.
protected override async Task OnInitializedAsync()
{
if (tableLoading)
{
return;
}
tableLoading = true;
users = await userService.GetSome(1, userType);
_total = await userService.GetCount(userType);
tableLoading = false;
Console.WriteLine("OnInitializedAsync");
}
This is the official way to solve your problem. You have to persist component state during first load so that your services won't be called second time during second load.
First add <persist-component-state /> tag helper inside your apps body:
<body>
...
<persist-component-state />
</body>
Then inject PersistentComponentState in your component and use like this:
#implements IDisposable
#inject PersistentComponentState ApplicationState
#code {
private IEnumerable<User> _users;
private int _total;
private PersistingComponentStateSubscription _persistingSubscription;
protected override async Task OnInitializedAsync()
{
_persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistState);
if (!ApplicationState.TryTakeFromJson<IEnumerable<User>>("users", out var restoredUsers))
{
_users = await userService.GetSome(1, userType);
}
else
{
_users = restoredUsers;
}
if (!ApplicationState.TryTakeFromJson<int>("total", out var restoredTotal))
{
_total = await userService.GetCount(userType);
}
else
{
_total = restoredTotal;
}
}
private Task PersistState()
{
ApplicationState.PersistAsJson("users", _users);
ApplicationState.PersistAsJson("total", _total);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
_persistingSubscription.Dispose();
}
}
How i know blazor OnInitializedAsync exec in once or twice?
It usually loads twice.
Once when the component is initially rendered statically as part of the page.
A second time when the browser renders the component.
However, If you want to load it once, in that case, you could go to _Host.cshtml and change render-mode="ServerPrerendered" to render-mode="Server", and it would be called only once as a result it would then load your data from the database once only.
Note: For more information you could refer to the official documents here.
I know it's usually loads twice, i want to know when the function is run, how to konw it's run on once or twice. This is my solution.
static bool first = true;
protected override async Task OnInitializedAsync()
{
if (first)
{
first = false;
Console.WriteLine("first time");
return;
}
Console.WriteLine("second time");
}
I'm trying to recover some data asynchronously from localStorage then activate a specific tab from MudTabs component if data is found.
<MudTabs Elevation="2" Rounded="true" Centered="true" Color="Color.Primary" ApplyEffectsToContainer="true" Class="custom-tab-panel" PanelClass="pa-6 bg-white" #ref="tabs">
The problems come from my method OnAfterRenderAsync who doesn't work updating the MudBlazor component state, here is the code:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var result = await protectedSessionStore.GetAsync<int>("Call");
if (result.Success)
{
tabs.ActivatePanel(1);
StateHasChanged();
}
}
//return base.OnAfterRenderAsync(firstRender);
}
I tested a previous version of it who worked pretty well but i cannot use the await operator inside of it, the method not being asynchronously:
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
tabs.ActivatePanel(1);
}
return base.OnAfterRenderAsync(firstRender);
}
I didn't found what is specifically the difference between returning the base method and calling the StateHasChanged. When using the StateHasChanged method the active panel remain on the 0 index.
If you have any ideas, thanks in advance.
I'm working on a Blazor server side app. The page has a table with a list of cars and some filter elements on top. When I select a filter, a spinner should be visible until the new data is fetched and rendered.
The spinner with its variable:
<div class="spinner-border #spinner" role="status">
<span class="visually-hidden">Loading...</span>
</div>
#code{
string spinner = "invisible";
public string vehicleTypeFilter
{
set
{
_vehicleTypeFilter = value;
ApplyFilters();
}
get { return _vehicleTypeFilter; }
}
}
The select for the Baumuster (vehicleType) is bound to the vehicleTypeFilter variable:
<div class="col-md-2 form-floating">
<select class="form-control" #bind="vehicleTypeFilter">
<option value="" selected>Alle</option>
#foreach (var vehicleType in vehicleTypes.OrderBy(x => x.Description))
{
<option value="#vehicleType.Description">#vehicleType.Description</option>
}
</select>
<label>Baumuster</label>
</div>
Then a value is selected, the ApplyFilter method is triggered through the setter of the vehicleTypeFilter variable:
public void ApplyFilters()
{
ToggleSpinner();
// I also tried a StateHasChanged(); right here
// 1. Get all cars
cars = model.CreateIndexViewModel();
// 2. Filter for Baumuster / vehicle type
if (!string.IsNullOrEmpty(vehicleTypeFilter))
{
cars.viewModels = cars.viewModels.Where(x => x.VehicleDescription == vehicleTypeFilter).ToList();
}
ToggleSpinner();
}
The ToggleSpinner method:
public void ToggleSpinner()
{
if (spinner == "invisible" )
spinner = "";
else
spinner = "invisible";
}
Unfortunately, I don't see the spinner. When I inspect the html page right after the breakpoint hits the Baumuster-filter, the value of spinner is still set to "invisible". I even tried to call StateHasChanged(); after the first ToggleSpinner() but that didn't help.
You've shown a lot of code, but I don't see ToggleSpinner
However, you call it twice in your ApplyFilters method, with no blocking calls, so I'd assume that it's turning the spinner on and off so fast that it doesn't render (or at least that you can't notice it).
If the methods you call in ApplyFilters actually take any time, then Henk's got the right idea-- except you should use async Task I think.
Your problem is that you want async behaviour from a synchronous property. The standard advice is against async void but if you want to stay with the property, the minimal change would be:
public async void ApplyFilters()
{
ToggleSpinner();
// I also tried a StateHasChanged(); right here
StateHasChanged(); // this _requests_ an update
await Task.Delay(1); // this is why you need async void
... as before
ToggleSpinner();
StateHasChanged();
}
I am working on investment tracking app that will be free for everyone. I am using net Core with blazor and Blazorise for charts.
I stumbled upon a problem with rendering the charts. From the official Blazorise documentation I added method protected override async Task OnAfterRenderAsync(bool firstRender) (see in the code below). This method should redraw the charts the first time the page renders. The problem is that this method always fires twice. It renders the charts in the first go and the second time it leaves them empty (as firstRender = false the second time it fires). If I remove the if block the charts render ok.
Furthermore I've added button that should refresh the data + charts. After pressing this button the charts refresh twice (this is unwanted behaviour as it distracts the users) and what is interesting the data itself (the values) change after the second go.
Have anybody dealt with this problem before?
My html code
...
<div class="btn" #onclick="(async () => await RerenderPage())">Refresh Data</div>
...
My code
List<Models.VM.OverView> overview = new List<Models.VM.OverView>();
protected override async Task OnInitializedAsync()
{
overview = await GetOverview(); //gets overview from api
}
public async Task<List<Models.VM.OverView>> GetOverview()
{
return await Http.GetFromJsonAsync<List<Models.VM.OverView>>("/api/Overview/GetOverView/" + await GetUserIdAsync);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await HandleRedraw();
}
}
async Task HandleRedraw()
{
await pieChart.Clear();
//this method goes in the overview object and gets data from it
await pieChart.AddLabelsDatasetsAndUpdate(GetLabelsPieChart(), GetPieChartDataset());
}
What is the await Rerenderpage() doing ?
From the samples it looks like it employs the user of a bool isAlreadyInitialised flag.
protected override async Task OnAfterRenderAsync( bool firstRender )
{
if ( !isAlreadyInitialised )
{
isAlreadyInitialised = true;
await HandleRedraw();
}
}
I am assuming that async () => await RerenderPage()) calls something that then calls the chart.Update in order for the component to know its statuschanged ?
I created a .razor Notification Component in Blazor, and I'm trying to autoclose the notification div after xx seconds.
So far it works with this Method
private async Task CloseToast(Guid Id, bool autoclose = false)
{
if (autoclose)
{
await Task.Delay(TimeSpan.FromSeconds(5));
}
//Code to remove the notification from list
StateHasChanged();
}
The problem is that for 5 seconds the UI data binding is stuck, any one way or two way binding update to variables (text fields etc..) is on hold until the Notification is closed and the Task resumes.
How can I launch a method or code block after xx seconds without blocking the main UI task in Blazor?
A component with a timer that counts back
<h3>#Time</h3>
#code {
[Parameter] public int Time { get; set; } = 5;
public async void StartTimerAsync()
{
while (Time > 0)
{
Time--;
StateHasChanged();
await Task.Delay(1000);
}
}
protected override void OnInitialized()
=> StartTimerAsync();
}
Usage:
<Component />
<Component Time="7"/>
Tested on client side Blazor. Should behave the same way in server-side Blazor.
Hope this helps
You can use .NET Timer from System.Timers as well and set the Delay in milisec. When it elapsed event will triggered and you can put your logic into the event handler. If you don't want to bother with all the config and Disposing of Timer you can use this Nuget package. It is a very convenient wrapper for the Timer with many extra features see docs.
<AdvancedTimer Occurring="Times.Once()" IntervalInMilisec="#_closeInMs" AutoStart="true" OnIntervalElapsed="#(e => { IsVisible = false; })" />
#code {
private int _closeInMs = 5000;
...
}
The official Blazor Server EFCore sample project includes this as an example, in TextFilter.razor. The essence of the code is:
Timer? timer;
// ... code in a function to start the timer
timer?.Dispose();
timer = new(DebounceMs);
timer.Elapsed += NotifyTimerElapsed;
timer.Enabled = true;
private async void NotifyTimerElapsed(object? sender, ElapsedEventArgs e)
{
timer?.Dispose();
timer = null;
// SomeMethodAsync will need to call StateHasChanged()
InvokeAsync(() => SomeMethodAsync());
}
and a Dispose() function for the page to dispose any timer in progress when user navigates away.