.NET Core MVC 视图组件表单提交至控制器接收null问题排查

问题场景 #

项目中编写了视图组件，组件内包含用于更新数据的表单，表单提交到对应控制器的Update方法后，控制器接收到的参数始终为null，相关代码如下：

相关代码 #

视图组件实现 #

public class CustomerPropertyViewComponent: ViewComponent
{
    private MyDBContext context;
    public CustomerPropertyViewComponent(MyDBContext _contex)
    {
        context = _contex;
    }

    public async Task<IViewComponentResult> InvokeAsync(int id)
    {
        CustomerPropertyModelView c = new CustomerPropertyModelView();
        TblCustomerProperty t = new TblCustomerProperty(context);
        c = t.getAllInfo(id);
        if (c.model == null)
        {
            c.model = new TblCustomerProperty();
            c.model.CustomerId = id;
        }
        return View(c);
    }
}

视图组件对应的视图代码 #

视图绑定模型为SunSystemDotNetCoreVersion.Models.helpers.CustomerPropertyModelView，表单核心代码如下：

@model SunSystemDotNetCoreVersion.Models.helpers.CustomerPropertyModelView
    
<form asp-action="Update" asp-controller="CustomerProperties"
      data-ajax="true"         
      data-ajax-method="POST"
      method="post">
    <div class="row w-100">
        <div class="col-6">
            <div class="row align-items-center h-100">
                <div class="col-5 text-right">
                    Number of Bedrooms
                </div>
                <div class="col-7 p-1 p-1">
                    @Html.TextBoxFor(model => model.model.Bedrooms, new { @class = "form-control", Type = "number" })
                </div>
                <div class="col-5 text-right">
                    Current Heating System
                </div>
                <div class="col-7 p-1">
                    <select asp-for="model.HeatingSystemTypeId" class="form-control"
                            asp-items="@(new SelectList(Model.HeatingsList,"HeatingSystemTypeId","Title"))">
                        <option value="0">-Plaese Select-</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-12">
            <button type="submit">Save</button>
        </div>
    </div>
</form>

注：已精简冗余代码，实际表单包含所需全部字段。

对应控制器实现 #

public class CustomerPropertiesController : Controller
{
    private readonly MyDBContext _context;

    public CustomerPropertiesController(MyDBContext context)
    {
        _context = context;
    }

    public IActionResult Update(TblCustomerProperty modelView)
    {
        // 此处modelView始终为null
        return View();
    }
}

问题原因与修复方案 #

核心原因：ASP.NET Core的模型绑定机制完全依赖表单字段的name属性层级和控制器参数的层级匹配，当前表单生成的字段路径和控制器的参数路径完全不对应，导致绑定失败。

1. 视图中的所有输入控件都是通过model.model.xxx的表达式生成的，最终渲染出的input的name属性为model.Bedrooms、model.HeatingSystemTypeId这类带model.前缀的格式。
2. 控制器的Update方法直接定义了TblCustomerProperty类型的参数modelView，模型绑定器会尝试匹配名为modelView.xxx的表单字段，和实际提交的model.xxx格式的字段完全没有匹配项，最终绑定结果为null。

可选修复方案 #

两种方向二选一即可：

• 方案1：调整控制器的接收参数类型，和视图的嵌套模型保持一致，从嵌套对象中取出业务实体处理

  [HttpPost]
  public IActionResult Update(CustomerPropertyModelView modelView)
  {
      // 从视图模型中取出嵌套的TblCustomerProperty实体
      var propertyEntity = modelView.model;
      // 后续数据库更新逻辑
      return View();
  }
  

• 方案2：调整表单的绑定路径，去掉外层嵌套前缀，让生成的表单字段名和控制器参数匹配
  如果需要控制器直接接收TblCustomerProperty类型的参数，就需要把视图里的asp-for、TextBoxFor的表达式从model.model.xxx改为model.xxx，保证渲染出来的表单字段名没有多余的嵌套前缀。

额外排查注意点 #

• 可以打开浏览器开发者工具的网络面板，找到表单提交的请求，查看请求载荷里的Form Data实际字段名，和控制器的参数绑定规则逐字段比对，快速定位不匹配的问题。
• 确保POST提交的接口加上[HttpPost]特性标注，避免GET路由拦截POST请求导致的绑定异常。
• 如果使用了data-ajax="true"的AJAX提交配置，需要确认项目已正确引入jquery-ajax-unobtrusive静态库，否则AJAX配置不会生效，可能出现提交行为不符合预期的问题。

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