Blazor中如何将HTML元素值绑定到C#属性？

嗨，这事儿其实挺简单的，Blazor专门做了双向绑定的特性来处理UI和C#代码之间的数据同步，直接用@bind指令就能搞定，我给你一步步拆解：

步骤1：定义C#绑定属性 #

先在你的@functions代码块里声明一个带get/set访问器的Name属性，最好给个初始值避免空引用问题：

@functions {
    // 定义要绑定的Name属性
    public string Name { get; set; } = string.Empty;
}

步骤2：给输入框添加双向绑定 #

直接在<input>元素上加上@bind="Name"指令，这样输入框的值就会和C#里的Name属性实时同步了：

<p>
    请输入您的姓名: <input type="text" @bind="Name" /><br />
</p>

完整可运行代码示例 #

我把两者结合起来，还加了一行实时显示输入内容的代码，方便你验证绑定是否生效：

@page "/nameUpload"

<p>
    请输入您的姓名: <input type="text" @bind="Name" /><br />
    <!-- 实时展示输入的姓名，验证绑定效果 -->
    您输入的姓名是: <strong>@Name</strong>
</p>

@functions {
    public string Name { get; set; } = string.Empty;
}

小补充：双向绑定的作用 #

Blazor的@bind是真正的双向同步：

• 你在输入框打字时，C#的Name属性会自动跟着更新
• 如果在C#代码里修改了Name的值（比如按钮点击事件里赋值），输入框的内容也会同步变化

内容的提问来源于stack exchange，提问作者SteelToe