ASP.NET Core如何实现不刷新页面更新视图内容的分页功能

ASP.NET Core 中可以通过局部刷新的方式实现你要的效果，不需要重载整个页面，以下是两种常用的落地方法：

方案1：使用 Unobtrusive AJAX（代码改动最小） #

这是官方提供的轻量 AJAX 封装，不需要手动写大量 JS 即可实现局部更新。

• 第一步：引入依赖
  先通过 NuGet 安装 Microsoft.AspNetCore.Mvc.Unobtrusive.Ajax 包，之后在 _Layout.cshtml 中把脚本放在 jQuery 引用之后全局引入：

  <script src="~/lib/jquery-unobtrusive-ajax/jquery.unobtrusive-ajax.min.js"></script>
  

• 第二步：修改后端 Action
  区分普通页面请求和 AJAX 请求，AJAX 请求仅返回表格对应的部分视图，避免返回整页冗余内容：

  public async Task<IActionResult> Home(int page = 1)
  {
      var list = await _service.Get<List<Model.Rezervacija>>(page);
      ViewBag.Page = page;
      // 可选：传入总页数用于做页码边界判断
      ViewBag.TotalPages = await _service.GetTotalPages();
      // 判断是否为AJAX请求
      if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
      {
          return PartialView("_ViewAll", list);
      }
      return View(list);
  }
  

• 第三步：修改视图分页标签
  给上下页链接加上 AJAX 属性，指定请求成功后要替换的 DOM 节点：

  <div id="view-all">
    @await Html.PartialAsync("_ViewAll", Model, null)
  </div>
  <div id="pagination">
    <a asp-action="Home" asp-route-page="@(ViewBag.Page - 1)" 
       data-ajax="true" 
       data-ajax-mode="replace" 
       data-ajax-update="#view-all"
       class="@(ViewBag.Page <=1 ? "disabled" : "")">上一页</a>
    <a asp-action="Home" asp-route-page="@(ViewBag.Page + 1)" 
       data-ajax="true" 
       data-ajax-mode="replace" 
       data-ajax-update="#view-all"
       class="@(ViewBag.Page >= ViewBag.TotalPages ? "disabled" : "")">下一页</a>
  </div>
  

方案2：手动写 AJAX 请求（灵活度更高，适合后续加排序、搜索功能） #

如果后续还要扩展搜索、排序等交互，自己写 JS 请求可控性更强：

• 后端 Action 修改逻辑和方案1一致，区分 AJAX 请求返回部分视图即可。
• 视图中给分页按钮加点击事件，阻止默认跳转，手动发起请求更新内容：

  <div id="view-all">
    @await Html.PartialAsync("_ViewAll", Model, null)
  </div>
  <a href="#" class="page-btn" data-page="@(ViewBag.Page -1)">上一页</a>
  <a href="#" class="page-btn" data-page="@(ViewBag.Page +1)">下一页</a>
  
  @section Scripts{
  <script>
  $(function(){
    $(".page-btn").click(function(e){
      e.preventDefault();
      const targetPage = $(this).data("page");
      // 页码边界判断
      if(targetPage <1 || targetPage > @(ViewBag.TotalPages ?? 999)) return;
      $.get("/Home?page="+targetPage, function(res){
        // 替换表格内容
        $("#view-all").html(res);
        // 更新分页按钮的目标页码
        $(".page-btn").eq(0).data("page", targetPage-1);
        $(".page-btn").eq(1).data("page", targetPage+1);
      })
    })
  })
  </script>
  }
  

后续要加搜索、排序功能时，只需要把搜索关键词、排序字段作为参数一起传到后端 Action，查询数据后返回新的部分视图替换即可，整体逻辑不需要大改。

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