Razor中PartialViewResult无法刷新页面问题求助

核心问题 #

你推测的没错，问题根源在于JavaScript的setPage函数没有处理后端返回的分部视图HTML，未替换页面上的原有内容；同时后端的PartialViewResult构造也存在小问题，需要调整。

解决方案 #

1. 修改JavaScript，处理返回的分部视图内容 #

在$.post的.done回调中，将返回的HTML直接替换包裹分部视图的容器：

function setPage(pageNum) {
    var reportUrl = '/myreports/index/setpage';
    $('#nextPageNumber').val(pageNum);
    var formData = $('#frmMyReportSetPage').serializeArray();
    $.post(reportUrl, formData)
    .done(function (response) {
        // 用返回的分部视图HTML替换目标容器内容
        $('#dvMyTest').html(response);
    })
    .fail(function () {
        alert("请求失败");
    });
}

可移除调试用的alert，减少不必要的干扰

2. 修正后端PartialViewResult的视图数据传递 #

后端构造PartialViewResult时，需确保正确传递模型给分部视图，调整OnPostSetPage方法：

public async Task<IActionResult> OnPostSetPage()
{
    await getResults();

    myReportModel.pager.pageNumber = 2;

    // 直接传递当前模型给分部视图
    return PartialView("_MyTest", this);
}

若需更明确配置，也可这样写：

public async Task<IActionResult> OnPostSetPage()
{
    await getResults();

    myReportModel.pager.pageNumber = 2;

    PartialViewResult result = new PartialViewResult
    {
        ViewName = "_MyTest",
        ViewData = new ViewDataDictionary<IndexModel>(ViewData, this)
    };
    // 确保模型被正确绑定
    result.ViewData.Model = this;

    return result;
}

3. 确保表单frmMyReportSetPage存在 #

检查页面中是否存在ID为frmMyReportSetPage的表单，若没有需补充：

<form id="frmMyReportSetPage">
    <input type="hidden" id="nextPageNumber" name="nextPageNumber" />
    <!-- 其他需要提交的表单字段 -->
</form>

如果无需额外字段，也可直接构造请求数据，跳过表单序列化：

$.post(reportUrl, { pageNumber: pageNum })

同时后端需添加对应参数接收：

public async Task<IActionResult> OnPostSetPage(int pageNumber)
{
    await getResults();

    myReportModel.pager.pageNumber = pageNumber;

    return PartialView("_MyTest", this);
}

验证步骤 #

1. 点击setPage : 2链接发起POST请求
2. 后端返回更新后的_MyTest分部视图HTML
3. JavaScript接收HTML并替换#dvMyTest容器内容，页面页码会更新为2

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