MVC無刷新分頁（即局部刷新，帶搜索，頁數(shù)選擇，排序功能）

　　我查看了很多網(wǎng)站，大部分評論分頁都是局部刷新的，可大部分電商商品展示分頁都是有刷新頁面的，于是我便做了一個商品展示無刷新分頁的例子。接下來我就將做一個模仿淘寶已買到的寶貝功能，不過我的是無刷新分頁的。

　　至于為何要用無刷新分頁（局部刷新）呢，我個人覺得有幾點原因：

提高用戶體驗，無刷新分頁網(wǎng)頁看起來相對靜止，滾輪不會跳到上面，加載速度比較快；
減輕網(wǎng)站服務(wù)器壓力，返回局部頁面（其中無需包含樣式和腳本）肯定比返回整個頁面要來的輕松；
還有個分頁的好處就是減輕數(shù)據(jù)庫的壓力，返回幾行的數(shù)據(jù)肯定比返回所有行的數(shù)據(jù)要輕松啦。

　　首先右擊項目-管理NuGet程序包，聯(lián)機(jī)搜索MvcPager,并安裝

　　然后在BLL的訂單管理OrderManage類里添加一個ToPagedList方法，第幾頁pageIndex和每頁行數(shù)pageSize是必需的，其他都可空。

 1         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) 2         { 3             using (var db = new ShopContext()) 4             { 5                 var log = db.Order.Include(s => s.Account); 6  7                 if (accountId != null) 8                 { 9                     log = db.Order.Where(o => o.AccountId == accountId);10                 }11 12                 if (state != null)13                 {14                     log = log.Where(o => o.State == state);15                 }16 17                 if (payType != null)18                 {19                     log = log.Where(o => o.PayType == payType);20                 }21 22                 if (startTime != null)23                 {24                     log = log.Where(o => o.LogTime > startTime);25                 }26 27                 if (endTime != null)28                 {29                     log = log.Where(o => o.LogTime < endTime);30                 }31 32                 if (!string.IsNullOrWhiteSpace(orderName))33                 {34                     log = log.Where(o => o.OrderName.Contains(orderName));35                 }36 37                 switch (orderBy)38                 {39                     case "LogTime":40                         log = log.OrderBy(o => o.LogTime);41                         break;42                     case "LogTime Desc":43                         log = log.OrderByDescending(o => o.LogTime);44                         break;45                     case "AccountName":46                         log = log.OrderBy(o => o.Account.AccountName);47                         break;48                     case "AccountName Desc":49                         log = log.OrderByDescending(o => o.Account.AccountName);50                         break;51                     case "Total　　可是只有訂單還不行呀，訂單是有訂單明細(xì)的，也就是說除了訂單表還有訂單明細(xì)表，這個不搞出來豈不是做不了淘寶的那個功能？那就再加一個方法：
1         public List<List<SH_OrderDetail>> GetOrderDetailByOrders(IEnumerable<SH_Order> orders)2         {3             using (var db = new ShopContext())4             {5                 var details = new List<List<SH_OrderDetail>>();6                 orders.ToList().ForEach(o => details.Add(db.OrderDetail.Include(j => j.Gift).Where(j => j.OrderId == o.ID).AsNoTracking().ToList()));7                 return details;8             }9         }
　　至此，訂單和訂單明細(xì)都能獲取，BLL的邏輯處理已經(jīng)完成了。接下來就是Web項目的事了。先建一個訂單模型：
1     public class OrdersViewModel2     {3         public PagedList<SH_Order> Orders { get; set; }4 5         public List<List<SH_OrderDetail>> OrderDetails { get; set; }6     }
　　這個模型用來存放從BLL獲取的訂單和訂單明細(xì)，然后就處理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), "全部訂單狀態(tài)");            ViewBag.PayType = Common.Common.GetSelectListByEnum(typeof(SH_PayType), "全部支付方式");            ViewData["GiftLevel"] = Common.Common.GetSelectListByEnum(typeof(SH_GiftLevel));            return View("OrderManage", orderList);        }
　　其中ShopAuthorize是我自定義的登錄驗證：
 1     public class ShopAuthorizeAttribute : AuthorizeAttribute 2     { 3         protected override bool AuthorizeCore(HttpContextBase httpContext) 4         { 5             var user = httpContext.User; 6             return user != null && user.IsInRole("Account"); 7         } 8          9         protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)10         {11             if (filterContext == null)12             {13                 return;14             }15 16             var path = filterContext.HttpContext.Request.Path;17             const string strUrl = "/Account/Login?returnUrl={0}";18             filterContext.HttpContext.Response.Redirect(string.Format(strUrl, HttpUtility.UrlEncode(path)), true);19         }20     }
　　Controller也完成了數(shù)據(jù)的傳遞，最后只剩下頁面了，先說OrderManage頁面，此頁面關(guān)鍵地方在于異步提交的表單：
　　提醒一下，要用Ajax提交需加上jquery.unobtrusive-ajax.min.js和@{ Html.RegisterMvcPagerScriptResource(); }引用，并且引用Jquery1.7以上版本，另外還需加上
　　其中每頁行數(shù)選擇的就自己在OrderManage寫一個下拉列表，再寫個腳本實現(xiàn)改變行數(shù)時改變表單里的id為pageSize的值，并觸發(fā)表單的提交即可，排序的也同理改變表單里的id為orderBy的值并觸發(fā)表單的提交即可。最后就只剩下局部頁面_OrderList了，這里的關(guān)鍵點在于：
　　至此，無刷新分頁功能已完成，來張效果圖吧
　　是不是和淘寶的有點像捏。
　　聲明，本文有參考http://www.webdiyer.com/mvcpager/，樣式也可以在http://www.webdiyer.com/mvcpager/demo/applyCSS/學(xué)習(xí)一下。歡迎探討共同學(xué)習(xí)喔。