Blazor/Razor页面@bind-Value绑定失效问题求助

问题概述 #

将Blazor表单输入框绑定到EF脚手架生成的User模型时，输入内容无法传递到模型：验证始终提示输入框无值，移除验证提交时数据库报NULL字段错误。已尝试调整绑定大小写、使用Input组件、指定绑定事件、手动赋值等操作，更换浏览器无效，模型已正确实例化且可通过EF手动添加数据。

解决方案 #

1. 确认使用InteractiveServer渲染模式 #

静态渲染模式下Blazor表单绑定无法正常工作，需确保项目配置为InteractiveServer模式：

• 在Program.cs中检查服务配置：

  builder.Services.AddRazorComponents()
      .AddInteractiveServerComponents();
  

• 在页面组件顶部添加渲染模式声明：

  @rendermode InteractiveServer
  

2. 修复模型属性初始化问题 #

EF生成的非可空字符串属性默认未初始化，new User()时会被设为null，触发[Required]验证失败。修改User模型，为非可空字符串添加默认值：

public partial class User
{
    public int UserId { get; set; }

    [Required]
    public string Email { get; set; } = string.Empty;

    [Required]
    public string Username { get; set; } = string.Empty;

    public DateTime? JoinDate { get; set; }

    public virtual ICollection<Comment> Comments { get; set; } = new List<Comment>();
    public virtual ICollection<UserPassword> UserPasswords { get; set; } = new List<UserPassword>();
    public virtual ICollection<Project> Projects { get; set; } = new List<Project>();
    public virtual ICollection<Task> Tasks { get; set; } = new List<Task>();
}

3. 移除不必要的绑定事件指定 #

InputText组件默认使用onchange事件，手动指定oninput可能导致绑定异常，恢复默认绑定：

<div>
    <label for="username">Enter UserName</label>
    <InputText id="username" @bind-Value="TempUser.Username" />
</div>

<div>
    <label for="email">Enter Email</label>
    <InputText id="email" @bind-Value="TempUser.Email" />
</div>

4. 修复提交后的消息显示问题 #

当前代码提交后重置模型，导致消息显示空用户名，修改为保存提交前的用户名：

private async SystemTask HandleSubmit()
{
    if (string.IsNullOrEmpty(TempUser.Email) || string.IsNullOrEmpty(TempUser.Username))
    {
        return;
    }

    var submittedUsername = TempUser.Username;
    DbContext.Users.Add(TempUser);
    await DbContext.SaveChangesAsync();
    TempUser = new();
    message = $"User {submittedUsername} submitted successfully!";
}

5. 添加字段级验证提示 #

为每个输入框添加ValidationMessage，便于定位具体验证错误：

<div>
    <label for="username">Enter UserName</label>
    <InputText id="username" @bind-Value="TempUser.Username" />
    <ValidationMessage For="@(() => TempUser.Username)" />
</div>

<div>
    <label for="email">Enter Email</label>
    <InputText id="email" @bind-Value="TempUser.Email" />
    <ValidationMessage For="@(() => TempUser.Email)" />
</div>

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