Blazor .NET 8提交EditForm时获取值为空，如何解决？

DevOps 小满

2026-6-30

解决Blazor EditForm绑定值为空的问题

核心原因：绑定目标为字段而非属性

Blazor的双向绑定（@bind/@bind-Value）要求绑定对象是带get/set访问器的属性，而非字段。你的代码中game是字段类型，导致输入值无法同步到模型实例。

具体修复步骤

1. 将`game`字段改为属性

在@code块中，把字段声明替换为属性：

private Game Game { get; set; } = new Game()
{
    Genre = string.Empty,
    Name = string.Empty
};

2. 更新EditForm与输入组件的绑定引用

修改EditForm的Model参数和InputText的绑定目标，指向新的属性：

<EditForm Model="@Game" OnSubmit="HandleSubmit" FormName="a">
  <div class="mb-3">
   <label for="name" class="form-label">Name:</label>
   <InputText id="name" @bind-Value="Game.Name" class="form-control" />
  </div>
  <div class="mb-3">
   <label for="genre" class="form-label">Genre:</label>
   <InputText id="genre" @bind-Value="Game.Genre" class="form-control" />
  </div>
  <button type="submit" class="btn btn-primary">PLEASE WORK</button>
</EditForm>

3. 可选：添加表单验证组件（增强提交可靠性）

虽然不是绑定为空的直接原因，但添加验证组件可确保模型符合required约束，避免无效提交：

<EditForm Model="@Game" OnSubmit="HandleSubmit" FormName="a">
  <DataAnnotationsValidator />
  <ValidationSummary />
  
  <!-- 原有输入组件代码 -->
</EditForm>

4. 验证提交方法中的模型值

修改后的HandleSubmit方法可正确获取输入值：

private void HandleSubmit()
{
    Console.WriteLine($"Submitted: Name={Game.Name}, Genre={Game.Genre}, Price={Game.Price}");

    GameClient.AddGame(Game);
    NavigationManager.NavigateTo("/");
}