asp.net 文章分页显示实现代码

下面是关于实现asp.net文章分页显示的攻略和示例：

1. 确定分页参数

文章分页需要确定几个重要的参数：

• 每页显示的文章数量
• 当前页码
• 文章总数
• 总页数

可以根据以上参数进行分页计算，具体代码可以参考下面的示例。

2. 实现后端分页方法

接下来需要在代码中实现后端分页方法，下面是一个简单的示例：

// 分页方法
public List<Article> GetArticles(int pageIndex, int pageSize)
{
    // 从数据库中获取所有文章
    List<Article> allArticles = db.Articles.ToList();

    // 计算文章总数
    int totalNum = allArticles.Count;

    // 计算总页数
    int totalPage = (totalNum + pageSize - 1) / pageSize;

    // 获取当前页的文章列表
    List<Article> pageList = allArticles.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();

    return pageList;
}

其中，需要根据参数计算总页数总文章数，并使用Skip()和Take()方法实现分页查询。

3. 实现前端分页

在前端页面中，需要根据后台传递的参数实现分页显示。

下面是一个基础的HTML和JavaScript实现分页的示例：

<div class="pager">
    <ul id="pagerList">
        <li><a href="javascript:void(0)">上一页</a></li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><span>...</span></li>
        <li><a href="javascript:void(0)">10</a></li>
        <li><a href="javascript:void(0)">下一页</a></li>
    </ul>
</div>

<script type="text/javascript">
    // 定义分页参数
    var pageIndex = 1;
    var pageSize = 10;
    var totalNum = 100;
    var totalPage = Math.ceil(totalNum / pageSize);

    // 处理上一页事件
    $("#pagerList li:first-child").click(function() {
        if (pageIndex == 1) {
            return;
        }
        pageIndex--;
        RefreshPager(pageIndex, pageSize, totalNum, totalPage);
    });

    // 处理下一页事件
    $("#pagerList li:last-child").click(function() {
        if (pageIndex == totalPage) {
            return;
        }
        pageIndex++;
        RefreshPager(pageIndex, pageSize, totalNum, totalPage);
    });

    // 处理数字分页按钮事件
    $("#pagerList li:not(:first-child,:last-child)").click(function() {
        pageIndex = parseInt($(this).text());
        RefreshPager(pageIndex, pageSize, totalNum, totalPage);
    });

    // 刷新分页
    function RefreshPager(pageIndex, pageSize, totalNum, totalPage) {
        // 获取数据
        $.ajax({
            type: "GET",
            url: "GetArticles.ashx?pageIndex=" + pageIndex + "&pageSize=" + pageSize,
            success: function(data) {
                // 更新文章内容
                $("#articleList").html(data);

                // 更新分页按钮
                var pagerHtml = "";
                if (pageIndex > 1) {
                    pagerHtml = '<li><a href="javascript:void(0)">上一页</a></li>';
                }
                if (totalPage <= 10) {
                    for (var i = 1; i <= totalPage; i++) {
                        if (i == pageIndex) {
                            pagerHtml += '<li class="active"><a href="javascript:void(0)">' + i + '</a></li>';
                        } else {
                            pagerHtml += '<li><a href="javascript:void(0)">' + i + '</a></li>';
                        }
                    }
                } else {
                    if (pageIndex <= 5) {
                        for (var i = 1; i <= 7; i++) {
                            if (i == pageIndex) {
                                pagerHtml += '<li class="active"><a href="javascript:void(0)">' + i + '</a></li>';
                            } else {
                                pagerHtml += '<li><a href="javascript:void(0)">' + i + '</a></li>';
                            }
                        }
                        pagerHtml += '<li><span>...</span></li>';
                    } else if (pageIndex > 5 + 2) {
                        pagerHtml += '<li><span>...</span></li>';
                        for (var i = pageIndex - 3; i <= pageIndex + 3; i++) {
                            if (i == pageIndex) {
                                pagerHtml += '<li class="active"><a href="javascript:void(0)">' + i + '</a></li>';
                            } else {
                                pagerHtml += '<li><a href="javascript:void(0)">' + i + '</a></li>';
                            }
                        }
                        if (pageIndex + 3 < totalPage) {
                            pagerHtml += '<li><span>...</span></li>';
                        }
                    } else {
                        pagerHtml += '<li><span>...</span></li>';
                        for (var i = totalPage - 6; i <= totalPage; i++) {
                            if (i == pageIndex) {
                                pagerHtml += '<li class="active"><a href="javascript:void(0)">' + i + '</a></li>';
                            } else {
                                pagerHtml += '<li><a href="javascript:void(0)">' + i + '</a></li>';
                            }
                        }
                    }
                }
                if (pageIndex < totalPage) {
                    pagerHtml += '<li><a href="javascript:void(0)">下一页</a></li>';
                }
                $("#pagerList").html(pagerHtml);
            },
            error: function() {
                console.log("Failed to get articles.");
            }
        });
    }
</script>

在这个示例中，使用jQuery的ajax方法实现异步加载文章列表，并根据总页数生成动态的分页按钮。

4. 总结

通过以上的方法，可以实现asp.net的文章分页显示。在实现过程中需要注意分页参数的计算，以及前端的分页按钮生成方法。