3：MVC学习——学生列表，Ajax分页
登录后显示的页面，学生列表：
后台返回的JS内容：
点击下一页：
1，先看一下DAL.StudentService的内容：
public class StudentService { /// <summary> /// 获取学生列表分页数据 /// </summary> /// <param name="startIndex">查询开始索引</param> /// <param name="endIndex">查询结束索引</param> /// <returns></returns> public List<StudentInfo> GetStudentPage(int startIndex,int endIndex) { List<StudentInfo> stuList = new List<StudentInfo>(); string sql = @" select * from ( select row_number() over(order by a.ClassId,a.Name) row,a.*,b.ClassName from StudentInfo a left join ClassInfo b on a.ClassId=b.ClassId ) t where t.row>{0} and t.row<={1} order by row "; sql = string.Format(sql, startIndex, endIndex); SqlDataReader reader = SQLHelper.GetReader(sql); while (reader.Read()) { StudentInfo objStudent = new StudentInfo(); objStudent.row= Convert.ToInt32(reader["row"]); objStudent.StuId = Convert.ToInt32(reader["StuId"]); objStudent.Name = reader["Name"].ToString(); objStudent.Gender = reader["Gender"].ToString(); objStudent.Age = Convert.ToInt32(reader["Age"]); objStudent.PhoneNumber = reader["PhoneNumber"].ToString(); objStudent.Address = reader["Address"].ToString(); objStudent.RecordDate = Convert.ToDateTime(reader["RecordDate"]); objStudent.ClassId = Convert.ToInt32(reader["ClassId"]); objStudent.ClassName = reader["ClassName"].ToString(); stuList.Add(objStudent); } reader.Close(); return stuList; } /// <summary> /// 获取学生总数 /// </summary> /// <returns></returns> public int GetStudentTotalCount() { string sql = " select count(1) from StudentInfo "; int totalCount = Convert.ToInt32(new SQLHelper().GetExecuteScalar(sql)); return totalCount; } }
2，BLL.StudentManager的内容：
public class StudentManager { /// <summary> /// 获取学生列表分页数据 /// </summary> /// <param name="pageNumber">当前页数</param> /// <param name="pageSize">每页行数</param> /// <returns></returns> public List<StudentInfo> GetStudentPage(int pageNumber, int pageSize) { List<StudentInfo> stuList = new List<StudentInfo>(); int pageStart = (pageNumber - 1) * pageSize; int pageEnd = pageStart + pageSize; stuList = new StudentService().GetStudentPage(pageStart, pageEnd); return stuList; } /// <summary> /// 获取学生总数 /// </summary> /// <returns></returns> public int GetStudentTotalCount() { int totalCount = Convert.ToInt32(new StudentService().GetStudentTotalCount()); return totalCount; } }
3，StudentController的内容：
[AdminAuthorize] //登录验证 public class StudentController : Controller { // GET: Student public ActionResult Index() { return View(); } //响应Ajax请求，返回分页数据 [HttpPost] public ActionResult AjaxPage(int? page,int? pageSize2) { int pageIndex = page ?? 1; int pageSize = pageSize2 ?? 10; int totalCount = new StudentManager().GetStudentTotalCount(); var students = new StudentManager().GetStudentPage(pageIndex, pageSize); var studentsAsPagedList = new StaticPagedList<StudentInfo>(students, pageIndex, pageSize, totalCount); return Json(new { student = studentsAsPagedList, pager = studentsAsPagedList.GetMetaData() }, JsonRequestBehavior.AllowGet); } }
4，html页面内容：
@{ Layout = null; } <!DOCTYPE html> <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script> $(function () { getStudentByAjax(1); }); var pageSize2 = 10; //Ajax请求 var getStudentByAjax = function (pageNumber) { $.ajax({ url: "/Student/AjaxPage?page=" + pageNumber + "&pageSize2=" + pageSize2, type: "POST", dataType: "json", success: function (data) { //接收数据（data）并绑定 var html = "<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th><th>操作</th></tr>"; $.each(data.student, function (i, item) { html += "<tr>" + "<td>" + item.row + "</td>" + "<td>" + item.Name + "</td>" + "<td>" + item.Gender + "</td>" + "<td>" + item.Age + "</td>" + "<td>" + item.ClassName + "</td>" + "<td><a href='/Student/Edit/" + item.StuId + "'>Edit</a> | <a href='/Student/Details/" + item.StuId + "'>Details</a> | <a href='/Student/Delete/" + item.StuId + "'>Delete</a></td>" + "</tr>"; }); $("#studentList").html(html); //创建分页导航 var pager = data.pager; html = "{ 共" + pager.PageCount + "页（" + pager.TotalItemCount+"行）- 当前页数：" + pager.PageNumber + " } <br/>"; if (pager.HasPreviousPage) { html += "<a href='#' onclick='getStudentByAjax(" + (pager.PageNumber - 1) + ");return false;'>上一页</a> | <a href='#' onclick='getStudentByAjax(1);return false;'>首页</a>"; } else { html += "上一页 | 首页"; } html += " | "; if (pager.HasNextPage) { html += "<a href='#' onclick='getStudentByAjax(" + (pager.PageNumber + 1) + ");return false;'>下一页</a> | <a href='#' onclick='getStudentByAjax(" + pager.PageCount + ");return false;'>尾页</a>"; } else { html += "下一页 | 尾页"; } $("#pager").html(html); }, error: function (result) { alert(result.statusText); }, complete: function (jqXHR) { jqXHR = null; } }); } </script> <html> <head> <meta name="viewport" content="width=device-width" /> <title>学生列表</title> </head> <body> <div> 欢迎 @Session["AdminName"].ToString() 的到来！ <a href="/Admin/LoginOut">登出</a> </div> <div> <table id="studentList"> </table> <div id="pager"> </div> </div> </body> </html>
这里主要关注一下js的写法吧，js基础一般：
<script> $(function () { getStudentByAjax(1); }); var pageSize2 = 10; //Ajax请求 var getStudentByAjax = function (pageNumber) { $.ajax({ url: "/Student/AjaxPage?page=" + pageNumber + "&pageSize2=" + pageSize2, type: "POST", dataType: "json", success: function (data) { //接收数据（data）并绑定 var html = "<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th><th>操作</th></tr>"; $.each(data.student, function (i, item) { html += "<tr>" + "<td>" + item.row + "</td>" + "<td>" + item.Name + "</td>" + "<td>" + item.Gender + "</td>" + "<td>" + item.Age + "</td>" + "<td>" + item.ClassName + "</td>" + "<td><a href='/Student/Edit/" + item.StuId + "'>Edit</a> | <a href='/Student/Details/" + item.StuId + "'>Details</a> | <a href='/Student/Delete/" + item.StuId + "'>Delete</a></td>" + "</tr>"; }); $("#studentList").html(html); //创建分页导航 var pager = data.pager; html = "{ 共" + pager.PageCount + "页（" + pager.TotalItemCount+"行）- 当前页数：" + pager.PageNumber + " } <br/>"; if (pager.HasPreviousPage) { html += "<a href='#' onclick='getStudentByAjax(" + (pager.PageNumber - 1) + ");return false;'>上一页</a> | <a href='#' onclick='getStudentByAjax(1);return false;'>首页</a>"; } else { html += "上一页 | 首页"; } html += " | "; if (pager.HasNextPage) { html += "<a href='#' onclick='getStudentByAjax(" + (pager.PageNumber + 1) + ");return false;'>下一页</a> | <a href='#' onclick='getStudentByAjax(" + pager.PageCount + ");return false;'>尾页</a>"; } else { html += "下一页 | 尾页"; } $("#pager").html(html); }, error: function (result) { alert(result.statusText); }, complete: function (jqXHR) { jqXHR = null; } }); } </script>
5，这里用到了PagedList的引用
参考文献：https://www.cnblogs.com/tangmingjun/archive/2012/05/31/2528732.html
