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

綁定語(yǔ)法

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

input @bind="Name" />

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

通過(guò)上面的操作, Input中的值與屬性Name則進(jìn)行了一個(gè)雙向綁定, 無(wú)論是Name主動(dòng)發(fā)生變更, 還是Input的值發(fā)生變化, 兩者都會(huì)同時(shí)更新。

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

@xxx/@bind區(qū)別

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

綁定對(duì)象

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

    <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ù)格式化顯示, 可以通過(guò)Razor中的語(yǔ)法: @bind:format , 如下所示,展示了一個(gè)日期元素格式化樣例:

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

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

綁定子組件屬性

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

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

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

    <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;

}

無(wú)法預(yù)估的值

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

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

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