• 实现Asp.Net MVC无刷新分页


    整个过程主要就是:一开始进入页面是,在页面加载完成之后直接通过$(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-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代码
  • 相关阅读:
    第六节
    第十节
    第七节
    【项目】项目163
    【项目】项目165
    【项目】项目164
    【项目】项目168
    【项目】项目166
    【项目】项目167
    7.Redis之Sentinel安装与部署
  • 原文地址:https://www.cnblogs.com/reader/p/5126264.html
Copyright © 2020-2023  润新知