部分视图中的分页列表答案

【问题标题】：Pagedlist in partialview部分视图中的分页列表
【发布时间】：2020-09-17 22:01:39
【问题描述】：

我将 PagedList 移至 PartialView，因为我在我的页面中使用了价格过滤器，并且当单击第 2 页时，页面中的元素数量是正确的，但所有页面都已刷新，我只想刷新我的部分视图内容。怎么能这样？

局部视图

@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 }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "GET", UpdateTargetId = "tableContainer" }))
</div>

使用javascript调用部分主视图

 function GetData(minPrice, maxPrice) {
             $.ajax({
                 url: '@Url.Action("FilterProducts", "Home")',
                 data: {
                     minPrice: minPrice,
                     maxPrice: maxPrice,
                     Category: '@Model.Category',
                     Search: '@Model.Search'
                 }
             })
             .done(function (result) {
                  $('#tableContainer').html(result);
             })
             .fail(function (XMLHttpRequest, textStatus, errorThrown)
            {
                alert("FAIL");
            });
        }

<div class="col-md-11" id="tableContainer">
            @{
                var filterProdViewModel = new FilterProductsViewModel();
                filterProdViewModel.Products = Model.Products;
                Html.RenderPartial("FilterProducts", filterProdViewModel);
             }
</div>

控制器

 public ActionResult Index(string Search, int? page, int? pageSize, int? maxPrice, int? minPrice, string Category = null)
        {

            IPagedList<Product> products;
            List<ProductCategory> prodCat = productCategories.Collection().ToList();
            if (Category == "")
                Category = null;
            int pagesize = (pageSize ?? 5);
            ViewBag.psize = pagesize;
            ViewBag.Min = prodScont.GetMinPrice();
            ViewBag.Max = prodScont.GetMaxPrice();

            products = prodScont.SearchProducts(minPrice, maxPrice, Category, Search).ToPagedList(page ?? 1, pagesize);

            ProductListViewModel model = new ProductListViewModel();
            model.Products = products;
            model.ProductCategories = prodCat;
            model.Category = Category;
            model.Search = Search;
            model.Page = page;
            return View(model);
        }

        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;

            products = prodScont.SearchProducts(minPrice, maxPrice, Category, Search).ToPagedList(page ?? 1, pagesize);

            model.Products = products;
            return PartialView(model);
        }

【问题讨论】：

这能回答你的问题吗？ Ajax Pagination in PagedList.MVC using partial Page
@Html.PagedListPager(Model.Products, page => Url.Action("FilterProducts", new { page, pageSize = ViewBag.psize }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "GET", UpdateTargetId = "tableContainer" })) 我在上面的代码中尝试过，但结果是一样的
当我重定向到 PagedListPager 中的主页时，我的视图一切正常，但是当我更改页面时，什么都没有发生，当我重定向到部分视图页面分页工作但刷新所有页面并仅可视化部分视图时跨度>

标签： jquery asp.net ajax model-view-controller

【解决方案1】：

我发现了问题，我必须将 pagenumber 和 pagesize 参数放入 viewmodel 并将其发送到我的 javascript 中的 partialview 以解决问题

function GetData(minPrice, maxPrice) {
             $.ajax({
                 url: '@Url.Action("FilterProducts", "Home")',
                 data: {
                     page: '@Model.Page',
                     pagesize: '@Model.PageSize',
                     minPrice: minPrice,
                     maxPrice: maxPrice,
                     Category: '@Model.Category',
                     Search: '@Model.Search'
                 }
             })
             .done(function (result) {
                  $('#tableContainer').html(result);
             })
             .fail(function (XMLHttpRequest, textStatus, errorThrown)
            {
                alert("FAIL");
            });
        }
    ```

【讨论】：