MVC中如何通过JavaScript实现点击按钮调用并刷新同一partial view

1. 后端实现返回Partial View的接口 #

在对应的控制器中新增Action方法，专门用于返回需要刷新的局部视图：

public ActionResult GetTargetPartial()
{
    // 此处编写业务逻辑，查询局部视图需要的模型数据
    var partialModel = GetBusinessData();
    return PartialView("_YourPartialName", partialModel);
}

2. 前端页面改造 #

给局部视图的渲染区域套上带唯一ID的容器，同时定义触发刷新的按钮：

<!-- 局部视图容器，刷新后的内容会替换到该节点内 -->
<div id="partialWrap">
    @Html.Partial("_YourPartialName", Model)
</div>

<!-- 刷新触发按钮 -->
<button id="refreshBtn">刷新局部内容</button>

3. 编写JS点击事件逻辑 #

通过AJAX请求后端接口，拿到返回的局部视图内容后替换容器内容即可完成刷新：

$('#refreshBtn').on('click', function () {
    $.ajax({
        url: '@Url.Action("GetTargetPartial", "YourControllerName")',
        type: 'GET',
        // 如需传参可添加data字段，例: data: {id: 1, type: 2}
        success: function (res) {
            $('#partialWrap').html(res);
        },
        error: function () {
            alert('局部内容刷新失败');
        }
    });
});

注意事项 #

• 替换代码中_YourPartialName为你自己的局部视图文件名
• 替换YourControllerName为对应控制器的名称，无需加Controller后缀
• 如果局部视图内有绑定JS事件，刷新后原有绑定会失效，需在success回调中重新绑定事件，或使用事件委托的方式绑定
• 未引入jQuery的项目可使用原生fetch方法实现相同逻辑，拿到返回内容后替换容器innerHTML即可

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