Blazor提交按钮失效求助：无法触发InsertUser插入数据到数据库

你的代码存在几个关键问题导致提交按钮无法触发InsertUser方法，逐一修正即可解决：

1. 错误的表单提交事件绑定 #

你当前使用的OnInvalidSubmit是表单验证失败时才会触发的事件，而你需要的是验证通过后执行提交逻辑，应该替换为OnValidSubmit。如果需要自定义验证逻辑，可以使用OnSubmit事件自行处理。

2. 多余的引号转义 #

代码中多处存在不必要的引号转义（比如\"/Users\"、\"newUser.UserName\"），这会导致Blazor无法正确解析路由、数据绑定和事件绑定，必须删除这些多余的转义符。

3. 可选：补充数据验证注解 #

如果DisplayUserModel没有添加数据验证注解（如[Required]），表单可能无法进入“验证通过”状态，建议给需要验证的字段添加注解，确保表单验证逻辑正常工作。

修正后的完整代码 #

@page "/Users"
@using DataAccessLibrary
@using DataAccessLibrary.Models
@using Models

@inject IUserData _db

@rendermode InteractiveServer

<h3>Users</h3>

<h5>Insert new user</h5>

<EditForm Model=@newUser OnValidSubmit="InsertUser">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-group">
        <InputText id="UserName" @bind-Value="newUser.UserName" class="form-control" /> <br />
        <InputText id="FullName" @bind-Value="newUser.FullName" class="form-control" /><br />
        <InputText id="Password" @bind-Value="newUser.Password" class="form-control" />
    </div>
    <br />
    <input type="submit" class="btn btn-primary" value="Save" />
</EditForm>

@code
{
    private List<UserModel> users; // 变量名修正为复数更符合语义
    public DisplayUserModel newUser = new DisplayUserModel();
    
    protected override async Task OnInitializedAsync()
    {
        users = await _db.GetUsers();
    }

    private async Task InsertUser()
    {
        UserModel us = new UserModel
        {
            UserName = newUser.UserName,
            Password = newUser.Password,
            FullName = newUser.FullName
        };

        await _db.InsertUsers(us);

        users.Add(us);
        newUser = new DisplayUserModel();
    }
}

额外优化建议 #

• 给DisplayUserModel的字段添加验证注解，示例：

  using System.ComponentModel.DataAnnotations;
  
  namespace Models
  {
      public class DisplayUserModel
      {
          [Required(ErrorMessage = "用户名不能为空")]
          public string UserName { get; set; }
          
          [Required(ErrorMessage = "姓名不能为空")]
          public string FullName { get; set; }
          
          [Required(ErrorMessage = "密码不能为空")]
          public string Password { get; set; }
      }
  }
  

• 将变量名user改为users，更贴合“用户列表”的语义。

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