如何更新 Blazor 視圖？

Question

我正在嘗試使用 ASP.NET 核心 WebAssembly 的 MVVM 模式，因此構建了一個 ASP.NET 核心托管應用程序。 我試圖使用我在 UWP 應用程序中使用相同型號的“INotfiyPropertyChanged”並且它有效。 出於學習目的，我想使用相同的模式在 ASP.NET Core Blazor WebAssembly 應用程序中重新創建它。

以下問題，在啟動應用程序時，“日期時間”應更新為當前時間。 每次我啟動服務器應用程序時，我都沒有得到應有的時間，它總是與我第一次運行應用程序的時間相同（上午 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();
    }
}

“初始化”方法在 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 的錯誤方法嗎？

Answer 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 服務中提取它，或者您必須訂閱來自服務器的時間推送通知。

Answer 2

我會說，是的，這是錯誤的方法。 一般來說，你會使用JavaScript這樣的事情。 關於 Web Applications，您需要了解的主要內容是您有一個Server和一個Client 。 與 UWP 相反，基本上一切都在Client上處理。 話雖如此，一旦您從Server收到請求，將不再處理C# ，直到您再次調用服務器。 此外，您的OnInitializedAsync僅在應用程序啟動時被命中。