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

綁定語法

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

input @bind="Name" />

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

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

通過@bind的聲明與 value="@xxx"的區(qū)別:

@xxx/@bind區(qū)別

value="@xxx": 只能做到屬性呈現(xiàn)到UI元素當中, 無法與UI元素建立關(guān)系, 即: 元素發(fā)生變化并不會影響到屬性變更。

綁定對象

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

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

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

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

效果如下所示:

數(shù)據(jù)格式化

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

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

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

綁定子組件屬性

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

聲明子組件參數(shù)與回調(diào)函數(shù)

聲明了組件參數(shù)Year, 還需要聲明一個組件回調(diào)函數(shù), 該回調(diào)函數(shù)主要用于子組件的數(shù)據(jù)發(fā)生變更。
回調(diào)函數(shù)的聲明規(guī)則為, 參數(shù)類型與對應(yīng)的屬性一直, 名稱以屬性名開頭

    <p>Year: @Year</p>

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

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

父組件調(diào)用

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

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

}

無法預(yù)估的值

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

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

到此這篇關(guān)于Blazor數(shù)據(jù)綁定用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論