How to force Blazor to re-render a component

Question

I'm building a simple web app with Blazor (client-side) and need to get Blazor to re-render the component. Is there way to notify the framework to re-render?

On this Razor page, I have a simple checkbox that shows if the web app is granted a certain permission by user.

ShouldRender() always returns True. When isGranted field is set to True, the checkbox isn't rendered and remains unchecked.

Razor page:

@page "/foo" @inject IJSRuntime js  <input type="checkbox" disabled @bind="isGranted" /> Some Permission  @code {   bool isGranted;    protected override async Task OnInitAsync() {     await js.InvokeAsync<object>(       "foo.bar",       DotNetObjectRef.Create(this),       nameof(BarCallback)     );   }    [JSInvokable]   public void BarCallback(bool result) {     Console.WriteLine($"BarCallback(result: {result})");     isGranted = result;   }   protected override bool ShouldRender() {     Console.WriteLine("Blazor is checking for re-rendering...");     return true;   } } 

JavaScript function:

window.foo = {   bar: (dotnetObjRef, callback) => {     navigator.storage.persist()       .then(result => {         dotnetObjRef.invokeMethodAsync(callback, result)           .catch(reason => console.warn('Failed to call .NET method.', reason));       })       .catch(reason => console.warn('Failed to get permission.', reason));   } } 

Output in the Chrome's console:

WASM: Blazor is checking for re-rendering... WASM: BarCallback(result: True) 

.NET Core SDK: 3.0.100-preview6-012264

Blazor Template: Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2

Answer 1

Usually, you force a re-render by calling the StateHasChanged method.

For this app to work, you should place StateHasChanged(); at the end of the BarCallback method.

Hope this helps.