MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)
我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子。接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的。
至于为何要用无刷新分页(局部刷新)呢,我个人觉得有几点原因:
提高用户体验,无刷新分页网页看起来相对静止,滚轮不会跳到上面,加载速度比较快;
减轻网站服务器压力,返回局部页面(其中无需包含样式和脚本)肯定比返回整个页面要来的轻松;
还有个分页的好处就是减轻数据库的压力,返回几行的数据肯定比返回所有行的数据要轻松啦。
首先右击项目-管理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 = , int pageIndex = )
{
DateTime? startTime = null;
DateTime? endTime = null; switch (logTime)
{
case "1MonthAgo":
endTime = DateTime.Now.AddMonths(-);
break;
default:
startTime = DateTime.Now.AddMonths(-);
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/学习一下。欢迎探讨共同学习喔。
MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)的更多相关文章
- JQuery Pagination 分页插件 增加了首页尾页以及跳转功能
JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...
- js控制iframe的刷新(页面局部刷新)
今天遇到个问题,后台会员审核之后,页面内的会员审核状态要及时改变,但又不能指望用户手动刷新(用户体验很不好) 如果审核页面和显示审核状态时同在一个html页面的话,那么直接用js改变div内部的文本就 ...
- oracle自带总页数分页sql
string strSQL = string.Format(@"select * from( with temp as (select * from * where {0} order by ...
- MVC无刷新分页
MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能) 我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下 ...
- 自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...
- jquery的div局部刷新
jquery的div局部刷新 //div的局部刷新 $(".dl").load(location.href+" .dl"); 全页面的刷新方法 window.l ...
- python反爬之网页局部刷新1
# ajax动态加载网页 # 怎样判断一个网页是不是动态加载的呢? # 查看网页源代码,如果源码中没有你要的数据,尝试访问下一页,当你点击下一页的时候,整个页面没有刷新, 只是局部刷新了,很大的可能是 ...
- C# 返回分页查询的总页数
/// <summary> /// 返回分页查询操作的的总页数 /// </summary> /// <param name="count">总 ...
- MVC简单分页(未实现无刷新分页)
分页Html辅助方法 using System.Text; using System.Web: using System.Web.Mvc; namespace System.Web.Mvc { pub ...
随机推荐
- 用mixin引入模块后, 方法重名的解析方法
关于mixin, 经常被问到一个问题是, 方法查找是如何处理的? 特别地, 如果类, 父类, 以及类所包含的mixin中, 都定义有相同名字的方法时, 会发生什么? 答案是, ruby首先会从对象的直 ...
- webApi 数据绑定 获取
直接上代码: <html> <head> <meta name="viewport" content="width=device-width ...
- php函数parse_url
1.需求 了解parse_url的使用方法 2.实例 $uri = parse_url('http://dummy'.$_SERVER['REQUEST_URI']); var_dump($uri); ...
- rsa 签名 加密解密
A->B 签名 ==========================A方+A方的私钥 => B收到后 用A方的公钥 验证签名 ==========================A-> ...
- 各大安卓应用市场APP上传提交与收录
360 提交网址 应用宝 提交网址 百度 提交网址 91 提交网址 安卓 提交网址 PP助手 提交网址 小米 提交网址 华为 提交网址 OPPO 提交网址 魅族 提交网址 乐视 提交网址 豌豆荚 提交 ...
- PHP获取一段时间内的每个周几, 每月几号, 遇到特殊日子就往后延
2016年11月1日 16:18:19 星期二 主要用到的函数是 strtotime() strtotime('+1 Tuesday', $timestamp) 获取下周二, 从时间戳$timesta ...
- Angular2 指令
1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...
- dateset添加一列
ds.Tables[].Columns.Add("short_name", System.Type.GetType("System.String"));//直接 ...
- xcode 消除警告
项目中引用大量的第三方代码时,这些代码很复杂,不要轻易去改动它,如果编译产生很多警告,该如何消除呢? 1. 最直接.最一劳永逸.最安全的方式,直接找到警告的那段代码,改为不警告.这个方式最安全. 可是 ...
- Java笔记:对象,方法,类
1.数据类型(类) 对象名; 这里要求数据类型必须为复合数据类型,基本数据类型声明的结构只能称为变量,而不能称为对象. 对象的初始化 对象名= new 构造方法(参数); 2.方法: 访问控制符 [修 ...