Razor Pages加载局部视图时如何实现分页、排序与筛选功能

jQuery的load方法本身支持传递请求参数，你可以按照以下步骤改造实现参数传递：

1. 封装可复用的列表加载函数，动态获取控件中的筛选、排序、页码参数：

// 通用加载列表方法
function loadProviderList() {
    // 从页面控件获取对应参数
    const sortOrder = $("#sortField").val(); // 排序字段控件
    const searchString = $("#searchInput").val(); // 搜索框
    const pageIndex = $("#currentPage").val() || 1; // 当前页码隐藏域/控件

    // 拼接带参数的请求地址，encodeURIComponent避免特殊字符乱码
    const requestUrl = `/Admin/ProviderTypes/Index?handler=Providers&sortOrder=${encodeURIComponent(sortOrder)}&searchString=${encodeURIComponent(searchString)}&pageIndex=${pageIndex}`;
    $("#list").load(requestUrl);
}

// 页面初始化加载
$(function () {
    loadProviderList();
    // 搜索、排序切换、页码点击事件都绑定该方法即可
    $("#searchBtn").click(loadProviderList);
    $(".pagination .page-link").click(e => {
        e.preventDefault();
        $("#currentPage").val($(this).data("page-index"));
        loadProviderList();
    });
});

2. 修正后端代码的隐藏问题：你当前写死了分页页码为1，即使传参也不会生效，需要修改为接收的参数值：

// 原错误写法，页码固定为1
// var _providerTypes = await PaginatedList<ProviderType>.CreateAsync(providerTypes.AsNoTracking().OrderBy(x => x.Name), 1, pageSize);
// 修正后使用传入的页码
var _providerTypes = await PaginatedList<ProviderType>.CreateAsync(providerTypes.AsNoTracking().OrderBy(x => x.Name), pageIndex ?? 1, pageSize);

出现该问题的原因是你在局部视图内用了浏览器默认的同步提交表单，后端返回PartialView时，浏览器会把局部HTML直接当做整页内容渲染，而非插入到主页面的容器中，两种修复方案可选：

1. 改用AJAX提交表单，提交后手动更新列表容器：

// 用事件委托绑定提交事件，避免局部刷新后事件失效
$("#list").on("submit", ".delete-form", function(e) {
    e.preventDefault(); // 阻止默认同步提交
    $.post($(this).attr("action"), $(this).serialize(), function(partialHtml) {
        $("#list").html(partialHtml); // 把返回的局部视图替换到列表容器
    });
});

2. 前端直接删除对应行，适合小列表场景，性能更高：

$("#list").on("submit", ".delete-form", function(e) {
    e.preventDefault();
    const targetRow = $(this).closest("tr");
    $.post($(this).attr("action"), $(this).serialize(), function(res) {
        if (res.success) {
            targetRow.fadeOut(() => targetRow.remove());
            // 如需同步更新总数、页码，可补充对应逻辑
        }
    });
});

该方案后端不需要返回PartialView，直接返回JsonResult告知操作结果即可。

优先放在主页面，原因如下：

• 控件不需要跟着列表每次刷新重复渲染，减少冗余DOM操作，也不会出现局部刷新后控件绑定的事件失效的问题
• 筛选、排序、分页的控件值不会因为列表刷新丢失，不需要额外做参数回显、值保持的逻辑

如果分页控件需要和列表的总页数、当前页状态同步，可以只把分页的状态展示部分放在局部视图，或者主页面单独留分页状态容器，加载列表时同步更新即可。

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