如何在 Blazor C# 中从 HTML 输入获取变量

已发表: 2024-12-09

如何在 Blazor C# 中从 HTML 输入获取变量

Blazor 是一个功能强大的框架，用于使用 C# 而不是 JavaScript 构建交互式 Web 应用程序。 Blazor 的核心功能之一是能够将 C# 代码与 HTML 元素绑定，从而可以轻松捕获用户输入并在应用程序中使用它们。在本文中，我们将探讨如何在 Blazor Server 和 Blazor WebAssembly 应用程序中从 Blazor 中的 HTML 输入元素获取变量。

Blazor 双向数据绑定简介

Blazor 提供了一项称为“双向数据绑定”的功能，该功能允许用户界面 (UI) 中的更改自动更新底层 C# 变量，反之亦然。当您想要捕获用户在 HTML 输入字段中输入的数据并立即在 C# 代码中反映这些更改时，这非常有用。

入门

代码AI测试

要从 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 应用程序的绝佳选择。