ASP.Net MVC（EF6）分页：如何用JavaScript添加分页链接？

我明白你的问题——在Ajax里混写Razor代码确实行不通，因为Razor是服务器端编译执行的，当你发起Ajax请求时，页面已经被发送到客户端了，Razor代码没法在浏览器里解析运行。咱们换个思路，后端返回分页所需的元数据，前端用JS动态生成分页链接就好，我给你一步步拆解：

首先你需要一个通用的分页结果模型，用来封装数据和分页信息：

public class PagedResult<T>
{
    public List<T> Data { get; set; }
    public int TotalCount { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
}

然后在控制器的Action里，不仅要返回当前页的数据，还要计算总记录数，把这些信息一起返回：

public ActionResult GetData(int pageIndex = 1, int pageSize = 10)
{
    using (var db = new YourDbContext())
    {
        var totalCount = db.YourEntities.Count();
        var data = db.YourEntities
                     .Skip((pageIndex - 1) * pageSize)
                     .Take(pageSize)
                     .ToList();
        
        var result = new PagedResult<YourEntity>
        {
            Data = data,
            TotalCount = totalCount,
            PageIndex = pageIndex,
            PageSize = pageSize
        };
        
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

在页面里准备好数据容器和分页容器：

<div id="dataContainer"></div>
<div id="paginationContainer"></div>

先写一个渲染数据的函数，再写一个生成分页链接的函数，然后通过Ajax请求数据并触发渲染：

// 渲染数据列表
function renderData(data) {
    var html = '';
    data.forEach(item => {
        // 根据你的实体属性拼接HTML，比如：
        html += `<div>${item.Name} - ${item.Description}</div>`;
    });
    document.getElementById('dataContainer').innerHTML = html;
}

// 生成分页链接
function renderPagination(totalCount, currentPage, pageSize) {
    var totalPages = Math.ceil(totalCount / pageSize);
    var paginationHtml = '';
    
    // 上一页按钮
    paginationHtml += `<button class="page-btn" ${currentPage === 1 ? 'disabled' : ''} data-page="${currentPage - 1}">上一页</button>`;
    
    // 页码按钮
    for (var i = 1; i <= totalPages; i++) {
        paginationHtml += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
    }
    
    // 下一页按钮
    paginationHtml += `<button class="page-btn" ${currentPage === totalPages ? 'disabled' : ''} data-page="${currentPage + 1}">下一页</button>`;
    
    document.getElementById('paginationContainer').innerHTML = paginationHtml;
    
    // 绑定分页按钮的点击事件
    document.querySelectorAll('.page-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (!this.disabled) {
                var page = parseInt(this.getAttribute('data-page'));
                loadData(page);
            }
        });
    });
}

// 加载数据的Ajax函数
function loadData(pageIndex = 1) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', `/YourController/GetData?pageIndex=${pageIndex}&pageSize=10`, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var result = JSON.parse(xhr.responseText);
            renderData(result.Data);
            renderPagination(result.TotalCount, result.PageIndex, result.PageSize);
        }
    };
    xhr.send();
}

// 页面加载时默认加载第一页
window.onload = function() {
    loadData(1);
};

• 你可以给分页按钮加一些CSS样式，提升用户体验：

.page-btn {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}
.page-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

• 如果总记录数为0，可以在分页容器里显示“暂无数据”，避免空页面；
• 如果项目里用了jQuery，Ajax部分可以简化，但上面的原生JS写法不依赖任何库，通用性更强。

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