Blazor當中,類似實現了WPF的基礎繫結功能,支援在HTML元素當中使用Razor語法進行繫結C#欄位、屬性或 Razor 表示式值。

繫結語法

在Html標籤中,使用Razor的語法,字首使用@符號,然後新增 http://www.cppcns.com@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中的語法WhzJRzQi: @bind:format,如下所示,展示了一個日期元素格式化樣例:

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

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

繫結子元件屬性

通常情況下,對於父介面而言,往往是由一個或者多個子元件組成 (用於提高程式的複用性)， 所以父元件而言,往往需要將www.cppcns.com

宣告子元件引數與回撥函式

聲明瞭元件引數Year,還需要宣告一個元件回撥函式,該回調函式主要用於子元件的資料發生變更。
回撥函式的宣告規則為,引數型別與對應的屬性一直,名稱以屬性名開頭

  http://www.cppcns.com  <p>Year: @Year</p>

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

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

父元件呼叫

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

@code {
    [Parameter]http://www.cppcns.com
    public int ParentYear { get; set; } = 1978;

}

無法預估的值

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

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

到此這篇關於Blazor資料繫結用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。