您的位置: 首页 > IT文章 > 自己动手写 ASP.NET MVC 分页 part1

自己动手写 ASP.NET MVC 分页 part1

分类: IT文章 • 2023-12-06 08:52:01

学习编程也有一年半载了，从来没有自己动手写过东西，都是利用搜索软件找代码，最近偶发感慨，难道真的继续做码农？？？

突发奇想是不是该自己动手写点东西，可是算法、逻辑思维都太弱了，只能copy网上的代码，所有就从简单的写起，以后会不定期的推出！

下面是我本周业余时间写的 ASP.NET 分页，以不同的方式去实现最终的结果，先给大家看效果图

1、这是最满意的一个分页功能（看图片是不是特别像博客园首页的分页），并且是异步实现：

自己动手写 ASP.NET MVC 分页 part1

2、这个是最开始写的一个分页，按钮用的是button (见笑了)：

自己动手写 ASP.NET MVC 分页 part1

3、这个是1的前身，从它修改过去的

自己动手写 ASP.NET MVC 分页 part1

好了效果看完了，得贴代码了(这里声明个事情：我用的是伪数据，如果想直接使用到项目中还的做少量的修改)

如果您发现有不合理的地方希望不腻赐教，小弟先在这里谢过您了！

首先把第一个分页效果的代码贴出来(2,3和1共享的代码我将会标注：1.2.3 共享<共享的代码后面的2.3我就不贴了>)

好了，屁话不说了，文笔不好(语文体育老师教的)，将就着看吧！

1.2.3 共享定义一个分页类对象 HTMLPager

    /// <summary>
    /// 分页类的属性
    /// </summary>
    public class htmlPager
    {
        public int pageIndex { get; set; }//当前页
        public int countTotal { get; set; }//总条数
        public int pageBack {//上一页
            get {
                if (pageIndex==0)
                {
                    pageIndex = 0;
                }
                else
                {
                    pageIndex -= 1;
                }

                return pageIndex;
            }
        }
        public int pageNext {//下一页
            get 
            {
                if (pageIndex == pageCount)
                {
                    pageIndex = pageCount;
                }
                else
                {
                    pageIndex += 1;
                }
                return pageIndex;
            }
        }
        public int pageSize//当前页第三条
        { 
            get { 
                return 10; 
            } 
        }
        public int pageCount//总页数
        {
            get {
                return (int)Math.Ceiling(countTotal / (double)pageSize);
            }
        }
        /// <summary>
        /// 分页类的属性
        /// </summary>
        /// <param name="pageIndex">当前页</param>
        /// <param name="countTotal">总条数</param>
        public htmlPager(int pageIndex, int countTotal)
        {
            this.pageIndex = pageIndex;
            this.countTotal = countTotal;
        }       
    }

1.2.3 共享数据类

1  public class UserInfo
2     {
3         public string userName { get; set; }
4         public int userAge { get; set; }
5         public string userSex { get; set; }
6         public double userHeight { get; set; }
7         public double userWeight { get; set; }        
8     }

数据对象类

 public class getUserInfo 
    {
        private static List<UserInfo> listUserInfo = new List<UserInfo>();

        public static List<UserInfo> getInfo()
        {
            UserInfo ui1 = new UserInfo { userName = "小明", userAge = 21, userSex = "男", userHeight = 170, userWeight = 64 };
            UserInfo ui2 = new UserInfo { userName = "张三", userAge = 23, userSex = "男", userHeight = 170, userWeight = 64 };
            UserInfo ui3 = new UserInfo { userName = "美霖", userAge = 23, userSex = "女", userHeight = 170, userWeight = 64 };
            UserInfo ui4 = new UserInfo { userName = "姜夏", userAge = 25, userSex = "男", userHeight = 170, userWeight = 64 };
            UserInfo ui5 = new UserInfo { userName = "知鸟", userAge = 22, userSex = "男", userHeight = 170, userWeight = 64 };
            UserInfo ui6 = new UserInfo { userName = "知鸟分页", userAge = 25, userSex = "女", userHeight = 170, userWeight = 64 };
            UserInfo ui7 = new UserInfo { userName = "分页", userAge = 25, userSex = "男", userHeight = 170, userWeight = 64 };

            for (int i = 0; i <2; i++)
            {
                listUserInfo.Add(ui1);
                listUserInfo.Add(ui2);
                listUserInfo.Add(ui3);
                listUserInfo.Add(ui4);
                listUserInfo.Add(ui5);
                listUserInfo.Add(ui6);
                listUserInfo.Add(ui7);
            }
            return listUserInfo;
        }
    }

数据类

1. 独有 action方法

 public ActionResult pagehtml(int indexpage = 1) //主要是1的视图
        {
            return View();
        }

下面给出视图 pagehtml.cshtml 中的代码

1.2.3 共享 html代码

<html>
  <head>
      <title> 实现分页功能 </title>
  <style type="text/css">
  body  {
	      font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;   60%;padding-left: 25px;
     }
 DIV.digg {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
	BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid;  PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
.current {
	BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #FAFAFA; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000000; 
}
  </style>
</head>  
 
 <body> 
   <div>
      <table >
      </table>  
   </div>
   <div > 
   </div>
   <input type="hidden" /> <!--存储当前页的值-->
</body>
</html>

1. 独有 js代码

<script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
 <script type="text/javascript">
     window.onload = function () {   
              $.ajax({
                  url: '/Home/pagehtmldata/',
                  type: 'post',
                  data: { indexpage: $("#hiddenPage").val() },
                  success: function (data) {                      
                      var str = data.split('|-|-|');
                      $("#testtable").html(str[0]);
                      $("#pageChangeID").html(str[1]);
                  }
              });
          }
          function ChangePage(thisvalue) {
              var currentvalue = $(thisvalue).text();
              var hiddenPage = $("#hiddenPage").val();
              if (hiddenPage != currentvalue) {//判断点击的是否是上次的那一页
                  $("#hiddenPage").val(currentvalue);
                  $(thisvalue).addClass('current');
                  $.ajax({
                      url: '/Home/pagehtmldata/',
                      type: 'post',
                      data: { indexpage: $(thisvalue).text() },
                      success: function (data) {
                          var str = data.split('|-|-|');
                          $("#testtable").html(str[0]);
                          $("#pageChangeID").html(str[1]);
                      }
                  });
              }             
          }
          function PrePage(thisvalue) {
              var prePage=$("#hiddenPage").val()-1;
              $("#hiddenPage").val(prePage);
              $.ajax({
                  url: '/Home/pagehtmldata/',
                  type: 'post',
                  data: { indexpage: prePage },
                  success: function (data) {
                      var str = data.split('|-|-|');
                      $("#testtable").html(str[0]);
                      $("#pageChangeID").html(str[1]);
                  }
              });
          }
          function NextPage(thisvalue) {
              var nextPage =parseInt($("#hiddenPage").val()) + 1;
              $("#hiddenPage").val(nextPage);
              $.ajax({
                  url: '/Home/pagehtmldata/',
                  type: 'post',
                  data: { indexpage: nextPage },
                  success: function (data) {
                      var str = data.split('|-|-|');
                      $("#testtable").html(str[0]);
                      $("#pageChangeID").html(str[1]);
                  }
              });
          }
 </script>

1. 独有下面给出视图中js调用的的action 方法：pagehtmldata

        [HttpPost]
        public JsonResult pagehtmldata(int indexpage = 1) 
        {
            string HTMLpage = "<thead><tr><th>序号</th><th>用户名</th><th>年龄</th> <th>性别</th><th>身高</th><th>体重</th></tr></thead> <tbody>";
            List<UserInfo> userInfo = getUserInfo.getInfo();//数据来源
            htmlPager hp = new htmlPager(Int32.Parse(indexpage.ToString()), userInfo.Count);//对来源数据进行分页
            if (indexpage > hp.pageCount)
            {
                indexpage = hp.pageCount;
            }
            List<UserInfo> usData = userInfo.Skip((hp.pageIndex-1) * hp.pageSize).Take(hp.pageSize).ToList<UserInfo>();//分页后的数据,从0开始
            for (int i = 0; i < usData.Count; i++)
            {
                HTMLpage += "<tr><td>" + i + "</td>" + "<td>" + usData[i].userName + "</td>" + "<td>" + usData[i].userAge + "</td>" + "<td>" + usData[i].userSex + "</td>" + "<td>" + usData[i].userHeight + "</td>" + "<td>" + usData[i].userWeight + "</td></tr>";
            }
            HTMLpage += "</tbody>|-|-|";//|-|-|  用于分拆数据   前面是表格数据，后面是分页标签
            HTMLpage += getpage(hp, indexpage);//分页html            
            return Json(HTMLpage);
        }

1. 独有　pagehtmldata 中调用了 getpage(它是用来处理分页效果的实现)

 public string getpage(htmlPager hp, int indexpage = 1) 
        {
            string html = "";
            string firstClassName = "";
            if (indexpage==1)
            {
                firstClassName = " class='current'";
            }
            string firstpage = "  <a href='javascript:void(0)'" + firstClassName + " onclick='ChangePage(this)'>" + 1 + "</a>";//第一页            
            string omitpage = "  <a href='javascript:void(0)'>...</a>";//省略的页
            string prepage = "<a href='javascript:void(0)' onclick='PrePage(this)'><<</a>";//上一页
            string nextpage = "  <a href='javascript:void(0)' onclick='NextPage(this)'>>></a>";//下一页
            string countpage = "  <a href='javascript:void(0)' onclick='ChangePage(this)'>" + hp.pageCount + "</a>";
            #region 当前为第 1 页时                        
            if (indexpage==1)
            {
                if (hp.pageCount==1)//如果总页数 1 ， 则不显示页数！
                {
                    return html;
                }
                html += firstpage;//第一页
                int pageCount=hp.pageCount;
                if (pageCount>5)
                {
                    pageCount = 5;
                }
                for (int i = 2; i <= pageCount; i++)
                {
                    string className = "";
                    if (i == indexpage)
                    {
                        className = "current";
                    }
                    html += "  <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
                }
                if (hp.pageCount>5)
                {
                    html += omitpage + countpage + nextpage;
                }
            }
            #endregion
            #region 当前页 <= 5 时
            else if (indexpage<=5)
            {
                html += prepage + firstpage;//第一页
                int pageCount = hp.pageCount;
                if (pageCount > 8)
                {
                    switch (indexpage)
                    {
                        case 2:
                            pageCount = 5;
                            break;
                        case 3:
                            pageCount = 5;
                            break;
                        case 4:
                            pageCount = 6;
                            break;
                        case 5:
                            pageCount = 7;
                            break;
                        default:
                            break;
                    }
                }
                for (int i = 2; i <= pageCount; i++)
                {
                    string className = "";
                    if (i == indexpage)
                    {
                        className = "current";
                    }
                    html += "  <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
                }
                if (hp.pageCount > 5)
                {
                    html += omitpage + countpage + nextpage;
                }
            }
            #endregion
            #region 当前页 >5 时
            else
            {
                html += prepage + firstpage + omitpage;//第一页
                int pageCount = hp.pageCount;
                if (indexpage+3<pageCount)
                {
                    pageCount = indexpage + 3;
                }
                for (int i = indexpage-3; i <= pageCount; i++)
                {
                    string className = "";
                    if (i == indexpage)
                    {
                        className = "current";
                    }
                    html += "  <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
                }
                if (hp.pageCount > 5)
                {
                    html += omitpage + countpage + nextpage;                                   
                }
            }            
            #endregion
            return html;
        }

　　对应另外2个分页我直接把项目给打包了，如果你要看也是不错的，只是代码有点多，不易在项目中使用！

开发环境是VS2010 MVC4

望不腻赐教！

源码下载：http://pan.baidu.com/s/1eQzYAiA

本篇为原创：转载请注明出处知鸟 www.cnblogs.com/izhiniao 谢谢！

自己动手写 ASP.NET MVC 分页 part1

如果您发现有不合理的地方希望不腻赐教，小弟先在这里谢过您了！

望不腻赐教！

相关推荐