ASP.NET Core MVC中使用AJAX调用后如何刷新视图

问题根因 #

AJAX属于异步请求，服务端返回的视图内容只会作为响应数据传递给AJAX的success回调函数，浏览器不会自动渲染该视图、也不会主动刷新页面，你当前的success回调为空，因此没有任何页面变化。

解决方案 #

你可以根据业务需求选择以下任意一种方案：

方案1：不用AJAX，改用原生表单提交

如果不需要保留当前页面的其他状态，直接替换为表单提交即可：

• 给页面表单添加enctype="multipart/form-data"属性，提交按钮使用type="submit"类型，不需要写AJAX逻辑，服务端返回View时浏览器会自动加载新页面。

方案2：保留AJAX异步提交，补充后续处理逻辑

子方案2.1 整页刷新/跳转

上传完成后手动触发页面跳转，修改AJAX的success回调即可：

$.ajax({
    type: "POST",
    url: "/Photos/Create",
    contentType: false,
    processData: false,
    data: formData,
    success: function () {
        // 方式1：直接刷新当前页面
        window.location.reload();
        // 方式2：直接跳转到目标Photos页面，和控制器返回的视图目标一致
        // window.location.href = '/Photos/Photos?customer_Id=' + 你的客户ID参数;
    }
});

子方案2.2 局部刷新页面内容

如果不想整页刷新，可以只替换页面的照片展示区域：

1. 控制器调整返回值为局部视图：

// 替换原有的return View代码
return PartialView("Photos", PopulateLists(GetCustomerId(), photoStage));

2. 页面给照片展示区域添加id，比如id="photoContainer"，修改AJAX回调：

success: function (html) {
    // 用返回的局部视图HTML替换原有内容
    $('#photoContainer').html(html);
    // 可选：清空文件选择框，方便用户下次上传
    $('#inpFiles').val('');
}

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