Blazor Server端输入框绑定值点击按钮时未生效问题排查

问题原因 #

你没有为输入框正确配置Blazor双向数据绑定，存在两个错误：

• input元素的文本值属性为value而非text，你错误使用了text属性赋值
• 仅写@EmailAddress只是单向把属性值渲染到页面，没有配置用户输入反向同步到属性的绑定规则

修复方案 #

把input标签的写法替换为如下内容即可：

<input type="email" name="email" placeholder="Enter your email address" @bind="EmailAddress">

@bind是Blazor提供的双向绑定语法糖，会自动完成：

1. 把EmailAddress属性的值同步到输入框的value属性
2. 监听输入框的onchange事件，用户输入内容变化时自动把新值回写到EmailAddress属性

可选优化建议 #

可以搭配Blazor的EditForm组件和数据注解实现邮箱格式校验，减少无效请求：

1. 给EmailAddress属性添加校验注解

using System.ComponentModel.DataAnnotations;

[Required(ErrorMessage = "请输入邮箱地址")]
[EmailAddress(ErrorMessage = "请输入有效的邮箱格式")]
protected string EmailAddress { get; set; } = string.Empty;

2. Razor部分改用EditForm包裹

<EditForm Model="@this" OnValidSubmit="@SubscribeToNewsletterClick">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <input type="email" name="email" placeholder="Enter your email address" @bind="EmailAddress">
    <button type="submit">订阅</button>
</EditForm>

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