Blazor數(shù)據(jù)綁定的方法是什么

本篇內(nèi)容介紹了“Blazor數(shù)據(jù)綁定的方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Blazor當(dāng)中, 類似實(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ù)類型與對(duì)應(yī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)系, 但是受限于屬性的類型, 如果UI元素中發(fā)生了類型不一致的變更,則在觸發(fā)綁定事件時(shí)，無(wú)法分析的值會(huì)自動(dòng)還原為以前的值。

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

“Blazor數(shù)據(jù)綁定的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！