Blazor 綁定屬性變更 Part 1 - 透過 DOM 事件機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制

更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道。

Blazor 綁定屬性變更 Part 2 - 實作 PropertyChanged 機制，用來偵測有興趣的物件有變化時，需要作出相對應的處理機制

Blazor 綁定屬性變更 Part 3 - 透過 PropertyChanged.Fody 套件，使用 INotifyPropertyChanged 機制，簡化程式碼設計

這是 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 屬性值來計算出適當要顯示的訊息，並且決定按鈕是否要啟用。

底下的螢幕截圖，將會是執行結果：

C# .NET Blazor MAUI Xamarin Research

2020年4月8日星期三