C# ASP.NET MVC中AJAX调用返回视图未正常加载的问题

问题根源 #

AJAX的异步交互逻辑和普通页面同步提交的逻辑存在本质差异：

• 普通同步请求（比如点击链接、提交原生表单），浏览器拿到服务器返回的视图HTML后，会自动替换当前页面的所有内容完成渲染
• AJAX请求拿到服务器返回的视图内容后，只会把这段内容作为响应数据存在JS的回调参数里，不会自动修改当前页面的任何DOM元素

你当前的AJAX调用连基本的成功回调都没有，拿到控制器返回的视图HTML后没做任何渲染操作，哪怕控制器逻辑100%正常执行，页面也不会有任何变化。

对应修正方案 #

1. 补全AJAX的渲染回调
   提前在页面主内容区预留一个承载视图的容器，比如<div id="mainContentBox"></div>，在AJAX的success回调里把返回的HTML塞入这个容器，完成视图加载。
2. 修正控制器的视图传参
   你目前的代码中，把前端序列化传来的model反序列化成了newModel，但没有把这个对象传给要返回的Index视图，直接执行return View("Index")会因为Index视图需要绑定List<Store>类型的模型，直接抛出模型为空的异常，需要把反序列化得到的对象显式作为视图模型传入。

修改后的AJAX代码 #

$.ajax({
    type: 'POST',
    url: '@Url.Action("EditCertificateObservation", "Frühwarnsystem")',
    data: {
        serverName: '@Model[0].ServerName',
        name: event.data.name,
        thumbprint: event.data.thumbprint,
        expiringDateStr: event.data.expiringDate,
        isChecked: document.getElementById(store + event.data.index).checked,
        model: data,
    },
    // 新增成功回调，渲染返回的视图
    success: function (responseHtml) {
        $('#mainContentBox').html(responseHtml);
    },
    // 新增错误捕获，避免视图加载时报错无感知
    error: function (xhr) {
        console.error('视图加载失败', xhr.responseText);
    }
});

修改后的控制器代码 #

[HttpPost]
public ActionResult EditCertificateObservation(string serverName, string name, string thumbprint, string expiringDateStr, bool isChecked, string model)
{
    var newModel = JsonConvert.DeserializeObject<List<Store>>(model);

    var cert = new Certificate(serverName, name, thumbprint, expiringDateStr);
    var server = new Server(serverName);
    server.FetchIdByServerName();

    if (isChecked)
    {
        cert.AddToObservation(server.Id);
    }
    else
    {
        cert.DeleteFromObservation();
    }
    // 将反序列化得到的模型传给Index视图，避免空引用报错
    return View("Index", newModel);
}

场景适配提醒 #

• 如果你需要的效果是完全跳转刷新到Index页面，完全没必要用AJAX渲染HTML：直接在AJAX成功回调里写window.location.href = '@Url.Action("Index", "Frühwarnsystem")'，靠浏览器原生跳转加载页面，比手动拼接HTML稳定得多。这种场景甚至可以完全去掉AJAX，把复选框放在原生同步表单里提交，浏览器会自动处理返回的视图。
• 如果你需要的是无刷新局部加载视图，要注意：动态替换DOM后，原本绑定在旧DOM元素上的JS事件会失效，涉及后续交互的元素要使用事件委托绑定，避免复选框、按钮的点击操作失效。

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