ASP.NET MVC中PagedListPager的AJAX无刷新分页实现

using PagedList; // 确保已安装PagedList NuGet包
using System.Linq;
using System.Web.Mvc;
using System.Data.Entity; // 如果使用Entity Framework

// 假设你的数据模型和上下文
// public class Student { public int Id; public string Name; public Major Major; public string Address; public string Phone; }
// public class Major { public int Id; public string Name; }
// public class ApplicationDbContext : DbContext { public DbSet<Student> Student; public DbSet<Major> Major; }

public class HomeController : Controller
{
    private readonly ApplicationDbContext _context = new ApplicationDbContext(); // 你的数据库上下文

    // GET: /Home/Index - 渲染主页面
    public ActionResult Index()
    {
        return View();
    }

    // GET: /Home/List - 获取并返回分页数据列表的局部视图
    // i: 当前页码
    // search: 搜索关键字
    public ActionResult List(int? i, string search = "")
    {
        try
        {
            // 示例：从数据库获取学生数据并进行分页和搜索
            var students = _context.Student.Include(s => s.Major) // 包含关联的Major信息
                .OrderBy(s => s.Name) // 按姓名排序
                .Where(s => string.IsNullOrEmpty(search) || // 如果搜索关键字为空，则不过滤
                            s.Name.Contains(search) ||
                            s.Major.Name.Contains(search) ||
                            s.Address.Contains(search) ||
                            s.Phone.Contains(search))
                .ToList()
                .ToPagedList(i ?? 1, 8); // 每页显示8条记录，如果页码为空则默认为第一页

            return PartialView("_StudentListPartial", students); // 返回局部视图
        }
        catch (Exception)
        {
            // 实际应用中应记录错误并返回更友好的错误信息
            return HttpNotFound();
        }
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            _context.Dispose();
        }
        base.Dispose(disposing);
    }
}

@model PagedList.IPagedList<StudentRegSys.Models.Student>
@{
    // 局部视图不应继承主布局，设置为null
    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">
        <!-- 你的数据列表代码 -->
        <table class="table table-bordered table-striped" id="kyc-history">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>专业</th>
                    <th>地址</th>
                    <th>电话</th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null && Model.Any())
                {
                    foreach (var student in Model)
                    {
                        <tr>
                            <td>@student.Id</td>
                            <td>@student.Name</td>
                            <td>@student.Major.Name</td>
                            <td>@student.Address</td>
                            <td>@student.Phone</td>
                        </tr>
                    }
                }
                else
                {
                    <tr><td colspan="5">没有找到学生信息。</td></tr>
                }
            </tbody>
        </table>

        <!-- 分页控件容器 -->
        <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") *@ <!-- 示例中的脚本渲染，请根据实际项目配置 -->

@{
    ViewBag.Title = "学生列表主页";
}

<section id="intro">
    <h2>学生信息管理</h2>
    <p>通过AJAX实现无刷新分页的学生列表。</p>
</section>

<!-- 
    此处的div或section将作为AJAX更新的目标容器。
    它的id（例如'maincontent'）必须与JavaScript中的选择器匹配。
-->
<section id="maincontent">
    @Html.Action("List") <!-- 初次加载时渲染局部视图 -->
</section>

@section scripts {
    <script>
        $(document).ready(function () {
            // 使用事件委托，因为分页链接可能是动态加载的
            $(document).on("click", ".pagination-control a[href]", function (e) {
                e.preventDefault(); // 阻止默认的链接跳转行为

                var url = $(this).attr("href"); // 获取点击链接的URL

                $.ajax({
                    url: url,
                    type: 'GET',
                    cache: false, // 禁用缓存，确保每次都从服务器获取最新数据
                    beforeSend: function() {
                        // 可选：显示加载指示器
                        $('#maincontent').html('<div class="loading-indicator">加载中...</div>');
                    },
                    success: function (result) {
                        // 将返回的HTML内容更新到指定容器中
                        $('#maincontent').html(result);
                    },
                    error: function (xhr, status, error) {
                        // 错误处理
                        console.error("AJAX请求失败:", status, error);
                        $('#maincontent').html('<div class="error-message">加载数据失败，请稍后再试。</div>');
                    }
                });
                // return false; // 也可以使用 return false; 来阻止默认行为，但 e.preventDefault() 更推荐
            });
        });
    </script>
}