Blazor 綁定屬性變更 Part 2 - 實作 PropertyChanged 機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
Blazor 綁定屬性變更 Part 1 - 透過 DOM 事件機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制
Blazor 綁定屬性變更 Part 2 - 實作 PropertyChanged 機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制
這是本系列文章的第二個部分，在前一篇文章使用 DOM 提供的事件，綁定到 .NET C# 元件內的委派方法內 (這樣的開發過程將完全沒有使用到任何 JavaScript 程式碼，便可以完成這樣的設計，這也是 Blazor 開發框架最大的特色與好處)，進行當年紀屬性值有異動的時候，可以根據當前使用者輸入的年紀屬性值，進行相關商業邏輯計算工作。
在這篇文章中，將會使用另為一個機制，也就是在 MVVM 設計模式內經常會使用到 INotifyPropertyChanged 介面 (這個介面自從 .NET Framework 2.0 就已經存在了，在 Person 類別內來實作出 PropertyChanged 功能，用來做到 通知用戶端已變更屬性值。
這個說明專案的原始碼位於 bzINPC
建立 Blazor Server-Side 的專案
首先，還是先來建立一個新的專案
- 打開 Visual Studio 2019
- 點選右下方的 [建立新的專案] 按鈕
- [建立新專案] 對話窗將會顯示在螢幕上
- 從[建立新專案] 對話窗的中間區域，找到 [Blazor 應用程式] 這個專案樣板選項，並且選擇這個項目
- 點選右下角的 [下一步] 按鈕
- 現在 [設定新的專案] 對話窗將會出現
- 請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]在這裡請輸入 [專案名稱] 為
bzINPC - 完成後，請點選 [建立] 按鈕
- 當出現 [建立新的 Blazor 應用程式] 對話窗的時候
- 請選擇最新版本的 .NET Core 與 [Blazor 伺服器應用程式]
- 完成後，請點選 [建立] 按鈕
稍微等會一段時間，Blazor 專案將會建立起來
建立有實作 INotifyPropertyChanged 的 Person 類別
- 滑鼠右擊專案中的 [Pages] 資料夾節點
- 點選 [加入] > [類別]
- 現在 [新增項目] 對話窗將會出現
- 現在預設的新增項目將會選擇為 [類別]
- 在下方 [名稱] 欄位中，輸入
Person - 點選右下方的 [新增] 按鈕
- 使用底下 C# 程式碼，替換該檔案內的原有內容
namespace bzINPC.Pages
{
public class Person : System.ComponentModel.INotifyPropertyChanged
{
private string firstName;
public string FirstName
{
get { return firstName; }
set
{
if (firstName != null && firstName != value)
{
firstName = value;
OnPropertyChanged();
}
}
}
private string lastName;
public string LastName
{
get { return lastName; }
set
{
if (lastName != null && lastName != value)
{
lastName = value;
OnPropertyChanged();
}
}
}
private int age;
public int Age
{
get { return age; }
set
{
if (age != value)
{
age = value;
OnPropertyChanged();
}
}
}
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName]string propertyName = "")
{
PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}
}
在這個 Person 類別內，將會實作了
System.ComponentModel.INotifyPropertyChanged 介面，因此，將會多了一行 public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged; 宣告敘述。
在這個類別中，有兩個設計重點，第一個是要設計出一個 OnPropertyChanged 方法，這個方法將會於當該 Person 類別內的屬性有變動的時候，將會觸發 PropertyChanged 這個事件；而只要有訂閱這個 Person 執行個體的 PropertyChanged 事件，對於該類別內的任何屬性有異動的時候，都會收到觸發事件的通知。
因此，對於每個類別內的屬性成員，都會類似有底下的設計
這裡將會使用 Age 這個屬性設計來說明，對於設定存取子，首先將會檢查現在新變更的屬性值，與原先的屬性值是否相同，若為不相同，則將最新的屬性值設定給該屬性持有的欄位，接著，呼叫 OnPropertyChanged() 方法，因此，將會發出一個事件，在該事件將會註明 Age 這個屬性已經有異動了。
private int age;
public int Age
{
get { return age; }
set
{
if (age != value)
{
age = value;
OnPropertyChanged();
}
}
}
建立需求網頁 Balzor 元件
- 打開 [Pages] 資料夾內的 [Index.razor] 檔案
- 使用底下 Razor 元件標記與程式碼，替換該檔案內的原有內容
@page "/"
<h1>在 Blazor 使用 INotifyPropertyChanged 事件，設計屬性變更的需求</h1>
<div class="form-group">
<label for="FirstName">名</label>
<input id="FirstName" class="form-control" @bind="MyPerson.FirstName" />
</div>
<div class="form-group">
<label for="LastName">姓</label>
<input id="LastName" class="form-control" @bind="MyPerson.LastName" />
</div>
<div class="form-group">
<label for="Age">年紀</label>
<div class="form-group">
<label for="Age">年紀</label>
<input type="number" id="Age" class="form-control"
@bind="MyPerson.Age" @bind:event="oninput" />
</div>
</div>
<button type="submit" class="btn btn-primary" disabled="@IsDisabled">Submit</button>
<div class="text-danger">
@MyPerson.Age
</div>
<div class="text-info">
@Message
</div>
<div class="text-danger">
@AgeRange
</div>
@code{
Person MyPerson = new Person();
bool IsDisabled = true;
string AgeRange = "";
string Message = "";
protected override void OnInitialized()
{
MyPerson.PropertyChanged += (s, e) =>
{
Message = $"這個屬性 {e.PropertyName} 已經有變更了";
if (e.PropertyName == nameof(MyPerson.Age))
{
AgeChanged();
}
};
}
void AgeChanged()
{
if (MyPerson.Age < 13)
{
AgeRange = "你是小朋友";
IsDisabled = true;
}
else if (MyPerson.Age < 20)
{
AgeRange = "你是年青人";
IsDisabled = false;
}
else if (MyPerson.Age < 28)
{
AgeRange = "你是青年人";
IsDisabled = false;
}
else
{
AgeRange = "你是成年人";
IsDisabled = false;
}
StateHasChanged();
}
}
在這個 index.razor 檔案內，對於 HTML 標記的設計上，原則上沒有使用到任何宣告，用來綁定 C# 的委派方法內，例如，對於年紀輸入的標記中，將會使用這樣的宣告
<input type="number" id="Age" class="form-control" @bind="MyPerson.Age" @bind:event="oninput" /> 。從這樣的 HTML 宣告中，可以看到，對於這個 input 標籤中，使用 @bind="MyPerson.Age" 來宣告使用雙向資料綁定 two-way data binding，而又使用了 @bind:event="oninput" 的指示詞 (directive) 用來宣告當使用者有輸入任何資料之後，就需要立即透過資料綁定機制，把使用者輸入的內容，更新到 .NET C# 內的 MyPerson.Age 屬性上。
在這裡也使用了 Blazor 生命週期 - 元件初始化方法 ，也就是 OnInitialized 這個方法，在此訂閱該 MyPerson 物件中的屬性有異動的時候，將會需要接收的事件委派方法，這裡可以參考底下的程式碼。
protected override void OnInitialized()
{
MyPerson.PropertyChanged += (s, e) =>
{
Message = $"這個屬性 {e.PropertyName} 已經有變更了";
if (e.PropertyName == nameof(MyPerson.Age))
{
AgeChanged();
}
};
}
因為這個 MyPerson 執行個體的型別為 Person，而 Person 這個類別有實作 INotifyPropertyChanged，因此，對於 MyPerson 物件將會有 PropertyChanged 這個事件；在這個元件第一次建立的時候，將會使用 Lambda 匿名委派方法來訂閱這個事件，也就是說，當 MyPerson 這個物件中的屬性值有異動的時候，將會觸發執行這個匿名 Lambda 委派方法。
在這個 PropertyChanged 訂閱委派方法內，將會透過 Message 欄位將這次觸發的屬性名稱顯示在網頁上，接著判斷現在觸發的屬性名稱是否為 Age，若為 Age，則會進行有關年紀的商業邏輯計算的工作，也就是根據年紀顯示這是什麼類型的人並且決定按鈕是否要被停用還是啟用。
底下將會是執行結果
