在C# MVC 5项目中实现Bootstrap模态框内的分页功能

我来给你一步步实现这个模态框+分页表格的需求，刚好你用的EF6、Bootstrap3、X.PagedList这些技术栈我都熟，咱们这么弄：

1. 完善主视图的模态框结构（Contact.cshtml） #

首先把模态框的完整框架补全，包含筛选文本框和用来承载分页表格的容器，这样后续可以通过AJAX动态更新表格内容：

<div class="row">
    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <button class="btn btn-info btn-block" data-toggle="modal" data-target="#callerModal">打开呼叫者列表</button>
    </div>
</div>

<!-- 呼叫者模态框 -->
<div class="modal fade" id="callerModal" tabindex="-1" role="dialog" aria-labelledby="callerModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="callerModalLabel">呼叫者列表</h4>
            </div>
            <div class="modal-body">
                <!-- 姓名筛选文本框 -->
                <div class="form-group mb-3">
                    <label for="searchName">姓名搜索</label>
                    <input type="text" id="searchName" class="form-control" placeholder="输入姓名关键词...">
                </div>
                <!-- 动态更新的表格容器 -->
                <div id="callerTableContainer">
                    @* 这里初始化加载第一页数据的分部视图 *@
                    @Html.Partial("_CallerTablePartial", Model.Callers)
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

2. 创建分页表格的分部视图（_CallerTablePartial.cshtml） #

把表格和X.PagedList的分页控件单独抽成分部视图，这样分页切换时只需要更新这个部分就行：

@using X.PagedList.Mvc;
@model IPagedList<YourProject.Models.Caller>

<!-- 呼叫者数据表格 -->
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>联系电话</th>
            <th>邮箱地址</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var caller in Model)
        {
            <tr>
                <td>@caller.Id</td>
                <td>@caller.Name</td>
                <td>@caller.Phone</td>
                <td>@caller.Email</td>
            </tr>
        }
    </tbody>
</table>

<!-- X.PagedList分页控件，注意传递筛选参数 -->
<div id="callerPager" class="text-center">
    @Html.PagedListPager(Model, page => Url.Action("GetCallersPartial", "Contact", new { page, searchName = ViewBag.SearchName }),
        PagedListRenderOptions.ClassicPlusFirstAndLast)
</div>

3. 控制器添加分页和筛选接口（ContactController.cs） #

需要两个方法：一个返回主视图初始化数据，另一个返回分部视图处理分页和筛选请求：

using System.Linq;
using System.Web.Mvc;
using X.PagedList;
using YourProject.Models;

public class ContactController : Controller
{
    private readonly YourDbContext _dbContext = new YourDbContext();

    // 主视图初始化
    public ActionResult Contact()
    {
        // 初始化加载第一页，每页10条数据
        var initialCallers = _dbContext.Callers.OrderBy(c => c.Name).ToPagedList(1, 10);
        var viewModel = new ContactViewModel
        {
            Callers = initialCallers
        };
        return View(viewModel);
    }

    // 返回分页表格的分部视图，支持筛选
    public ActionResult GetCallersPartial(int page = 1, string searchName = "")
    {
        var query = _dbContext.Callers.AsQueryable();

        // 处理姓名筛选逻辑
        if (!string.IsNullOrWhiteSpace(searchName))
        {
            query = query.Where(c => c.Name.Contains(searchName));
        }

        // 分页处理，每页10条
        var pagedCallers = query.OrderBy(c => c.Name).ToPagedList(page, 10);
        ViewBag.SearchName = searchName; // 把筛选参数传递给分页控件，保持分页时筛选状态
        return PartialView("_CallerTablePartial", pagedCallers);
    }

    // 释放数据库上下文
    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            _dbContext.Dispose();
        }
        base.Dispose(disposing);
    }
}

别忘了创建对应的ViewModel：

public class ContactViewModel
{
    public IPagedList<Caller> Callers { get; set; }
    // 可以添加其他需要的视图属性
}

4. 编写JavaScript实现无刷新分页和筛选 #

在Contact.cshtml的底部添加JS代码，处理分页链接点击和筛选文本框的搜索事件，用AJAX动态更新表格：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    // 处理分页链接点击（用事件委托，因为分页控件是动态加载的）
    $('#callerModal').on('click', '#callerPager a', function(e) {
        e.preventDefault();
        const targetUrl = $(this).attr('href');
        loadCallerTable(targetUrl);
    });

    // 处理筛选文本框的回车搜索
    $('#searchName').on('keyup', function(e) {
        if (e.keyCode === 13) {
            const searchVal = $(this).val().trim();
            // 构建请求URL，重置页码为1
            const targetUrl = '@Url.Action("GetCallersPartial", "Contact")?page=1&searchName=' + encodeURIComponent(searchVal);
            loadCallerTable(targetUrl);
        }
    });

    // 封装AJAX加载表格的通用方法
    function loadCallerTable(url) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                $('#callerTableContainer').html(response);
            },
            error: function(xhr) {
                alert('加载呼叫者列表失败：' + xhr.responseText);
            }
        });
    }
});
</script>

几个关键注意点 #

• 事件委托：因为分页控件是动态渲染的，直接绑定点击事件会失效，所以要用$('#callerModal').on('click', '#callerPager a', ...)这种事件委托方式。
• 筛选参数传递：分页时要把当前的筛选参数一起传递，这样切换页面时筛选状态不会丢失。
• 页码重置：筛选时要把页码重置为1，避免出现没有数据的页码。

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