Asp.net-Core

如何強制 Blazor 重新渲染組件

  • July 1, 2019

我正在使用 Blazor(客戶端)建構一個簡單的 Web 應用程序,並且需要讓 Blazor 重新呈現組件。有沒有辦法通知框架重新渲染?

在此 Razor 頁面上,我有一個簡單的複選框,用於顯示 Web 應用程序是否被使用者授予了特定權限。

ShouldRender()總是返回True。當isGrantedfield 設置為True時,複選框不會呈現並且保持未選中狀態。

剃須刀頁面:

@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 核心 SDK:3.0.100-preview6-012264

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

StateHasChanged通常,您通過呼叫該方法來強制重新渲染。

要使此應用程序正常工作,您應該將StateHasChanged();其放在 BarCallback 方法的末尾。

希望這可以幫助。

引用自:https://stackoverflow.com/questions/56839527