Blazor 數據綁定(4)

點擊觀看視頻教程

Blazor當中, 類似實現了WPF的基礎綁定功能, 支持在HTML元素當中使用Razor語法進行綁定C#字段、屬性或 Razor 表達式值。

綁定語法

在Html標簽中,使用Razor的語法, 前綴使用@符號, 然后添加 @bind="xxxx" 即可實現最簡單的綁定, 如下:

input @bind="Name" />

@code {
    private string Name{ get; set; }
}

通過上面的操作, Input中的值與屬性Name則進行了一個雙向綁定, 無論是Name主動發生變更, 還是Input的值發生變化, 兩者都會同時更新。

通過@bind的聲明與 value="@xxx"的區別:

@xxx/@bind區別

value="@xxx": 只能做到屬性呈現到UI元素當中, 無法與UI元素建立關系, 即: 元素發生變化並不會影響到屬性變更。

綁定對象

下面示例演示了一個如何在html元素中的值如何綁定到一個對象的屬性上。

    <input @bind="Stu.Name"/>

@code{
    public Student Stu { get; set; } = new Student()
    {
        Name = "123"
    };

    public class Student
    {
        public string Name { get; set; }
    }
}

效果如下所示:

數據格式化

如果需要使用數據格式化顯示, 可以通過Razor中的語法: @bind:format , 如下所示,展示了一個日期元素格式化樣例:

    <input @bind="StartDate" @bind:format="yyyy-MM-dd" />

@code {
    [Parameter]
    public DateTime StartDate { get; set; } = new DateTime(2020, 1, 1);
}

綁定子組件屬性

通常情況下, 對於父界面而言, 往往是由一個或者多個子組件組成 (用於提高程序的復用性)， 所以父組件而言, 往往需要將父組件的參數綁定到子組件當中。
下面的例子,演示了一個子組件當中的字符串, 如何綁定到父組件的屬性上。

聲明子組件參數與回調函數

聲明了組件參數Year, 還需要聲明一個組件回調函數, 該回調函數主要用於子組件的數據發生變更。
回調函數的聲明規則為, 參數類型與對應的屬性一直, 名稱以屬性名開頭

    <p>Year: @Year</p>

@code {
    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }
}

父組件調用

<ChildComponent @bind-Year="ParentYear" />

@code {
    [Parameter]
    public int ParentYear { get; set; } = 1978;

}

無法預估的值

當元素與屬性建立了綁定關系, 但是受限於屬性的類型, 如果UI元素中發生了類型不一致的變更,則在觸發綁定事件時，無法分析的值會自動還原為以前的值。

例: 當綁定的屬性為Int類型時, UI元素將內容修改為string字符, 當UI元素發生事件變更時, 該值無法進行int類型的轉換,則回自動還原。