.NET Core 3.1 select绑定嵌套属性时选中选项不更新问题

这不是.NET Core <select> 标签助手对嵌套属性的兼容问题，核心是两个机制共同导致的：

• ASP.NET Core表单标签助手的取值优先级规则：标签助手生成表单元素值/选中状态时，ModelState字典的优先级高于传入视图的模型属性值。ModelState会自动填充当前请求的查询字符串、路由参数、表单提交的所有参数值。
• 浏览器动态插入DOM的状态复用行为：当你用AJAX替换表单内部HTML时，如果新插入的表单元素和旧元素name属性一致，部分浏览器会默认复用旧元素的选中状态，而非完全采用新HTML里的selected属性标记。

你测试时平级模型能正常运行只是巧合：平级模型下，AJAX请求传入的projectId查询参数名和模型属性名ProjectId匹配（ModelState键名不区分大小写），ModelState里存的值正好是新选中的项目ID，而AssigneeId没有对应请求参数，标签助手会直接读取模型里的正确值，所以看起来功能正常。
嵌套模型场景下，ModelState里的键是请求参数名projectId，和标签助手需要查找的NestedData.ProjectId、NestedData.AssigneeId键名不匹配，虽然服务端生成的HTML已经正确给对应option加了selected属性，但DOM替换时浏览器复用了旧select的选中状态，就出现了返回HTML正确但界面显示不对的现象。

方案1（推荐，一劳永逸） #

在返回分部视图的接口中，先清空当前请求的ModelState，强制标签助手完全使用传入的模型值生成表单状态，这也是AJAX局部刷新表单场景的通用最佳实践：

public IActionResult GetFormPartial(int projectId)
{
    // 清空ModelState，避免请求参数/旧状态覆盖新模型的属性值
    ModelState.Clear();

    ViewBag.AllProjects = new SelectList(_projects, nameof(Project.Id), nameof(Project.Name));
    ViewBag.AllAssignees = new SelectList(_users, nameof(AppUser.Id), nameof(AppUser.DisplayName));
    return PartialView("_Form", GetDefaultGuiModelData(projectId));
}

添加这行代码后，不管模型嵌套多少层，select的选中状态都会和你传入的模型值完全一致，不会再出现状态异常。

方案2（前端兜底，不推荐） #

如果暂时不方便修改后端代码，可以在AJAX替换HTML后，手动给所有select赋值为新HTML中标记了selected的选项值，强制修正前端状态：

success: function (html) {
    const $form = $('#createInvoiceForm');
    $form.html(html);
    // 手动修正select选中状态，避免浏览器复用旧值
    $form.find('select').each(function () {
        const selectedVal = $(this).find('option[selected="selected"]').val();
        $(this).val(selectedVal);
    });
    onDocumentReady();
}

这个方案只能解决前端显示问题，没有从根源处理ModelState的优先级问题，后续如果新增表单输入项（比如输入框、单选框）还是可能出现值不匹配的问题，优先选择方案1。

额外优化建议：你现在的JS代码每次替换HTML后都会重复给#projectIdSelect绑定change事件，更规范的写法是用事件委托，把change事件绑定到不会被替换的父级form元素上，不用每次替换DOM都重新绑定，如果开启了客户端验证，替换DOM后还需要重新解析验证规则：

$(document).ready(function () {
    // 事件委托绑定到父容器，无需重复绑定
    $('#createInvoiceForm').on('change', '#projectIdSelect', function () {
        const selectedProjectId = this.value;
        $.get(`/Home/GetFormPartial?projectId=${selectedProjectId}`, function (html) {
            $('#createInvoiceForm').html(html);
            // 重新解析客户端验证规则
            $.validator.unobtrusive.parse('#createInvoiceForm');
        });
    });
});

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