繫結 Blazor 應用程式中的控制項和資料

7 分鐘

Blazor 可讓您將 HTML 控制項繫結至屬性，以自動在使用者介面 (UI) 中顯示有所變更的值。

假設您要開發一個頁面，收集客戶披薩喜好的資訊。您想要從資料庫載入資訊，讓客戶可以進行變更，例如記錄他們最喜愛的配料。您希望在使用者提出變更或資料庫更新時，新的值可以儘快顯示在 UI 中。

在本單元中，您將學習如何在 Blazor 中使用資料繫結，將 UI 元素繫結至資料值、屬性或運算式。

資料繫結是什麼？

如果您想要 HTML 元素顯示值，則可以撰寫程式碼來改變顯示。您必須撰寫額外的程式碼，才能在值有所變更時更新顯示。在 Blazor 中，您可以使用資料繫結，將 HTML 元素連結至欄位、屬性或運算式。如此一來，當值有所變更時，HTML 元素就會自動更新。變更後通常很快就會更新，您不需要撰寫任何更新程式碼。

若要繫結控制項，您將使用 @bind 指示詞：

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

在上一個頁面中，每當 customerEmail 變數變更其值時，<input> 值就會隨之更新。

注意

<input> 這類控制項只會在元件呈現時更新其顯示，而不會在欄位的值變更時更新。因為 Blazor 元件會在事件處理常式程式碼執行之後呈現，所以在實務上，更新通常會快速顯示。

將元素繫結至特定事件

@bind 指示詞可以自行了解其所使用的控制項。例如，當您將值繫結至文字方塊 <input> 時，會繫結 value 屬性。 HTML 核取方塊 <input> 具有 checked 屬性，而不是 value 屬性。 @bind 屬性會自動改用此 checked 屬性。根據預設，控制項會繫結至 DOM onchange 事件。例如，請考慮使用此頁面：

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

當頁面呈現時，預設值 Margherita 會同時顯示在 <h1> 元素和文字方塊中。當您在文字方塊中輸入您喜愛的新披薩時，除非您跳出該文字方塊，或選取 Enter，否則 <h1> 元素不會變更，因為這兩個動作才會引發 onchange DOM 事件。

這通常是您想要的行為。但假設您想要 <h1> 元素在您於文字方塊中輸入任何字元時立即更新。您可以改成繫結至 oninput DOM 事件以達成此結果。若要繫結至此事件，您必須使用 @bind-value 和 @bind-value:event 指示詞：

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

在此案例中，當您在文字方塊中輸入任何字元時，標題就會隨之變更。

格式化繫結的值

如果您向使用者顯示日期，則可能想要使用當地語系化的資料格式。例如，假設您特別為英國使用者撰寫一個頁面，因為這些使用者在寫日期時，習慣先寫日。您可以使用 @bind:format 指示詞指定單一日期格式字串：

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

注意

撰寫時，只有日期值才支援格式字串。未來可能會新增貨幣格式、數字格式和其他格式。若要查看繫結格式的最新資訊，請參閱 Blazor 文件中的格式字串。

除了使用 @bind:format 指示詞之外，還可以撰寫 C# 程式碼來格式化繫結的值。如下列範例所示，在成員定義中使用 get 和 set 存取子：

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

在下一個單元中，您將會套用所學到的內容。

繼續

繫結 Blazor 應用程式中的控制項和資料

資料繫結是什麼？

將元素繫結至特定事件

格式化繫結的值

意見反應