如何在 Blazor C# 中從 HTML 輸入取得變數

Blazor 是一個功能強大的框架，用於使用 C# 而不是 JavaScript 建立互動式 Web 應用程式。 Blazor 的核心功能之一是能夠將 C# 程式碼與 HTML 元素綁定，從而可以輕鬆捕獲使用者輸入並在應用程式中使用它們。在本文中，我們將探討如何在 Blazor Server 和 Blazor WebAssembly 應用程式中從 Blazor 中的 HTML 輸入元素取得變數。

Blazor 雙向資料綁定簡介

Blazor 提供了一項稱為「雙向資料綁定」的功能，該功能允許使用者介面 (UI) 中的變更自動更新底層 C# 變量，反之亦然。當您想要擷取使用者在 HTML 輸入欄位中輸入的資料並立即在 C# 程式碼中反映這些變更時，這非常有用。

入門

要從 HTML 輸入欄位取得變數，您需要一些關鍵元件：

1. HTML 輸入：使用者輸入資料的輸入欄位。
2. C# 變數：儲存輸入資料的 C# 變數。
3. 資料綁定：輸入欄位和 C# 變數之間的連接，通常透過 Blazor 中的@bind指令。

在以下部分中，我們將透過各種範例來演示其工作原理。

範例 1：簡單文字輸入綁定

捕捉使用者輸入最簡單的方法是使用@bind指令。這會自動將 HTML 輸入元素綁定到 C# 變數。

程式碼範例（Razor 元件）

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

解釋：

1. @bind指令將input元素綁定到 C# 中的userName變數。每當使用者在輸入欄位中鍵入內容時， userName變數就會自動更新。
2. 段落<p>Hello, @userName!</p>動態顯示userName的值，在使用者鍵入時即時顯示更新的文字。

在此範例中，變數userName綁定到輸入字段，Blazor 的雙向綁定可確保每當使用者修改文字時， userName的值都會即時更新。

範例 2：取得並使用按鈕點擊時的輸入

有時您需要對使用者輸入的資料執行操作，例如單擊按鈕來提交值或進一步處理它。這也可以在 Blazor 中輕鬆實現。

程式碼範例（Razor 元件）

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

解釋：

1. @bind="age"指令將輸入欄位綁定到age變數。
2. @將按鈕的點選事件綁定到SubmitAge方法。
3. 當使用者按一下該按鈕時，將呼叫SubmitAge方法，該方法將輸入的年齡列印到控制台。

在此範例中，使用者可以輸入他們的年齡，當他們按一下「提交」按鈕時，將觸發SubmitAge方法以使用age變數執行操作。

範例 3：輸入驗證

Blazor 允許您透過將資料綁定與<EditForm>等表單元件結合來輕鬆執行輸入驗證。

程式碼範例（Razor 元件）

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

解釋：

1. <EditForm>元件用於包裝輸入欄位並執行驗證。
2. @bind-Value="person.FirstName"將輸入欄位綁定到person物件的FirstName屬性。
3. DataAnnotationsValidator元件使用資料註解（例如[Required] ）來驗證輸入。
4. 如果輸入有效且表單已提交，則呼叫HandleValidSubmit方法來處理資料。

驗證：

• 如果使用者不提供名字（由於[Required]註釋），將出現驗證訊息，並且在輸入有效之前不會提交表單。

與其他輸入類型的進階綁定

Blazor 支援多種輸入類型，例如文字方塊、複選框、單選按鈕、下拉清單等。

範例：複選框綁定

@page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

在此範例中，複選框綁定到isSubscribed變量，當使用者選取或取消選取該框時， isSubscribed的值會自動更新。

結論

得益於 Blazor 強大的雙向資料綁定，從 Blazor 中的 HTML 輸入取得變數既簡單又有效率。透過使用@bind指令，您可以快速將輸入欄位連結到 C# 變量，確保 UI 中的變更反映在您的程式碼中，反之亦然。

無論您是建立簡單的表單還是複雜的輸入驗證邏輯，Blazor 的資料綁定功能都可以簡化處理使用者輸入的過程。從文字方塊到複選框，Blazor 無縫處理 HTML 和 C# 之間的集成，使其成為建立互動式 Web 應用程式的絕佳選擇。