Live Chat Icon For mobile
Live Chat Icon

How do you manually trigger data or UI changes?

Platform: Blazor| Category: Data binding

By default, Blazor detects changes and reflects them in the UI automatically. However, there might be a situation where we have to manually trigger changes. StateHasChanged informs the component that its state has changed, but it does not render the component. The component will decide when to render itself.

You can’t do that in a synchronous method, so you should async your code to give the component a chance to render.

@page "/"
  
 @using System.Threading;
  
 <button type="button" @onclick="@PlaceOrder_Clicked" disabled="@DisablePlaceOrderButton">@Title</button> 
@code{
     private bool DisablePlaceOrderButton { get; set; } = false;
  
     public string Title { get; set; } = "Click Button";
  
     private async Task PlaceOrder_Clicked()
     {
  
         await DisablePlaceOrder();
         DisablePlaceOrderButton = false;
         Title = "State Has Changed";
  
     }
  
     async Task DisablePlaceOrder()
     {
         DisablePlaceOrderButton = true;
         Title = "Wait...";
         await Task.Delay(3000);
  
         StateHasChanged();
     }
 } 

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.