Как заставить Blazor перерисовать компонент - PullRequest
Новая
       18

Как заставить Blazor перерисовать компонент

1 голос
/ 01 июля 2019

Я создаю простое веб-приложение с Blazor (на стороне клиента), и мне нужно, чтобы Blazor повторно выполнил рендеринг компонента.Есть ли способ уведомить фреймворк о повторном рендеринге?

На этой странице Razor у меня есть простой флажок, который показывает, предоставлено ли пользователю веб-приложение определенное разрешение.

ShouldRender() всегда возвращает True.Когда для поля isGranted установлено значение 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 Core SDK: 3.0.100-preview6-012264

Шаблон Blazor: Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2

Ответы [ 2 ]

3 голосов
/ 01 июля 2019

Обычно вы выполняете повторную визуализацию, вызывая метод StateHasChanged.

Чтобы это приложение работало, вы должны поместить StateHasChanged(); в конце метода BarCallback ...

Вы должны также добавить символ '@', прежде чем isGranted, вот так: @bind="@isGranted"

Надеюсь, это поможет.

2 голосов
/ 01 июля 2019

Просто удалите disabled из управления вводом, и оно будет работать. Изменения:

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

по:

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

См. Ваш код, работающий на Blazorfiddle

...