Blazor WASM表单提交时模型属性始终为空的问题排查

以下是针对该问题的常见排查点和修复方案：

1. 确认模型实例的初始化方式 #

确保RegisterFormModel是组件级别的字段，且仅初始化一次：

// 正确：在组件类顶部声明并初始化，作为组件成员字段
private RegisterFormModel model = new RegisterFormModel();

// 错误：在提交方法或渲染逻辑中重新实例化，导致提交时使用空模型
private async Task HandleSubmit()
{
    var model = new RegisterFormModel(); // 这里会覆盖组件的模型实例
    await AuthService.Register(model);
}

2. 检查表单绑定语法 #

所有表单控件必须使用双向绑定指令@bind-*，确保值能同步到模型：

<!-- 正确：双向绑定 -->
<InputText @bind-Value="@model.Username" />
<InputEmail @bind-Value="@model.Email" />

<!-- 错误：仅单向绑定，不会更新模型 -->
<InputText Value="@model.Username" />

同时注意绑定的属性名必须与模型中的属性完全匹配（大小写不敏感，但建议保持一致）。

3. 验证模型属性的可访问性 #

RegisterFormModel的属性必须是public，否则Blazor无法通过绑定更新值：

// 正确：public属性
public class RegisterFormModel
{
    public string Username { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
}

// 错误：private/protected属性无法被绑定更新
public class RegisterFormModel
{
    private string Username { get; set; }
}

4. 确保控件在EditForm内部 #

所有需要绑定的表单控件必须嵌套在<EditForm>组件中，且EditForm正确绑定了模型：

<!-- 正确结构 -->
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText @bind-Value="@model.Username" />
    <InputEmail @bind-Value="@model.Email" />
    <InputPassword @bind-Value="@model.Password" />

    <button type="submit">注册</button>
</EditForm>

<!-- 错误：控件在EditForm外部，无法参与表单绑定 -->
<InputText @bind-Value="@model.Username" />
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <button type="submit">注册</button>
</EditForm>

5. 排查组件状态问题 #

如果使用了交互式渲染模式（如@rendermode InteractiveServer），避免在组件生命周期方法中意外重置模型。例如不要在OnParametersSet中重新初始化模型，除非有明确的参数更新需求。

6. 检查提交方法逻辑 #

确保提交方法直接使用组件的模型实例，而非重新创建或传递错误的变量：

// 正确
private async Task HandleSubmit()
{
    // 直接使用组件级别的model实例
    var result = await AuthService.Register(model);
    // 后续逻辑
}

如果以上排查后问题仍未解决，建议提供以下代码片段以便进一步定位：

• 注册组件的Razor代码（包含EditForm和控件部分）
• RegisterFormModel的完整代码
• 提交方法的实现代码

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