码迷,mamicode.com
首页 > Web开发 > 详细

实现Asp.Net MVC无刷新分页

时间:2016-01-13 10:38:50      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

整个过程主要就是:一开始进入页面是,在页面加载完成之后直接通过$(function(){  LoadRegisterUserInfo(1,10,0,0);//加载注册用户信息 });无条件加载数据,调用的方法可以查看下面的js代码。接着就是按条件查询数据,主要把条件查询的方式(searchWay)和查询的条件(condition)提交处理接受返回数据。(新手代码,性能方面估计没想太多,如有不足之处,敬请提出,本着学习交流的态度)

 

①Html代码(UserManager.cshtml),展示分页数据

技术分享
 1  <div>
 2                             <div>
 3                                 <h4><span style="padding-bottom:100px;">【快速搜索】</span></h4>
 4                                 
 5                                 <span style="margin-top:10px;">
 6                                     <span id="UserManagerSearchSpan">
 7                                         &nbsp;<input type="button" value="查看所有用户" style="background-color:#33FFCC;border-style:solid;border-width:1px;border-radius:6px;" onclick="LoadRegisterUserInfo(1,10,0,0)" /> &nbsp;&nbsp;&nbsp;&nbsp;
 8                                          角色:<select id="search_role">
 9     @if (Session["AdminLevel"].ToString() == "0")
10     {
11         <option value="1">学生</option>
12         <option value="2">教师</option>
13         <option value="3">管理员</option>}
14     else
15     {
16     <option value="1">学生</option><option value="2">教师</option> }
17 </select> 
18                                     <span><input type="button" value="按角色查询" onclick="LoadRegisterUserInfo(1,10,1,1)" /> </span><span>
19                                         &nbsp;&nbsp;&nbsp;&nbsp;
20                                         登录账号:<input type="text" id="search_accountNumber" data-toggle="tooltip" data-placement="top" title="<h5> <span class=‘myTipTitleColor‘>请填写有效的账号!</span></h5>"/>
21                                     </span><span><input type="button" value="按账号查询" onclick="LoadRegisterUserInfo(1, 10, 2, 0)" /> </span><span>
22                                         &nbsp;&nbsp;&nbsp;&nbsp;
23                                         姓名:<input type="text" id="search_name" data-toggle="tooltip" data-placement="top" title="<h5> <span class=‘myTipTitleColor‘>请填写用户的姓名!</span></h5>" />
24                                     </span><span><input type="button" value="按姓名查询" onclick="LoadRegisterUserInfo(1, 10, 3, 0)" /> </span>
25                                 </span>
26                                     </span>
27                             </div>
28                             <hr />
29                             <div id="UserManageTablePlace">
30                                 <table id="RegisterUserInfoTable">
31                                     <tr class="mytr3"><th>编号</th><th>登录账号</th><th>姓名</th><th>性别</th><th>证件号码</th><th>用户类型</th><th>操作</th></tr>
32                                 </table>
33                                 <table id="UserStateTable" style="display:none">
34                                     <tr class="mytr3"><th>编号</th><th>登录账号</th><th>姓名</th><th>性别</th><th>证件号码</th><th>用户类型</th><th>操作</th></tr>
35                                 </table>
36                             </div>
37                             <br />
38                             <div class="myPage">
39                                 <span class="myShowPage">
40                                    <!--这里放页码导航-->
41                                 </span>
42 
43                             </div>
44                             <br />
45                         </div>
Html代码

 

 

②C#代码,主要回去返回需要展示的数据(AdminController.cs)

技术分享
  1  /*
  2                      * 这里除了一次性第一次无条件查询之外,还可以处理根据不同条件去查询
  3                      * 
  4                      * searchWay(0--无条件查询,即系查询所有,1--按角色查询,2--按账号查询,3---按名字查询)
  5                      * condition(0---无条件查询.。如果按角色查询(1---按学生角色查询,2---按教师角色查询,3--按管理员角色查询)。如果是按账号查询,则此时的condition就是需要查询的账号。如果为按名字查询,则此时的condition就是需要查询的名字)
  6                      * 
  7                      */
  8                     //②加载【所有待验证的注册用户】的信息
  9                     List<AllUserInfo> AllList = AllUserInfo.GetAllRegisterUserInfo(Session["AdminLevel"].ToString());
 10                     List<AllUserInfo> AllList2 = new List<AllUserInfo>();//放筛选之后的数据
 11                     int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);
 12                     int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse(Request["pageIndex"]);
 13                     
 14                     //判断是否是条件筛选
 15                     string searchWay = Request["searchWay"];
 16                     string condtition = Request["condition"];
 17                     if (!string.IsNullOrEmpty(searchWay) && !string.IsNullOrEmpty(condtition))//条件筛选
 18                     {
 19                         int k1 = 1;//记录序号
 20                         if (searchWay == "0" && condtition == "0")//都是0的代表是无条件查询
 21                         {
 22                             AllList2 = AllList;//无条件查询
 23                         }
 24                         else if (searchWay == "1")//按角色去筛选
 25                         {
 26                             #region 筛选数据
 27                             string selectCondition;
 28                             
 29                             if (condtition == "1")//【学生】
 30                             {
 31                                 selectCondition = "学生";
 32                             }
 33                             else if (condtition == "2")//【教师】
 34                             {
 35                                 selectCondition = "教师";
 36                             }
 37                             else if (condtition == "3")//【管理员】
 38                             {
 39                                 selectCondition = "管理员";
 40                             }
 41                             else
 42                             {
 43                                 return Content("没找到相关数据!");
 44                             }
 45 
 46                             //遍历,筛选数据
 47                             foreach (AllUserInfo use in AllList)
 48                             {
 49                                 if (use.Role == selectCondition)
 50                                 {
 51                                     use.ListID = k1;
 52                                     AllList2.Add(use);
 53                                     k1++;
 54                                 }
 55                             }
 56                             #endregion
 57 
 58                         }
 59                         else if (searchWay == "2" && !string.IsNullOrEmpty(Request["selectCondition"].ToString()))//按账号查询
 60                         {
 61                            
 62                             #region 遍历,筛选数据
 63                             string selectCondition = Request["selectCondition"];
 64                             foreach (AllUserInfo use in AllList)
 65                             {
 66                                 if (use.UserNum == selectCondition)
 67                                 {
 68                                     use.ListID = k1;
 69                                     AllList2.Add(use);
 70                                     k1++;
 71                                 }
 72                             }
 73                             #endregion
 74                         }
 75                         else if (searchWay == "3" && !string.IsNullOrEmpty(Request["selectCondition"].ToString()))//按名字进行查找
 76                         {
 77                             #region 遍历,筛选数据
 78                             string selectCondition = Request["selectCondition"];
 79                             foreach (AllUserInfo use in AllList)
 80                             {
 81                                 if (use.UserName == selectCondition)
 82                                 {
 83                                     use.ListID = k1;
 84                                     AllList2.Add(use);
 85                                     k1++;
 86                                 }
 87                             }
 88                             #endregion
 89                         }
 90                         else
 91                         {
 92                             return Content("没找到相关数据!");
 93                         }
 94                     }
 95                     else
 96                     {
 97                         //searchWay = " ";
 98                         //condtition = " ";
 99                         //AllList2 = AllList;
100                     }
101 
102                     int total = AllList2.Count;//获取筛选之后的全部数据总的个数
103                     ViewData["pageSize"] = pageSize;//每一页显示的条数
104                     ViewData["pageIndex"] = pageIndex;//当前需要显示的页码
105                     ViewData["total"] = total;
106 
107                     List<AllUserInfo> RetList = new List<AllUserInfo>();//这个列表放需要显示页的数据
108                     for (int i = pageSize * (pageIndex - 1); i < pageSize * (pageIndex - 1) + pageSize; i++)//根据页码和页的大小截取数据记录,然后放在RetList中
109                     {
110                         if (i == AllList2.Count)//如果到达列表结尾,直接跳出
111                         {
112                             break;
113                         }
114                         RetList.Add(AllList2[i]);
115 
116                     }
117 
118                     var json = new//格式化返回数据,转换成json
119                     {
120                         Total = RetList.Count,//返回数据的条数
121                         Row = RetList.ToList(),//返回数据集合
122                         PageNumber = Page.ShowPageNavigate(pageIndex,pageSize,total,searchWay,condtition)//这个方法为分页导航条的字符串
123                     };
124 
125                     
126                     return Json(json, JsonRequestBehavior.AllowGet);//返回数据
C#代码

 

③分页导航处理生产字符串的方法(Page.cs)

技术分享
 1 public class Page
 2     {
 3         public static string ShowPageNavigate( int currentPage, int pageSize, int totalCount,string searchWay, string condition)
 4         {
 5             pageSize = pageSize == 0 ? 3 : pageSize;
 6             var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
 7             var output = new StringBuilder();
 8             if (totalPages > 1)
 9             {
10                 //if (currentPage != 1)
11                 {//处理首页连接
12                     output.AppendFormat("<a class=‘pageLink‘ href=‘javascript:void(0);‘ onclick=‘LoadRegisterUserInfo({0},{1},{2},{3})‘>首页</a> ", 1, pageSize,searchWay, condition);
13                 }
14                 if (currentPage > 1)
15                 {//处理上一页的连接
16 
17                     output.AppendFormat("<a class=‘pageLink‘ href=‘javascript:void(0);‘ onclick=‘LoadRegisterUserInfo({0},{1},{2},{3})‘>上一页</a> ", currentPage - 1, pageSize,searchWay, condition);
18                 }
19                 else
20                 {
21                     // output.Append("<span class=‘pageLink‘>上一页</span>");
22                 }
23 
24                 output.Append(" ");
25                 int currint = 5;
26                 for (int i = 0; i <= 10; i++)
27                 {//一共最多显示10个页码,前面5个,后面5个
28                     if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
29                     {
30                         if (currint == i)
31                         {//当前页处理
32                             //{0}?pageIndex={1}&pageSize={2}
33                             output.AppendFormat("<a   href=‘javascript:void(0);‘><span class=‘currentPage‘>{0}</span></a> ", currentPage);
34                             //output.AppendFormat("<a class=‘active‘ href=‘javascript:void(0);‘>{0}</a> ", currentPage);
35                         }
36                         else
37                         {//一般页处理
38 
39                             output.AppendFormat("<a class=‘pageLink‘  href=‘javascript:void(0);‘ onclick=‘LoadRegisterUserInfo({0},{1},{2},{3})‘>{4}</a> ", currentPage + i - currint, pageSize,searchWay, condition, currentPage + i - currint);
40                         }
41                     }
42                     output.Append(" ");
43                 }
44                 if (currentPage < totalPages)
45                 {//处理下一页的链接
46 
47                     output.AppendFormat("<a class=‘pageLink‘ href=‘javascript:void(0);‘ onclick=‘LoadRegisterUserInfo({0},{1},{2},{3})‘>下一页</a> ",  currentPage + 1, pageSize,searchWay,condition);
48                 }
49                 else
50                 {
51                     //output.Append("<span class=‘pageLink‘>下一页</span>");
52                 }
53                 output.Append(" ");
54                 if (currentPage != totalPages)
55                 {
56 
57                     output.AppendFormat("<a class=‘pageLink‘ href=‘javascript:void(0);‘ onclick=‘LoadRegisterUserInfo({0},{1},{2},{3})‘>末页</a> ", totalPages, pageSize,searchWay,condition);
58                 }
59                 output.Append(" ");
60             }
61             output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行
62 
63             return output.ToString();
64         }
65     }
C# Page类的处理方法

 

④Js处前端和后端的交互(adminJS2.js)

技术分享
 1 $(function () {
 2     $([data-toggle="tooltip"]).tooltip({ html: true });
 3     LoadRegisterUserInfo(1,10,0,0);//加载注册用户信息
 4 });
 5 
 6 //SaveSearchWay = "";
 7 //SaveCondition = "";
 8 
 9 /// <summary>
10 /// 加载注册【用户信息】
11 /// </summary>
12 /// <param name="pageIndex">页号</param>
13 /// <param name="pageSize">显示条数</param>
14 /// <param name="searchWay">搜索方式</param>
15 /// <param name="condition">条件</param>
16 /// <returns></returns>
17 function LoadRegisterUserInfo(pageIndex, pageSize,searchWay,condition) {
18     //alert(searchWay + "____" + condition);
19     //alert(pageIndex + "_______" + pageSize);
20     //【条件筛选】初始化数据
21     var selectCondition = 0;
22     if (searchWay == "1") {//【按照角色查找】
23         condition = $("#search_role").val();
24     }
25     if (searchWay == "2") {//【按账号查找】
26         if ($("#search_accountNumber").val() != "") {
27             condition = 0;
28             selectCondition = $("#search_accountNumber").val();
29         }
30         else {
31             alert("请填写需要查询的账号!");
32             return;
33         }
34     }
35     if (searchWay == "3") {//【按照姓名查找】
36         if ($("#search_name").val() != "") {
37             condition = 0;
38             selectCondition = $("#search_name").val();
39         } else {
40             alert("请填写需要查询的姓名!");
41             return;
42         }
43     }
44 
45 
46     //①先清空原来的表格
47     $("#RegisterUserInfoTable tr:gt(0)").remove();
48 
49     var k = 0;
50     //②发生请求
51     $.post("/Admin/GetAllRegisterUserInfo", { "pageIndex": pageIndex, "pageSize": pageSize, "searchWay": searchWay, "condition": condition ,"selectCondition":selectCondition}, function (data) {
52         //alert(result["Grade1"]);
53         //alert("Total" + data["Total"]);
54         
55         if (data["Total"] <= 0) {
56             $("#RegisterUserInfoTable").append("<tr class=‘ mytr2-1‘ align = ‘left‘><td colspan = ‘7‘>暂无学生信息</td> </tr>");
57         }
58         //var str = "<a href=javascript:void(0); onclick=SaveScoreBtnClick(‘" + stuNum + "‘,‘" + courseNum + "‘)>保存</a>";
59         //alert(searchWay + "____" + condition);
60       
61         for (var i = 0; i < data["Total"]; i++) {
62          
63             //拼接删除链接字符串
64             var str1 = "<a href=javascript:void(0); onclick=DeleteRegisterUser(‘" + data[Row][i].UserNum + "‘,‘" + data[Row][i].Role + "‘," + data["Row"][i].ListID + ")>删除</a>"
65 
66             //拼接通过连接字符串
67             var str2 = "<a href=javascript:void(0); onclick=PassRegisterUser(‘" + data[Row][i].UserNum + "‘,‘" + data[Row][i].Role + "‘," + data["Row"][i].ListID + ")>通过</a>"
68 
69             if (k == 0) {//处理隔行不同样式展示
70                 $("#RegisterUserInfoTable").append("<tr class=‘mytr2 mytr2-1‘ id= "+data["Row"][i].ListID+"><td>" + data["Row"][i].ListID + "</td><td>" + data["Row"][i].UserNum + "</td><td>" + data["Row"][i].UserName + "</td><td>" + data["Row"][i].Sex + "</td><td>" + data["Row"][i].IdentityCard + "</td><td>" + data["Row"][i].Role + "</td><td>"+str1+" | "+str2+"</td></tr>");
71                 k = 1;
72             }
73             else {
74                 $("#RegisterUserInfoTable").append("<tr class=‘ mytr2-1‘ id=" + data["Row"][i].ListID + "><td>" + data["Row"][i].ListID + "</td><td>" + data["Row"][i].UserNum + "</td><td>" + data["Row"][i].UserName + "</td><td>" + data["Row"][i].Sex + "</td><td>" + data["Row"][i].IdentityCard + "</td><td>" + data["Row"][i].Role + "</td><td>" + str1 + " | " + str2 + "</td></tr>");
75                 k = 0;
76             }
77         }
78         
79         $(".myShowPage").html("");
80         $(".myShowPage").html(data["PageNumber"]);//填充处理数据
81 
82     });
83 
84 }
Js代码

 

实现Asp.Net MVC无刷新分页

标签:

原文地址:http://www.cnblogs.com/reader/p/5126264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!