Blazor 綁定屬性變更 Part 1 - 透過 DOM 事件機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
Blazor 綁定屬性變更 Part 1 - 透過 DOM 事件機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制
這是 Blazor 綁定屬性變更問題需求探討的系列文章第一篇，首先，先來說明這系列文章想要設計出來的執行效果。當專案執行起來，將會想要出現底下畫面，在這裡共會有三個欄位 First Name 名 , Last Name 姓 , Age 年紀 ，其中前兩個為文字型態的內容，而年紀這個欄位，將會為 整數 數值。
當使用者在輸入年紀的時候，希望能夠即時在最下方顯示出相關文字，底下是要顯示文字的規則
- 若年紀小於 13 ，將會顯示 你是小朋友
- 若年紀小於 13 ，將會顯示 你是年青人
- 若年紀小於 13 ，將會顯示 你是青年人
- 否則 ，將會顯示 你是成年人
另外，還有一個需求，那就是當所輸入的 年紀 值小於 13 歲，則最下方的按鈕將會停用，無法點選，若年紀大於 13 歲，則可以點選
這個說明專案的原始碼位於 bzDOMEventChanged
建立 Blazor Server-Side 的專案
- 打開 Visual Studio 2019
- 點選右下方的 [建立新的專案] 按鈕
- [建立新專案] 對話窗將會顯示在螢幕上
- 從[建立新專案] 對話窗的中間區域，找到 [Blazor 應用程式] 這個專案樣板選項，並且選擇這個項目
- 點選右下角的 [下一步] 按鈕
- 現在 [設定新的專案] 對話窗將會出現
- 請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]在這裡請輸入 [專案名稱] 為
bzDOMEventChanged - 完成後，請點選 [建立] 按鈕
- 當出現 [建立新的 Blazor 應用程式] 對話窗的時候
- 請選擇最新版本的 .NET Core 與 [Blazor 伺服器應用程式]
- 完成後，請點選 [建立] 按鈕
稍微等會一段時間，Blazor 專案將會建立起來
建立需求網頁 Balzor 元件
在這裡，初步需求的設計程式碼與 HTML 標記，將會採用 Index.razor 這個檔案來設計，因此
- 打開 [Pages] 資料夾內的 [Index.razor] 檔案
- 使用底下 Razor 元件標記與程式碼，替換該檔案內的原有內容
@page "/"
@using System.ComponentModel.DataAnnotations
<h1>在 Blazor 使用 DOM 事件，設計屬性變更的需求</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>
<input type="number" id="Age" class="form-control"
@bind="MyPerson.Age" @bind:event="oninput" />
</div>
<button type="submit" class="btn btn-primary" disabled="@IsDisabled">Submit</button>
<div class="text-danger">
@MyPerson.Age
</div>
<div class="text-danger">
這裡可以顯示年紀分類說明文字
</div>
@code{
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
}
Person MyPerson = new Person();
bool IsDisabled = true;
}
在這裡將會設計一個類別名為
Person ，可以讓使用者輸入 First Name , Last Name , Age 這三個屬性值；並且在這個 Blazor 元件中，使用敘述 Person MyPerson = new Person(); 建立一個 MyPerson 物件，該物件將會用於在 HTML 頁面中使用資料綁定 Razor 語法，來與 HTML 內的 DOM 元素進行綁定在一起。
在上面的標記與程式碼中，將可以看到，對於 Last Name , First Name , Age 這三個欄位，將會透過 Blazor Directive
@bind 宣告使用 input 標記的雙向綁定，這裡分別使用了：@bind="MyPerson.FirstName" , @bind="MyPerson.LastName" , @bind="MyPerson.Age"
然而，對於 Age 這個欄位， 使用了
<input type="number" ... 宣告這裡要輸入的內容將會是一個數值，並且對於這個年紀欄位，由於需要即時偵測出使用者當時輸入了甚麼內容，而不是要等到使用者輸入完成之後，輸入焦點離開年紀欄位之後才會更新，所以，在這裡使用了 @bind:event="oninput" 這樣的語法來宣告要能夠即時更新使用輸入的內容到 .NET 物件， MyPerson.Age 欄位。
對於這個需求 [當所輸入的 年紀 值小於 13 歲，則最下方的按鈕將會停用，無法點選，若年紀大於 13 歲，則可以點選] ，在這裡將會使用 C# 宣告一個布林欄位 IsDisabled，並且將這個欄位使用單向綁定技術，綁定到按鈕的 disabled 的屬性值上。
現在，可以開始執行這個專案，並且在年紀欄位中，輸入任何的整數數值，但不用將輸入焦點離開這個欄位，就會看到底下紅色文字就會顯示出即時所輸入的文字內容。
建立解決問題之元件
雖然 Blazor 的資料綁定 Data Binding 機制，解決了可以將 .NET 的物件值與 HTML DOM 內的環境，綁定在一起現在要能解決這個問題，也就是說，透過了雙向綁定作法，若任何一方(來源 Source 或者目的 Target)的值有變動，將會即時更新到另外一方。
對於當使用者有輸入新的年紀數值的時候，此時，在 .NET 物件的 MyPerson.Age 屬性上屬性值，就已經透過 Blazor Two-way data binding 雙向綁定機制，自動把使用者輸入的最新數值，更新到 MyPerson.Age 值上；可是，此時對於在這個 Blazor 元件中的 C# 程式碼中，要如何知道 MyPerson.Age 的值已經有變動了，接下來，便需要針對當初提出的需求，進行設計：針對當前的年紀，顯示適當的文字與修正按鈕是否可以使用。
很多人對於這樣的需求想說，這裡可以使用 含有支援欄位的屬性 內的設定 set 存取子來進行設計，不過，由於 Age 這個屬性是在 Person 類別內，是無法知道與直接更新這個元件內的欄位 Field 或者 屬性 Property。
在這篇文章中，將會使用最常用的設計技術，也就是 事件 Event 來解決此一問題，也就是說，要透過 DOM 的事件來通知這個元件內的某個委派方法，告知所關注的物件已經有變動了，可以開始執行所綁定的委派方法。
- 滑鼠右擊專案中的 [Pages] 資料夾節點
- 點選 [加入] > [新增項目]
- 現在 [新增項目] 對話窗將會出現
- 在該對話窗最左邊，點選 [Visual C#]
- 在該對話窗的中間，找到並點選 [Razor 元件] 選項
- 在下方 [名稱] 欄位中，輸入
AgePropertyChanged - 點選右下方的 [新增] 按鈕
- 完成新增這個元件檔案
- 使用底下 Razor 元件標記與程式碼，替換該檔案內的原有內容
@page "/AgePropertyChanged"
@using System.ComponentModel.DataAnnotations
<h1>在 Blazor 使用 DOM 事件，設計屬性變更的需求</h1>
<h2>AgePropertyChanged</h2>
<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>
<input type="number" id="Age" class="form-control"
value="@MyPerson.Age"
@oninput="@(x=>OnAge(x))" />
</div>
<button type="submit" class="btn btn-primary" disabled="@IsDisabled">Submit</button>
<div class="text-danger">
@MyPerson.Age
</div>
<div class="text-danger">
@AgeRange
</div>
@code{
void OnAge(ChangeEventArgs e)
{
try
{
MyPerson.Age = Convert.ToInt32(e.Value);
}
catch { }
AgeChanged();
}
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
}
Person MyPerson = new Person();
bool IsDisabled = true;
string AgeRange = "";
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();
}
}
首先，先來設計一個方法，用來根據當前的年紀，根據所指定的規格，設定適當的文字，這裡將會儲存到新加入的 AgeRange 欄位變數內，這裡將會設計到
AgeChanged() 方法內；而且，這個 AgeRange 變數，將會透過單向資料綁定 one-way data binding 的方式，使用底下宣告來顯示在螢幕上<div class="text-danger">
@AgeRange
</div>
另外，在
AgeChanged() 方法內，也會修正 IsDisabled 變數的數值內容，也就會間接影響到當時的按鈕是否可以使用，這裡透過了 disabled="@IsDisabled" 宣告方式，透過單向資料綁定來做到。
在這裡的原始碼中，將會發現到對於年紀的 HTML 標記宣告，變成了
<input type="number" id="Age" class="form-control" value="@MyPerson.Age" @oninput="@(x=>OnAge(x))" /> 這樣，原先使用 @bind="MyPerson.Age" 的雙向資料綁定宣告，修改成為了 value="@MyPerson.Age" 單向的資料綁定。問題探討
若對於上述的說明不是很了解的，可以請讀者對於上述的說明進行研究之後，將你的看法留言在本部落格文章的留言處
由於現在變更成為了單向資料綁定，所以，就宣告了
@oninput="@(x=>OnAge(x))" /> oninput 指示詞 (directive)來做到綁定網頁端的 DOM 的事件 GlobalEventHandlers.oninput，也就是說，當使用者有輸入任何內容的時候，將會觸發這個元件中內 C# 的 OnAge 事件委派方法。
從 [OnAge] 方法中，將會看到有宣告一個參數，其型別為 ChangeEventArgs，這裡將會透過這個參數，取得使用者最新輸入的內容，該內容可以透過 e.Value 來取得。並且將該內容轉型成為 int 型別，最後設定到 MyPerson.Age 屬性上。
由於 MyPerson.Age 屬性已經有異動了，所以，將會根據當前的 MyPerson.Age 屬性值來計算出適當要顯示的訊息，並且決定按鈕是否要啟用。
底下的螢幕截圖，將會是執行結果：
