如何强制Blazor重新渲染组件

Question

我正在使用Blazor (客户端)构建一个简单的Web应用程序，并需要使Blazor重新呈现组件。 有没有方法可以通知框架重新渲染？

在这个Razor页面上，我有一个简单的复选框，用于显示用户是否授予了特定权限的Web应用程序。

ShouldRender()总是返回True。当将isGranted字段设置为True时，复选框不会被呈现， 并保持未选中状态。

Razor页面：

@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函数：

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));
  }
}

在 Chrome 控制台输出：

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

.NET Core SDK：3.0.100-preview6-012264

Blazor 模板：Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2

- Poulad

Answer 1

通常情况下，您可以通过调用StateHasChanged方法来强制重新渲染。

为了使此应用程序正常工作，您应该在BarCallback方法的末尾放置StateHasChanged();。

希望这能帮到您。

- enet

---

谢谢！然而，使用@bind="isGranted"或@bind="@isGranted"没有区别，两者都可以正常工作。 - Poulad

是的，应该弃用后一种语法，因为容易令人感到困惑。 - Patrick Szalapski

Answer 2

只需从输入控件中移除 disabled 属性，它就可以工作了。更改如下：

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

在 blazorfiddle 上查看您的代码是否工作。

- dani herrera

---

那个例子在Chromium和Firefox上都对我不起作用。而且，我需要那个_disabled_ :) - Poulad