ASP.NET Core Razor Pages中如何将Bootstrap表单数据传递到MockEmployeeRepo

你遇到的表单传值失效基本是以下3个常见原因导致的：

• 绑定对象名称不匹配：表单asp-for绑定的是PageModel的EmployeeEditProperty属性，但后端更新逻辑用的是UpdatedEmployee，两个是完全独立的属性时，提交的值自然不会落到UpdatedEmployee上。
• 缺少主键字段传递：现有表单只提交了Name、Email两个字段，没有携带员工ID，查询时UpdatedEmployee.ID为空，自然查不到要更新的员工记录。
• 属性未开启绑定：Razor Pages中要接收POST请求的表单值，必须给对应属性加[BindProperty]特性，否则框架不会自动把表单值赋值到属性上。

1. 调整PageModel属性绑定 #

给需要接收表单值的属性开启绑定，选择以下任意一种方案即可：

// 方案1：继续用EmployeeEditProperty接值，更新时转赋值
public class EditEmployeeModel : PageModel
{
    // 加BindProperty特性开启表单绑定
    [BindProperty]
    public Employee EmployeeEditProperty { get; set; }
    
    // 省略注入MockEmployeeRepo的代码
}

// 方案2：直接把表单绑定对象改成UpdatedEmployee
public class EditEmployeeModel : PageModel
{
    [BindProperty]
    public Employee UpdatedEmployee { get; set; }
    
    // 省略注入MockEmployeeRepo的代码
}

2. 补充表单隐藏ID字段 #

在现有表单内增加主键隐藏字段，保证提交时能把员工ID传到后端：

<!-- 如果你用方案1，绑定EmployeeEditProperty的ID -->
<input type="hidden" asp-for="EmployeeEditProperty.ID" />

<!-- 如果你用方案2，绑定UpdatedEmployee的ID -->
<!-- <input type="hidden" asp-for="UpdatedEmployee.ID" /> -->

<div class="form-group row">
    <label asp-for="EmployeeEditProperty.Name" class="col-sm-2 col-form-label">
    </label>
    <div class="col-sm-10">
        <input asp-for="EmployeeEditProperty.Name" class="form-control" placeholder="Name">
    </div>
</div>
<div class="form-group row">
    <label asp-for="EmployeeEditProperty.Email" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <input asp-for="EmployeeEditProperty.Email" class="form-control" placeholder="Email">
    </div>
</div>
<!-- 省略Department输入框、提交按钮的代码 -->

3. 调整POST处理逻辑对接仓储 #

在OnPost方法里直接用绑定好的属性对接MockEmployeeRepo的更新逻辑即可：

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    // 以下是用方案1的示例，用方案2的话把EmployeeEditProperty替换成UpdatedEmployee即可
    Employee employee= _EmployeeList.FirstOrDefault(e => e.ID == EmployeeEditProperty.ID);
    if(employee !=null)
    {
        employee.Name = EmployeeEditProperty.Name;
        employee.Email = EmployeeEditProperty.Email;
        employee.Department = EmployeeEditProperty.Department;
        // 如果你的MockEmployeeRepo封装了Update方法，直接调用即可
        // _mockEmployeeRepo.Update(employee);
    }
    // 更新完成后跳转到列表页
    return RedirectToPage("EmployeeList");
}

4. 确认MockEmployeeRepo实现正确 #

确保你的Mock仓储更新逻辑是修改了内存中存储的员工集合：

public class MockEmployeeRepo : IEmployeeRepo
{
    private readonly List<Employee> _EmployeeList;
    // 省略构造函数初始化集合的代码
    
    public Employee Update(Employee updatedEmployee)
    {
        var employee = _EmployeeList.FirstOrDefault(e => e.ID == updatedEmployee.ID);
        if (employee != null)
        {
            employee.Name = updatedEmployee.Name;
            employee.Email = updatedEmployee.Email;
            employee.Department = updatedEmployee.Department;
        }
        return employee;
    }
}

如果修改后还是有问题，可以按F12打开浏览器开发者工具，切换到网络 tab，提交表单后查看请求的Form Data部分，确认字段名和你PageModel里的属性路径完全一致，比如EmployeeEditProperty.ID、EmployeeEditProperty.Name这类键存在且值正确。

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