使用 AJAX 实现 PagedListPager 的局部刷新

本文将介绍如何在使用 PagedListPager 分页控件时，避免整个页面刷新，而是通过 AJAX 技术实现局部刷新，从而提升用户体验。通过将分页列表单独提取为一个子视图，并结合 AJAX 技术，实现只刷新包含分页列表的局部区域。文章将详细介绍如何在 ASP.NET MVC 项目中配置控制器、视图，并编写相应的 JavaScript 代码来实现这一功能。

实现 AJAX 分页的步骤

为了实现 PagedListPager 的 AJAX 分页，我们需要将分页列表提取为一个单独的子视图，并在主视图中使用 AJAX 来更新这个子视图。以下是详细步骤：

1. 创建 List 视图 (子视图)

   这个视图将包含分页列表和 PagedListPager 控件。需要注意的是，为了避免样式冲突，建议将 Layout = null;，并在视图中手动引入所需的 CSS 和 JavaScript 文件。

   @model IPagedList<StudentRegSys.Models.Student>
   @{
       Layout = null;
   }
   
   @using PagedList.Mvc;
   @using PagedList;
   
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700" rel="stylesheet">
   @Styles.Render("~/template/css")
   
   <div class="container">
       <div class="row">
   
             <!-- The List Code-->
   
           <div class="pagination-control">
               @Html.PagedListPager(Model, i => Url.Action("List", "Home", new { i, search = Request.QueryString["search"] }))
           </div>
       </div>
   </div>
   @Scripts.Render("~/template/js")

   注意事项：

   • Layout = null; 避免与主视图的布局冲突。
   • 手动引入必要的 CSS 和 JavaScript 文件，确保样式和功能正常。

2. 修改 Controller

   

   皮卡智能

   AI驱动高效视觉设计平台

   下载

   我们需要创建两个 Action：

   • Index Action：用于返回包含主视图的页面。
   • List Action：用于返回包含分页列表的子视图。

   // GET: /Home/Index
   public ViewResult Index()
   {
       return View();
   }
   
   // GET: /Home/List
   public ActionResult List(int? i, string search = "")
   {
       try
       {
           var students = _context.Student.Include(s => s.Major)
               .OrderBy(s => s.Name)
               .Where(s => s.Name.Contains(search) || s.Major.Name.Contains(search) ||
               s.Address.Contains(search) || s.Phone.Contains(search))
               .ToList().ToPagedList(i ?? 1, 8);
   
           return View(students);
       }
       catch (Exception)
       {
           return HttpNotFound();
       }
   }

3. 修改 Index 视图 (主视图)

   在主视图中，使用 @Html.Action 辅助方法调用 List Action，将子视图渲染到主视图中。同时，添加 JavaScript 代码来处理分页链接的点击事件，并使用 AJAX 更新子视图。

   @{
       ViewBag.title = "Home";
   }
   
   <section id="intro">
       <!-- Some Code -->
   </section>
   
   <section id="maincontent">
   
       @Html.Action("List") <!-- to call the List view -->
   
   </section>
   
       <script>
       $(document).ready(function () {
           $(document).on("click", ".pagination-control a[href]", function () {
               $.ajax({
                   url: $(this).attr("href"),
                   type: 'GET',
                   cache: false,
                   success: function (result) {
                       $('#maincontent').html(result);
                   }
               });
               return false;
           });
       });
       </script>

   注意事项：

   • @Html.Action("List") 将 List 视图渲染到主视图中。
   • $('#maincontent').html(result); 使用 AJAX 返回的结果更新子视图的容器。确保 #maincontent 是子视图的根容器的 ID。
   • return false; 阻止默认的链接跳转行为。

总结

通过以上步骤，我们可以使用 AJAX 实现 PagedListPager 的局部刷新，避免整个页面刷新，提升用户体验。核心思想是将分页列表提取为一个单独的子视图，并在主视图中使用 AJAX 来更新这个子视图。在实际应用中，需要根据具体的项目结构和需求进行适当的调整。