.net core 创建分页局部页Partial

 0 0条评论

由于在项目中,会使用到分页的,所有需要使用分页的列表,基本都是一个样式,具体生成的数字,只需要传入当前页,一共多少页,即可计算而成,如下图所示,本来是使用Component的,不过发现这个有点大材小用的,本身不涉及数据库处理,仅仅是一个简单的数字计算,所以用Partial页面最合适了。

在views->shared 创建 _PagePartial视图


输入代码如下,以下逻辑代码并非最优化,大家可以自己适当调整,用的是 bootstrap的分页组件。

    @{
        int allpage = Model.allpage;//这里的mode是使用此局部页的页面传来的值
        int nowpage = Model.nowpage;
        int previous = nowpage - 1;
        if (previous <= 0) previous = 1;
    int next = nowpage + 1;
    int showCount = 4; // 只显示5个数字分页链接
    bool isShowFirstLast = (allpage > 10);//只有总数大于10页,才显示首页末页
    bool isShowPrevious = (nowpage > (showCount / 2 + 1));
    bool isShowNext = (nowpage < (allpage - showCount / 2));
    //以下设置for循环的头尾位置。
    int beginNum = nowpage - showCount / 2;
    if (beginNum <= 0) beginNum = 1;
    int endNum = nowpage + showCount / 2;
    if (endNum >= allpage) endNum = allpage;
    }
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-sm justify-content-center">
            @if (isShowFirstLast)
            {
                <li class="page-item">
                    <a class="page-link link-dark" href="./">首页</a>
                </li>
            }
            @if (isShowPrevious)
            {
                <li class="page-item">
                    <a class="page-link link-dark" href="@previous" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
            }
            @for (int i = beginNum; i <= endNum; i++)
            {
                <li class="page-item @(i==nowpage?"active":"")">
                    <a class="page-link link-dark" href="@i">@i</a>
                </li>
            }
            @if (isShowNext)
            {
                <li class="page-item">
                    <a class="page-link link-dark" href="@next" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            }
            @if (isShowFirstLast)
            {
                <li class="page-item">
                    <a class="page-link link-dark" href="@allpage">末页</a>
                </li>
            }
        </ul>
    </nav>

在需要使用此分页的view页面,写入

    @await Html.PartialAsync("_PagePartial",         new { allpage = Model.AllPage, nowpage = ViewBag.NowPage })

即可。

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客