实现Asp.Net MVC无刷新分页

时间:2022-10-12 14:53:28

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

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

  <div>
<div>
<h4><span style="padding-bottom:100px;">【快速搜索】</span></h4> <span style="margin-top:10px;">
<span id="UserManagerSearchSpan">
&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;
角色:<select id="search_role">
@if (Session["AdminLevel"].ToString() == "0")
{
<option value="1">学生</option>
<option value="2">教师</option>
<option value="3">管理员</option>}
else
{
<option value="1">学生</option><option value="2">教师</option> }
</select>
<span><input type="button" value="按角色查询" onclick="LoadRegisterUserInfo(1,10,1,1)" /> </span><span>
&nbsp;&nbsp;&nbsp;&nbsp;
登录账号:<input type="text" id="search_accountNumber" data-toggle="tooltip" data-placement="top" title="<h5> <span class='myTipTitleColor'>请填写有效的账号!</span></h5>"/>
</span><span><input type="button" value="按账号查询" onclick="LoadRegisterUserInfo(1, 10, 2, 0)" /> </span><span>
&nbsp;&nbsp;&nbsp;&nbsp;
姓名:<input type="text" id="search_name" data-toggle="tooltip" data-placement="top" title="<h5> <span class='myTipTitleColor'>请填写用户的姓名!</span></h5>" />
</span><span><input type="button" value="按姓名查询" onclick="LoadRegisterUserInfo(1, 10, 3, 0)" /> </span>
</span>
</span>
</div>
<hr />
<div id="UserManageTablePlace">
<table id="RegisterUserInfoTable">
<tr class="mytr3"><th>编号</th><th>登录账号</th><th>姓名</th><th>性别</th><th>证件号码</th><th>用户类型</th><th>操作</th></tr>
</table>
<table id="UserStateTable" style="display:none">
<tr class="mytr3"><th>编号</th><th>登录账号</th><th>姓名</th><th>性别</th><th>证件号码</th><th>用户类型</th><th>操作</th></tr>
</table>
</div>
<br />
<div class="myPage">
<span class="myShowPage">
<!--这里放页码导航-->
</span> </div>
<br />
</div>

Html代码

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

  /*
* 这里除了一次性第一次无条件查询之外,还可以处理根据不同条件去查询
*
* searchWay(0--无条件查询,即系查询所有,1--按角色查询,2--按账号查询,3---按名字查询)
* condition(0---无条件查询.。如果按角色查询(1---按学生角色查询,2---按教师角色查询,3--按管理员角色查询)。如果是按账号查询,则此时的condition就是需要查询的账号。如果为按名字查询,则此时的condition就是需要查询的名字)
*
*/
//②加载【所有待验证的注册用户】的信息
List<AllUserInfo> AllList = AllUserInfo.GetAllRegisterUserInfo(Session["AdminLevel"].ToString());
List<AllUserInfo> AllList2 = new List<AllUserInfo>();//放筛选之后的数据
int pageSize = Request["pageSize"] == null ? : int.Parse(Request["pageSize"]);
int pageIndex = Request["pageIndex"] == null ? : int.Parse(Request["pageIndex"]); //判断是否是条件筛选
string searchWay = Request["searchWay"];
string condtition = Request["condition"];
if (!string.IsNullOrEmpty(searchWay) && !string.IsNullOrEmpty(condtition))//条件筛选
{
int k1 = ;//记录序号
if (searchWay == "" && condtition == "")//都是0的代表是无条件查询
{
AllList2 = AllList;//无条件查询
}
else if (searchWay == "")//按角色去筛选
{
#region 筛选数据
string selectCondition; if (condtition == "")//【学生】
{
selectCondition = "学生";
}
else if (condtition == "")//【教师】
{
selectCondition = "教师";
}
else if (condtition == "")//【管理员】
{
selectCondition = "管理员";
}
else
{
return Content("没找到相关数据!");
} //遍历,筛选数据
foreach (AllUserInfo use in AllList)
{
if (use.Role == selectCondition)
{
use.ListID = k1;
AllList2.Add(use);
k1++;
}
}
#endregion }
else if (searchWay == "" && !string.IsNullOrEmpty(Request["selectCondition"].ToString()))//按账号查询
{ #region 遍历,筛选数据
string selectCondition = Request["selectCondition"];
foreach (AllUserInfo use in AllList)
{
if (use.UserNum == selectCondition)
{
use.ListID = k1;
AllList2.Add(use);
k1++;
}
}
#endregion
}
else if (searchWay == "" && !string.IsNullOrEmpty(Request["selectCondition"].ToString()))//按名字进行查找
{
#region 遍历,筛选数据
string selectCondition = Request["selectCondition"];
foreach (AllUserInfo use in AllList)
{
if (use.UserName == selectCondition)
{
use.ListID = k1;
AllList2.Add(use);
k1++;
}
}
#endregion
}
else
{
return Content("没找到相关数据!");
}
}
else
{
//searchWay = " ";
//condtition = " ";
//AllList2 = AllList;
} int total = AllList2.Count;//获取筛选之后的全部数据总的个数
ViewData["pageSize"] = pageSize;//每一页显示的条数
ViewData["pageIndex"] = pageIndex;//当前需要显示的页码
ViewData["total"] = total; List<AllUserInfo> RetList = new List<AllUserInfo>();//这个列表放需要显示页的数据
for (int i = pageSize * (pageIndex - ); i < pageSize * (pageIndex - ) + pageSize; i++)//根据页码和页的大小截取数据记录,然后放在RetList中
{
if (i == AllList2.Count)//如果到达列表结尾,直接跳出
{
break;
}
RetList.Add(AllList2[i]); } var json = new//格式化返回数据,转换成json
{
Total = RetList.Count,//返回数据的条数
Row = RetList.ToList(),//返回数据集合
PageNumber = Page.ShowPageNavigate(pageIndex,pageSize,total,searchWay,condtition)//这个方法为分页导航条的字符串
}; return Json(json, JsonRequestBehavior.AllowGet);//返回数据

C#代码

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

 public class Page
{
public static string ShowPageNavigate( int currentPage, int pageSize, int totalCount,string searchWay, string condition)
{
pageSize = pageSize == ? : pageSize;
var totalPages = Math.Max((totalCount + pageSize - ) / pageSize, ); //总页数
var output = new StringBuilder();
if (totalPages > )
{
//if (currentPage != 1)
{//处理首页连接
output.AppendFormat("<a class='pageLink' href='javascript:void(0);' onclick='LoadRegisterUserInfo({0},{1},{2},{3})'>首页</a> ", , pageSize,searchWay, condition);
}
if (currentPage > )
{//处理上一页的连接 output.AppendFormat("<a class='pageLink' href='javascript:void(0);' onclick='LoadRegisterUserInfo({0},{1},{2},{3})'>上一页</a> ", currentPage - , pageSize,searchWay, condition);
}
else
{
// output.Append("<span class='pageLink'>上一页</span>");
} output.Append(" ");
int currint = ;
for (int i = ; i <= ; i++)
{//一共最多显示10个页码,前面5个,后面5个
if ((currentPage + i - currint) >= && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{//当前页处理
//{0}?pageIndex={1}&pageSize={2}
output.AppendFormat("<a href='javascript:void(0);'><span class='currentPage'>{0}</span></a> ", currentPage);
//output.AppendFormat("<a class='active' href='javascript:void(0);'>{0}</a> ", currentPage);
}
else
{//一般页处理 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);
}
}
output.Append(" ");
}
if (currentPage < totalPages)
{//处理下一页的链接 output.AppendFormat("<a class='pageLink' href='javascript:void(0);' onclick='LoadRegisterUserInfo({0},{1},{2},{3})'>下一页</a> ", currentPage + , pageSize,searchWay,condition);
}
else
{
//output.Append("<span class='pageLink'>下一页</span>");
}
output.Append(" ");
if (currentPage != totalPages)
{ output.AppendFormat("<a class='pageLink' href='javascript:void(0);' onclick='LoadRegisterUserInfo({0},{1},{2},{3})'>末页</a> ", totalPages, pageSize,searchWay,condition);
}
output.Append(" ");
}
output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行 return output.ToString();
}
}

C# Page类的处理方法

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

 $(function () {
$('[data-toggle="tooltip"]').tooltip({ html: true });
LoadRegisterUserInfo(,,,);//加载注册用户信息
}); //SaveSearchWay = "";
//SaveCondition = ""; /// <summary>
/// 加载注册【用户信息】
/// </summary>
/// <param name="pageIndex">页号</param>
/// <param name="pageSize">显示条数</param>
/// <param name="searchWay">搜索方式</param>
/// <param name="condition">条件</param>
/// <returns></returns>
function LoadRegisterUserInfo(pageIndex, pageSize,searchWay,condition) {
//alert(searchWay + "____" + condition);
//alert(pageIndex + "_______" + pageSize);
//【条件筛选】初始化数据
var selectCondition = ;
if (searchWay == "") {//【按照角色查找】
condition = $("#search_role").val();
}
if (searchWay == "") {//【按账号查找】
if ($("#search_accountNumber").val() != "") {
condition = ;
selectCondition = $("#search_accountNumber").val();
}
else {
alert("请填写需要查询的账号!");
return;
}
}
if (searchWay == "") {//【按照姓名查找】
if ($("#search_name").val() != "") {
condition = ;
selectCondition = $("#search_name").val();
} else {
alert("请填写需要查询的姓名!");
return;
}
} //①先清空原来的表格
$("#RegisterUserInfoTable tr:gt(0)").remove(); var k = ;
//②发生请求
$.post("/Admin/GetAllRegisterUserInfo", { "pageIndex": pageIndex, "pageSize": pageSize, "searchWay": searchWay, "condition": condition ,"selectCondition":selectCondition}, function (data) {
//alert(result["Grade1"]);
//alert("Total" + data["Total"]); if (data["Total"] <= ) {
$("#RegisterUserInfoTable").append("<tr class=' mytr2-1' align = 'left'><td colspan = '7'>暂无学生信息</td> </tr>");
}
//var str = "<a href=javascript:void(0); onclick=SaveScoreBtnClick('" + stuNum + "','" + courseNum + "')>保存</a>";
//alert(searchWay + "____" + condition); for (var i = ; i < data["Total"]; i++) { //拼接删除链接字符串
var str1 = "<a href=javascript:void(0); onclick=DeleteRegisterUser('" + data['Row'][i].UserNum + "','" + data['Row'][i].Role + "'," + data["Row"][i].ListID + ")>删除</a>" //拼接通过连接字符串
var str2 = "<a href=javascript:void(0); onclick=PassRegisterUser('" + data['Row'][i].UserNum + "','" + data['Row'][i].Role + "'," + data["Row"][i].ListID + ")>通过</a>" if (k == ) {//处理隔行不同样式展示
$("#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>");
k = ;
}
else {
$("#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>");
k = ;
}
} $(".myShowPage").html("");
$(".myShowPage").html(data["PageNumber"]);//填充处理数据 }); }

Js代码