如何实现PagedList分页仅刷新PartialView而非整页？

数据老陈

2026-5-7

解决PagedList分页时整页刷新而非仅PartialView更新的问题

嘿，我看你已经把分页逻辑抽离到PartialView里了，现在遇到分页点击时整页刷新的问题对吧？这主要是因为分页链接没带上筛选参数，而且Unobtrusive Ajax的配置和你的筛选逻辑没完全匹配上，咱们一步步来调整：

问题根源

你当前的Html.PagedListPager生成的分页链接只传递了page和pageSize，漏掉了价格区间、分类、搜索词这些关键筛选参数。点击分页时这些条件丢失，不仅会导致数据回到初始状态，还会因为参数不全触发整页跳转，而非Ajax局部更新。

具体修改步骤

1. 更新PartialView的分页链接，带上所有筛选参数

修改Html.PagedListPager的参数生成逻辑，把筛选时用到的minPrice、maxPrice、Category、Search都加到分页链接里，这样点击分页时才能保留当前筛选条件：

@section Scripts{ <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> }
<div class="col-md-12">
Page: @(Model.Products.PageCount < Model.Products.PageNumber ? 0 : Model.Products.PageNumber)/@Model.Products.PageCount
@Html.PagedListPager(Model.Products, page => Url.Action("FilterProducts", new { 
    page, 
    pageSize = ViewBag.psize,
    minPrice = Model.MinPrice,
    maxPrice = Model.MaxPrice,
    Category = Model.Category,
    Search = Model.Search
}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { 
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "GET", 
    UpdateTargetId = "tableContainer" 
}))
</div>

2. 完善FilterProductsViewModel，新增筛选字段

你的ViewModel目前只包含分页数据，需要把筛选相关字段加进去，这样PartialView才能获取到这些参数：

public class FilterProductsViewModel
{
    public IPagedList<Product> Products { get; set; }
    public string Category { get; set; }
    public string Search { get; set; }
    public int? MinPrice { get; set; }
    public int? MaxPrice { get; set; }
}

3. 更新FilterProducts控制器方法，传递筛选参数到ViewModel

在返回PartialView前，把接收到的筛选参数赋值给ViewModel，确保分页链接能拿到正确的参数：

public ActionResult FilterProducts(int? page, int? pageSize, int? maxPrice, int? minPrice, string Category = null, string Search = null) {
    FilterProductsViewModel model = new FilterProductsViewModel();
    IPagedList<Product> products;
    if (Category == "") Category = null;
    int pagesize = (pageSize ?? 5);
    ViewBag.psize = pagesize;

    // 传递筛选参数到ViewModel
    model.Category = Category;
    model.Search = Search;
    model.MinPrice = minPrice;
    model.MaxPrice = maxPrice;

    products = prodScont.SearchProducts(minPrice, maxPrice, Category, Search).ToPagedList(page ?? 1, pagesize);
    model.Products = products;
    return PartialView(model);
}

4. 修正主视图的GetData函数，动态获取筛选参数

原来的GetData里Category和Search是硬编码的初始值，筛选后不会更新，要改成从页面动态读取（比如隐藏域或输入框）：

function GetData(minPrice, maxPrice) {
    // 从页面元素获取当前的分类和搜索词
    var category = $('#currentCategory').val(); // 假设你用隐藏域存储当前分类
    var search = $('#searchInput').val(); // 从搜索框读取当前搜索词
    $.ajax({
        url: '@Url.Action("FilterProducts", "Home")',
        data: { 
            minPrice: minPrice, 
            maxPrice: maxPrice, 
            Category: category, 
            Search: search,
            pageSize: '@ViewBag.psize'
        }
    })
    .done(function (result) {
        $('#tableContainer').html(result);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("FAIL");
    });
}

5. 确保Unobtrusive Ajax脚本正确加载

检查主视图是否包含@RenderSection("Scripts", required: false)，如果没有，PartialView里的脚本不会被渲染。可以把脚本移到主视图的Scripts区域，或者在主视图添加这个渲染语句。

验证效果

修改完成后，当你进行价格筛选，再点击分页按钮时，Unobtrusive Ajax会自动发送带全量参数的GET请求到FilterProducts方法，返回的PartialView会替换掉tableContainer里的内容，实现局部刷新而不整页跳转。

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