MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)
2014-09-30 10:47
381 查看
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子。接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的。
至于为何要用无刷新分页(局部刷新)呢,我个人觉得有几点原因:
然后在BLL的订单管理OrderManage类里添加一个ToPagedList方法,第几页pageIndex和每页行数pageSize是必需的,其他都可空。
可是只有订单还不行呀,订单是有订单明细的,也就是说除了订单表还有订单明细表,这个不搞出来岂不是做不了淘宝的那个功能?那就再加一个方法:
至此,订单和订单明细都能获取,BLL的逻辑处理已经完成了。接下来就是Web项目的事了。先建一个订单模型:
这个模型用来存放从BLL获取的订单和订单明细,然后就处理Controller了:
其中ShopAuthorize是我自定义的登录验证:
Controller也完成了数据的传递,最后只剩下页面了,先说OrderManage页面,此页面关键地方在于异步提交的表单:
提醒一下,要用Ajax提交需加上jquery.unobtrusive-ajax.min.js和@{ Html.RegisterMvcPagerScriptResource(); }引用,并且引用Jquery1.7以上版本,另外还需加上
其中每页行数选择的就自己在OrderManage写一个下拉列表,再写个脚本实现改变行数时改变表单里的id为pageSize的值,并触发表单的提交即可,排序的也同理改变表单里的id为orderBy的值并触发表单的提交即可。最后就只剩下局部页面_OrderList了,这里的关键点在于:
至此,无刷新分页功能已完成,来张效果图吧
是不是和淘宝的有点像捏
。
声明,本文有参考http://www.webdiyer.com/mvcpager/,样式也可以在http://www.webdiyer.com/mvcpager/demo/applycss/学习一下。欢迎探讨共同学习喔。
至于为何要用无刷新分页(局部刷新)呢,我个人觉得有几点原因:
提高用户体验,无刷新分页网页看起来相对静止,滚轮不会跳到上面,加载速度比较快;
减轻网站服务器压力,返回局部页面(其中无需包含样式和脚本)肯定比返回整个页面要来的轻松;
还有个分页的好处就是减轻数据库的压力,返回几行的数据肯定比返回所有行的数据要轻松啦。
首先右击项目-管理NuGet程序包,联机搜索MvcPager,并安装然后在BLL的订单管理OrderManage类里添加一个ToPagedList方法,第几页pageIndex和每页行数pageSize是必需的,其他都可空。
public PagedList<SH_Order> ToPagedList(int pageIndex, int pageSize, string orderBy, string orderName, SH_OrderState? state, SH_PayType? payType, DateTime? startTime, DateTime? endTime, long? accountId) { using (var db = new ShopContext()) { var log = db.Order.Include(s => s.Account); if (accountId != null) { log = db.Order.Where(o => o.AccountId == accountId); } if (state != null) { log = log.Where(o => o.State == state); } if (payType != null) { log = log.Where(o => o.PayType == payType); } if (startTime != null) { log = log.Where(o => o.LogTime > startTime); } if (endTime != null) { log = log.Where(o => o.LogTime < endTime); } if (!string.IsNullOrWhiteSpace(orderName)) { log = log.Where(o => o.OrderName.Contains(orderName)); } switch (orderBy) { case "LogTime": log = log.OrderBy(o => o.LogTime); break; case "LogTime Desc": log = log.OrderByDescending(o => o.LogTime); break; case "AccountName": log = log.OrderBy(o => o.Account.AccountName); break; case "AccountName Desc": log = log.OrderByDescending(o => o.Account.AccountName); break; case "TotalPrice": log = log.OrderBy(o => o.TotalPrice); break; case "TotalPrice Desc": log = log.OrderByDescending(o => o.TotalPrice); break; case "OrderName": log = log.OrderBy(o => o.OrderName); break; case "OrderName Desc": log = log.OrderByDescending(o => o.OrderName); break; case "PayTime": log = log.OrderBy(o => o.PayTime); break; case "PayTime Desc": log = log.OrderByDescending(o => o.PayTime); break; default: log = log.OrderByDescending(o => o.ID); break; } return log.AsNoTracking().ToPagedList(pageIndex, pageSize); } }
可是只有订单还不行呀,订单是有订单明细的,也就是说除了订单表还有订单明细表,这个不搞出来岂不是做不了淘宝的那个功能?那就再加一个方法:
public List<List<SH_OrderDetail>> GetOrderDetailByOrders(IEnumerable<SH_Order> orders) { using (var db = new ShopContext()) { var details = new List<List<SH_OrderDetail>>(); orders.ToList().ForEach(o => details.Add(db.OrderDetail.Include(j => j.Gift).Where(j => j.OrderId == o.ID).AsNoTracking().ToList())); return details; } }
至此,订单和订单明细都能获取,BLL的逻辑处理已经完成了。接下来就是Web项目的事了。先建一个订单模型:
public class OrdersViewModel { public PagedList<SH_Order> Orders { get; set; } public List<List<SH_OrderDetail>> OrderDetails { get; set; } }
这个模型用来存放从BLL获取的订单和订单明细,然后就处理Controller了:
[ShopAuthorize] public ActionResult OrderList(string orderState, string orderBy, string payType, string logTime, string orderName, string giftName, int pageSize = 10, int pageIndex = 1) { DateTime? startTime = null; DateTime? endTime = null; switch (logTime) { case "1MonthAgo": endTime = DateTime.Now.AddMonths(-1); break; default: startTime = DateTime.Now.AddMonths(-1); break; } SH_OrderState enumOrderState; var result = Enum.TryParse(orderState, out enumOrderState); SH_OrderState? endOrderState = null; if (result) endOrderState = enumOrderState; SH_PayType enumPayType; result = Enum.TryParse(payType, out enumPayType); SH_PayType? endPayType = null; if (result) endPayType = enumPayType; var manage = new OrderManage(); var orders = manage.ToPagedList(pageIndex, pageSize, orderBy, orderName, endOrderState, endPayType, startTime, endTime, long.Parse(User.Identity.GetUserId())); var orderList = new OrdersViewModel { Orders = orders, OrderDetails = manage.GetOrderDetailByOrders(orders) }; if (Request.IsAjaxRequest()) { return PartialView("_OrderList", orderList); } ViewBag.OrderState = Common.Common.GetSelectListByEnum(typeof(SH_OrderState), "全部订单状态"); ViewBag.PayType = Common.Common.GetSelectListByEnum(typeof(SH_PayType), "全部支付方式"); ViewData["GiftLevel"] = Common.Common.GetSelectListByEnum(typeof(SH_GiftLevel)); return View("OrderManage", orderList); }
其中ShopAuthorize是我自定义的登录验证:
public class ShopAuthorizeAttribute : AuthorizeAttribute { protected override bool AuthorizeCore(HttpContextBase httpContext) { var user = httpContext.User; return user != null && user.IsInRole("Account"); } protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext) { if (filterContext == null) { return; } var path = filterContext.HttpContext.Request.Path; const string strUrl = "/Account/Login?returnUrl={0}"; filterContext.HttpContext.Response.Redirect(string.Format(strUrl, HttpUtility.UrlEncode(path)), true); } }
Controller也完成了数据的传递,最后只剩下页面了,先说OrderManage页面,此页面关键地方在于异步提交的表单:
提醒一下,要用Ajax提交需加上jquery.unobtrusive-ajax.min.js和@{ Html.RegisterMvcPagerScriptResource(); }引用,并且引用Jquery1.7以上版本,另外还需加上
其中每页行数选择的就自己在OrderManage写一个下拉列表,再写个脚本实现改变行数时改变表单里的id为pageSize的值,并触发表单的提交即可,排序的也同理改变表单里的id为orderBy的值并触发表单的提交即可。最后就只剩下局部页面_OrderList了,这里的关键点在于:
至此,无刷新分页功能已完成,来张效果图吧
是不是和淘宝的有点像捏
。
声明,本文有参考http://www.webdiyer.com/mvcpager/,样式也可以在http://www.webdiyer.com/mvcpager/demo/applycss/学习一下。欢迎探讨共同学习喔。
相关文章推荐
- jsp单页面数据库查询模板:支持分页、排序、简单搜索、设置每页显示页数功能
- jsp单页面数据库查询模板:支持分页、排序、简单搜索、设置每页显示页数功能
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- easyui的datagrid整合struts2,以及Ajax,实现局部刷新功能,并设置分页的实现---------投票案例
- 【转】实现多条件筛选、搜索、排序及分页的表格功能
- 1.MVC框架复习 2.Ajax加强 3.搜索建议 4,三级联动 5、刷新分页 6、Ajax局部动态更新数据
- ASP.Net MVC+Data Table实现分页+排序功能的方法
- springMVC+velocity实现仿Datatables局部刷新分页方法
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- ASP.NET MVC分页和排序功能实现
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 带有『选择次数排序』和『搜索』功能的树形控件设计与实现
- AspNetCommerce中的一个带分页和排序的搜索功能的存储过程
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- springMVC+velocity实现仿Datatables局部刷新分页
- ASP.NET使用ajax实现分页局部刷新页面功能
- AspNetCommerce中的一个带分页和排序的搜索功能的存储过程
- ASP.NET MVC分页和排序功能实现
- 1.MVC框架复习 2.Ajax加强 3.搜索建议 4,三级联动 5、刷新分页 6、Ajax局部动态更新数据