ASP.NET Core 8 MVC中Ajax更新表单控件后的模型绑定问题求助

你的核心问题是Ajax更新局部视图后，生成的表单控件name缺少主模型的属性前缀，导致表单提交时模型绑定无法识别这些控件对应到myModel的People属性。以下是具体修复步骤：

1. 修复主视图的下拉列表绑定 #

主视图中你用了@Html.DropDownList("DropDownListForGroupID")，生成的控件name是DropDownListForGroupID，但模型属性是groupID，这会导致提交时groupID无法被正确绑定。改成强类型绑定：

@model myModel

<form asp-action="myAction" asp-controller="myController" method="post">
    <div>
        @Html.LabelFor(m => m.groupID)
        <!-- 假设你在后端把下拉选项存入ViewBag.GroupList -->
        @Html.DropDownListFor(m => m.groupID, ViewBag.GroupList as SelectList, "请选择分组")
    </div>

    <div id="divToUpdated">
        <partial name="_myPartialView" for="People" />
    </div>

    <button type="submit">submit</button>
</form>

2. 修改后端UpdateForm方法，设置控件名称前缀 #

当通过Ajax返回局部视图时，需要让生成的控件name带上People.前缀（和初始渲染的结构一致，比如People.peopleList[0].isChecked）。通过设置ViewData.TemplateInfo.HtmlFieldPrefix实现：

[HttpGet] // 推荐用GET获取数据，而非POST
public IActionResult UpdateForm(string groupID) 
{
    List<Person> people = getDataFromDB(groupID);
    // 构建局部视图需要的模型
    var partialVm = new _myPartialViewModel 
    {
        peopleList = people
    };
    // 设置字段前缀，确保生成的控件name以"People."开头
    ViewData.TemplateInfo.HtmlFieldPrefix = "People";
    return PartialView("_myPartialView", partialVm);
}

3. 确保局部视图的控件生成正确 #

局部视图保持原有逻辑即可，因为我们已经通过HtmlFieldPrefix自动添加了前缀，生成的控件name会和初始渲染的一致：

@model _myPartialViewModel

@for (int i = 0; i < Model.peopleList.Count; i++) 
{
    <div>
        @Html.LabelFor(m => m.peopleList[i].Name)
        @Html.CheckBoxFor(m => m.peopleList[i].isChecked)
        <!-- 可选：添加隐藏字段保存Person的ID，提交时能识别具体是哪个人 -->
        @Html.HiddenFor(m => m.peopleList[i].ID)
    </div>
}

4. 优化Ajax请求 #

把请求方法改成GET（因为是获取数据，符合REST规范），同时确保URL正确（可以用Url.Action生成，避免硬编码）：

$("#groupID").on("change", function() {
    var groupId = $(this).val();
    $.ajax({
        type: "GET",
        url: "@Url.Action("UpdateForm", "myController")",
        data: {
            groupID: groupId
        },
        success: function (data) {
            $("#divToUpdated").html(data);
        },
        error: function (errMsg) {
            console.error(errMsg);
        }
    });
});

验证模型绑定 #

最后，确保你的提交方法myAction接收myModel参数，就能正确绑定所有字段：

[HttpPost]
public IActionResult myAction(myModel model)
{
    // model.groupID 和 model.People.peopleList 应该都能正确获取值
    if(ModelState.IsValid)
    {
        // 处理逻辑
        return RedirectToAction("Index");
    }
    // 如果验证失败，重新返回视图
    ViewBag.GroupList = GetGroupList(); // 重新加载下拉选项
    return View(model);
}

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