时间戳

首页 > 解决方案 > 如何更新 Blazor 视图？

c# - 如何更新 Blazor 视图？

问题描述

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

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

index.razor 我的这个页面（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();
    }
}

“初始化”方法在 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#mvvmblazorinotifypropertychanged

解决方案

您可以在客户端 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 服务中提取它，或者您必须订阅来自服务器的时间推送通知。

推荐阅读