• MVc分页【关于使用扩展方法实现MVc分页】


                近期对MVc自定义分页作了一下小研究下面把他记下来

    下述代1,2,3里面的代码可以直接拷贝,4以后的根据情况自己选定

    1.在后台任写如下的扩展方法(任一类库都可以,但是用时得引用命名空间)

    // 添加using System.Web;     using System.Web.Mvc; 引用,找不到可以从MVC层拷贝
    namespace System.Web.Mvc.Html  // 注意一定要把类的命名空间写成System.Web.Mvc.Html
    {
        public static class PageExtensioncs    // 一定要是静态类
        {
            // 一定要是静态方法
            public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount)
            {
    
                var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
    
                pageSize = pageSize == 0 ? 3 : pageSize;    // 显示条数设置
    
                var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
    
                var output = new StringBuilder();
    
                if (totalPages > 1)
                {
    
                    output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
    
                    if (currentPage > 1)
                    {//处理上一页的连接
    
                        output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize);
    
                    }
                    output.Append(" ");
    
                    int currint = 5;
    
                    for (int i = 0; i <= 10; i++)
                    {//一共最多显示10个页码,前面5个,后面5个
    
                        if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
                        {
    
                            if (currint == i)
                            {//当前页处理                            
    
                                output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
    
                            }
    
                            else
                            {//一般页处理
    
                                output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
    
                            }
    
                        }
    
                        output.Append(" ");
                    }
    
                    if (currentPage < totalPages)
                    {//处理下一页的链接
    
                        output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize);
    
                    }
                    output.Append(" ");
    
                    if (currentPage != totalPages)
                    {
    
                        output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
    
                    }
    
                    output.Append(" ");
    
                }
    
                output.AppendFormat("<label>第{0}页 / 共{1}页</label>", currentPage, totalPages);//这个统计加不加都行
                return new HtmlString(output.ToString());
    
            }
        }
    }

    2.添加分页信息类

    namespace SysCommon
    {
        public class PagerInfo
        {
            /// <summary>
            /// 总记录数
            /// </summary>
            public int RecordCount { get; set; }
    
            /// <summary>
            /// 当前页码
            /// </summary>
            public int CurrentPageIndex { get; set; }
    
            /// <summary>
            /// 显示条数
            /// </summary>
            public int PageSize { get; set; }
    
        }
    }

    3.添加泛型对像叠加类(这里的这种用法很值得学习

    namespace SysCommon
    {
        public class PagerQuery<TPager, TEntityList>
        {
    
            public PagerQuery(TPager pager, TEntityList entityList)
            {
    
                this.Pager = pager;
    
                this.EntityList = entityList;
    
            }
    
            public TPager Pager { get; set; }
    
            public TEntityList EntityList { get; set; }
    
        }
    }

    上述代1,2,3里面的代码可以直接拷贝

    4.在Controller中代码如下 (注意)

            public ActionResult Index(int? pageSize,int? pageIndex)
            {
                List<UserInfo> list = new List<UserInfo>();
                UserInfo u1 = new UserInfo { Uid=1,UserName="zs",TrueName="张三"};
                list.Add(u1);
                UserInfo u2 = new UserInfo { Uid = 2, UserName = "zs2", TrueName = "张三2" };
                list.Add(u2);
                UserInfo u3 = new UserInfo { Uid = 3, UserName = "zs3", TrueName = "张三3" };
                list.Add(u3);
                UserInfo u4 = new UserInfo { Uid = 4, UserName = "zs4", TrueName = "张三4" };
                list.Add(u4);
                UserInfo u5 = new UserInfo { Uid = 5, UserName = "zs5", TrueName = "张三5" };
                list.Add(u5);
                UserInfo u6 = new UserInfo { Uid = 6, UserName = "zs6", TrueName = "张三6" };
                list.Add(u6);
                UserInfo u7 = new UserInfo { Uid = 7, UserName = "zs7", TrueName = "张三7" };
                list.Add(u7);
                UserInfo u8 = new UserInfo { Uid = 8, UserName = "zs8", TrueName = "张三8" };
                list.Add(u8);
                UserInfo u9 = new UserInfo { Uid = 9, UserName = "zs9", TrueName = "张三9" };
                list.Add(u9);
                UserInfo u10 = new UserInfo { Uid = 10, UserName = "zs10", TrueName = "张三10" };
                list.Add(u10);
                UserInfo u11 = new UserInfo { Uid = 11, UserName = "zs11", TrueName = "张三11" };
                list.Add(u11);
                UserInfo u12 = new UserInfo { Uid = 12, UserName = "zs12", TrueName = "张三12" };
                list.Add(u12);
                UserInfo u13 = new UserInfo { Uid = 13, UserName = "zs13", TrueName = "张三13" };
                list.Add(u13);
                UserInfo u14 = new UserInfo { Uid = 14, UserName = "zs14", TrueName = "张三14" };
                list.Add(u14);
                UserInfo u15 = new UserInfo { Uid = 15, UserName = "zs15", TrueName = "张三15" };
                list.Add(u15);
                UserInfo u16 = new UserInfo { Uid = 16, UserName = "zs16", TrueName = "张三16" };
                list.Add(u16);
                UserInfo u17 = new UserInfo { Uid = 17, UserName = "zs17", TrueName = "张三17" };
                list.Add(u17);
                UserInfo u18 = new UserInfo { Uid = 18, UserName = "zs18", TrueName = "张三18" };
                list.Add(u18);
                UserInfo u19 = new UserInfo { Uid = 19, UserName = "zs19", TrueName = "张三19" };
                list.Add(u19);
                UserInfo u20 = new UserInfo { Uid = 20, UserName = "zs20", TrueName = "张三20" };
                list.Add(u20);
                UserInfo u21 = new UserInfo { Uid = 21, UserName = "zs21", TrueName = "张三21" };
                list.Add(u21);
                UserInfo u22 = new UserInfo { Uid = 22, UserName = "zs22", TrueName = "张三22" };
                list.Add(u22);
                UserInfo u23 = new UserInfo { Uid = 23, UserName = "zs23", TrueName = "张三23" };
                list.Add(u23);
                UserInfo u24 = new UserInfo { Uid = 24, UserName = "zs24", TrueName = "张三24" };
                list.Add(u24);
                UserInfo u25 = new UserInfo { Uid = 25, UserName = "zs25", TrueName = "张三25" };
                list.Add(u25);
                UserInfo u26 = new UserInfo { Uid = 26, UserName = "zs26", TrueName = "张三26" };
                list.Add(u26);
                PagerInfo p = new PagerInfo();
                int pageIndex1 = pageIndex ?? 1;    // 重置或获取当前页默认值
                int pageSize1 = pageSize ?? 2;      // 重置或获取显示条数
                List<UserInfo> list2 = list.Skip((pageIndex1 - 1) * pageSize1).Take(pageSize1).ToList();   // 取页面显示的数据
                p.PageSize = pageSize1;    // 设置页码
                p.RecordCount = list.Count;    // 设置总记录数
                p.CurrentPageIndex = pageIndex1; // 设置当前页码
    // 实例化合并泛型,获取数据 PagerQuery
    <PagerInfo, List<UserInfo>> pgaequery = new PagerQuery<PagerInfo, List<UserInfo>>(p, list2); return View(pgaequery); // 返回数据 }

    5.View 视图中的显示代码 重点@Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)

    @using SysModels
    @using SysCommon
    @model PagerQuery<PagerInfo,List<UserInfo>>
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @section Head{
    
    }
    <div style=" 100%;">
        <table style="margin:0 auto;">
            <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>真实姓名</th>
                    <th>Email</th>
                    <th>English</th>
                    <th>Tell</th>
                </tr>
            </thead>
            <tbody>
                @foreach (UserInfo u in Model.EntityList)
                { 
                    <tr>
                        <td>@u.Uid</td>
                        <td>@u.UserName</td>
                        <td>@u.TrueName</td>
                        <td>@u.Email</td>
                        <td>@u.EnglishName</td>
                        <td>@u.Tell</td>
                    </tr>
                }
            </tbody>
        </table>
        <div class="paginator" style=" 600px;margin:0 auto;">
            @Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
        </div>
    </div>

    6. 可以加上样式 代码如下

    <style type="text/css">
    .paginator
     {
         font: 14px Arial, Helvetica, sans-serif;
         padding: 10px 20px 10px 0;
         margin: 0px auto;
     }
     
     .paginator a
     {
         border: solid 1px #ccc;
         color: #0063dc;
         cursor: pointer;
         text-decoration: none;
     }
     
     .paginator a:visited
     {
         padding: 1px 6px;
         border: solid 1px #ddd;
         background: #fff;
         text-decoration: none;
     }
     
     .paginator .cpb
     {
         border: 1px solid #F50;
         font-weight: 700;
         color: #F50;
         background-color: #ffeee5;
     }
     
     .paginator a:hover
     {
         border: solid 1px #F50;
         color: #f60;
         text-decoration: none;
     }
     
     .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
     {
         float: left;
         height: 20px;
         line-height: 20px;
         min- 14px;
         _ 14px;
         margin-right: 5px;
         text-align: center;
         white-space: nowrap;
         font-size: 14px;
         font-family: Arial,SimSun;
         padding: 0 3px;
     }
     
     .paginator label
     {
         display:block;    
         float:left;
         margin-top:4px;    
     }
    
        </style>

    7.显示效果如下

    本文原于   *滴血* 的博客,只是根据本人自己的实例做了更详细的阐述.

    *滴血* 文章参考:http://www.cnblogs.com/ChengPuYuan/p/3715412.html 

  • 相关阅读:
    【Web】Google Chrome 浏览器调试禁用缓存
    js基础(对象)
    js基础
    css
    html
    mybatis(mapper映射文件)
    mybatis(核心配置文件的配置)
    linux三种连接方式
    spring
    mybatis(入门案例)
  • 原文地址:https://www.cnblogs.com/yingger/p/4104658.html
Copyright © 2020-2023  润新知