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

Solution 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.

Solution 2

Just remove disabled from input control and it will work. Change:

<input type="checkbox" disabled @bind="isGranted" />

by:

<input type="checkbox" @bind="isGranted" />

See your code working at blazorfiddle

Comments

[Poulad]

Thanks! However, there is no difference between using @bind="isGranted" or @bind="@isGranted". They both work.

[Poulad]

That example doesn't work for me on both Chromium and Firefox. Also, I needed that disabled :)

[Patrick Szalapski]

Yes, the latter syntax should be discouraged as confusing.