如何更新 Blazor 视图？答案

【问题标题】：How can I update the Blazor View?如何更新 Blazor 视图？
【发布时间】：2020-06-10 13:45:15
【问题描述】：

我正在尝试使用 ASP.NET Core WebAssembly 的 MVVM 模式，因此构建了一个 ASP.NET Core 托管应用程序。我试图使用我在具有相同模型的 UWP 应用程序中所做的“INotfiyPropertyChanged”并且它有效。出于学习目的，我想使用相同的模式在 ASP.NET Core Blazor WebAssembly 应用程序中重新创建它。

以下问题，在启动应用程序时，“DateTime”应更新为当前时间。每次我启动服务器应用程序时，我都没有得到应有的时间，总是与我第一次运行应用程序的时间相同（上午 12 点）。

我的页面代码（index.razor）如下所示：

@page "/"
@using ...

<div class="region-top-left">
   <p>@clockViewModel.CurrentTime</p>   <!-- From here the 12:00 comes -->
</div>

@code 
{
    ClockViewModel clockViewModel = new ClockViewModel();
    ClockModel clockModel = new ClockModel();

    protected override Task OnInitializedAsync() 
    {
        clockViewModel.Initialize(clockModel);
        return base.OnInitializedAsync();
    }
}

“Initialize”方法在 index.razor 中被调用，我期待返回当前日期时间。还尝试创建一个从未被命中的断点..

    public class ClockViewModel : PropertyChangedBase
    {
        private ClockModel model;
        private string currentTime { get; set; }
        public string CurrentTime
        {
            get
            {
                return currentTime;
            }
            set
            {
                if (currentTime != value)
                {
                    currentTime = value;
                    NotifyPropertyChanged();
                }
            }
        }
        internal void Initialize(ClockModel model)
        {
            this.model = model;
            updateTime();
            model.PropertyChanged += ModelPropertyChanged;
        }

        private void ModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(model.CurrentTime))
            {
                updateTime();
            }
        }

        private void updateTime()
        {
            CurrentTime = model.CurrentTime.ToString("h:mm");
        }
    }

这是在网络应用程序中处理 INotifyPropertyChanged 的错误方法吗？

【问题讨论】：

标签： c# mvvm blazor inotifypropertychanged

【解决方案1】：

您可以在客户端 Blazor 中实现这一点，但您必须通过调用 ComponentBase.StateHasChanged 来通知 UI 有关更改，如下所示：

protected override Task OnInitializedAsync() 
{
    clockViewModel.Initialize(clockModel);

    clockViewModel.PropertyChanged += ViewModelPropertyChanged;

    return base.OnInitializedAsync();
}

private void ViewModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(ClockViewModel.CurrentTime))
    {
        StateHasChanged();
    }
}

public void Dispose()
{
    clockViewModel.PropertyChanged -= ViewModelPropertyChanged;
}

要求 model.CurrentTime 已经定期更新客户端或服务器端时间。如果您需要显示服务器端时间，您必须定期从 Web 服务中提取它，或者您必须订阅来自服务器的时间推送通知。

【讨论】：

【解决方案2】：

我会说，是的，这是错误的方法。一般来说，你会使用JavaScript 来做这样的事情。关于 Web 应用程序，您需要了解的主要内容是您有一个 Server 和一个 Client。与 UWP 不同，UWP 基本上所有内容都在 Client 上处理。话虽如此，一旦您收到来自Server 的请求，将不再处理C#，直到您再次调用服务器。此外，您的OnInitializedAsync 仅在应用程序启动时被点击。

【讨论】：