如何在主从Razor页面中利用AJAX返回结果更新绑定的Model

你尝试的@Model.Child = child不生效，是因为Razor代码是服务端在页面首次渲染阶段执行的，当页面返回到浏览器后，服务端的Model上下文已经销毁，AJAX是前端异步请求，此时执行服务端代码不会有任何效果，自然无法更新前端控件。

你用@Html.xxxFor强类型Helper生成的子属性控件，默认的name属性会遵循{对象名}.{属性名}的规则，比如@Html.CheckBoxFor(m => m.Child.Property)生成的控件name就是Child.Property，和你的后端Child类的属性结构完全对应，只需要写一个通用的JS绑定函数，遍历AJAX返回的JSON对象属性，自动匹配控件赋值即可，不需要手动处理每个字段，后续新增字段也不需要修改JS逻辑。

实现代码 #

1. 通用绑定函数

// prefix：子对象的前缀，此处所有子属性控件都以Child开头，所以传"Child"
// model：AJAX返回的子项JSON对象，属性名需要和C# Child类的属性名一致
function bindChildToForm(prefix, model) {
    // 遍历返回对象的所有属性
    for (const prop in model) {
        if (!model.hasOwnProperty(prop)) continue;
        // 兼容Razor生成的两种name格式：带点和带下划线
        const selectors = [
            `[name="${prefix}.${prop}"]`,
            `[name="${prefix}_${prop}"]`
        ];
        const $target = $(selectors.join(','));
        if (!$target.length) continue;

        // 根据控件类型赋值
        if ($target.is(':checkbox')) {
            $target.prop('checked', Boolean(model[prop]));
        } else if ($target.is(':radio')) {
            $target.filter(`[value="${model[prop]}"]`).prop('checked', true);
        } else {
            $target.val(model[prop]);
        }
    }
}

2. 在AJAX回调中调用函数

$.ajax({
    url: '你的子项查询接口地址',
    data: { parentId: 选中的父行ID },
    success: function(childData) {
        // 直接调用通用绑定函数即可，不需要逐个字段赋值
        bindChildToForm('Child', childData);
    }
});

注意事项 #

• 后端返回的JSON对象属性名需要和C# Child类的属性名保持一致，如果.NET默认把属性名转成了驼峰格式，可以在后端配置JSON序列化规则保持PascalCase，或者在JS函数中增加大小写兼容逻辑。
• 后续新增子属性字段时，只需要在前端加对应的@Html.xxxFor控件，后端返回的JSON包含新增属性即可，不需要修改任何JS绑定逻辑。

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