Блог

Я начал с нового ASP.NET основное веб-приложение и шаблон на стороне клиента blazor ( 3.0.0-preview4-19216-03 ).

Чтобы добавить состояние на существующую Counter.razor страницу, я добавил следующий класс:

 public class GlobalCounter
{
    private int _count;
    public int Count
    {
        get => _count;
        set
        {
            if (_count == value) return;

            _count = value;
            CounterChanged.Invoke(this, new CounterChangedEventArgs(_count));
        }
    }

    public GlobalCounter(int initialCount = 0)
    {
        _count = initialCount;
    }

    public event EventHandler<CounterChangedEventArgs> CounterChanged;
}

public class CounterChangedEventArgs : EventArgs
{
    public int Count { get; }
    public CounterChangedEventArgs(int count)
    {
        Count = count;
    }
}
  

Внутри Startup.cs добавлено следующее к методу ConfigureServices:

 public void ConfigureServices(IServiceCollection services)
{
    var counter = new GlobalCounter();
    services.AddSingleton(counter);
}
  

Затем я добавил синглтон, который будет введен на Counter.razor страницу:

 @inject GlobalCounter _counter;
  

Также добавлен следующий код к @functions странице:

 protected override async Task OnInitAsync()
{
    currentCount = _counter.Count;
    _counter.CounterChanged  = CounterChanged;
    await Task.CompletedTask;
}

void CounterChanged(object sender, CounterChangedEventArgs args)
{
    currentCount = args.Count;
}

void IncrementCount()
{
   _counter.Count  ;
}
  

До сих пор все работало так, как ожидалось, при выходе со страницы или перезагрузке сохранится старый счет.

Затем я настроил index.razor, чтобы ввести счетчик и отобразить количество нажатий.

 @page "/"
@inject GlobalCounter _counter;

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

You pressed the counter @totalCount times.

@functions {
    private int totalCount = 0;

    protected override async Task OnInitAsync()
    {
        totalCount = _counter.Count;
        _counter.CounterChanged  = CounterChanged;
        await Task.CompletedTask;
    }

    void CounterChanged(object sender, CounterChangedEventArgs args)
    {
        totalCount = args.Count;
    }
}
  

Это также работает так, как ожидалось. Нажатие кнопки «нажмите меня» на странице счетчика и переход обратно на страницу индекса покажет правильное количество.

Здесь возникает моя проблема, как только я добавлю <Counter /> страницу в качестве компонента в index.razor , нажатие кнопки «нажмите меня» обновит количество внутри компонента, но не текст, отображаемый на индексной странице.

Требуется ли явный вызов для повторного отображения зависимых компонентов или какой-либо конкретной привязки между страницами?

Попробуйте это в index.razor:

 void CounterChanged(object sender, CounterChangedEventArgs args)
{
    totalCount = args.Count;

    StateHasChanged();
}
  

Вы должны сообщить Blazor, что состояние компонента изменилось и что она должна выполнить повторный рендеринг.

Между прочим, значение в компоненте счетчика обновляется автоматически, потому что метод StateHasChanged вызывается Blazor после запуска события нажатия кнопки «Click me». Метод StateHasChanged автоматически вызывается после возникновения событий любого типа…