MVC實現加載更多

MVC中實現加載更多

 

做者 歡醉 關注

2016.01.25 08:48 字數 945 閱讀 136評論 0喜歡 2

須要實現的功能：

數據太多想初次加載部分數據，在底部加上「加載更多」按鈕

點擊後加載第二頁數據（從數據庫只取指定頁數據）後接在已有數據後面（相似於android中的下拉加載更多）

每次加載時顯示「正在加載……」

網上找了一些方法，相似於MvcPager分頁組件，用的是v1.5.0版，但後臺須要將分頁後的對象列表ToPagedList，須要在MvcPager源碼中加入public static PagedList ToPagedList(this IList list, int pageIndex, int pageSize, int? totalCount)方法，控件詳見MVC中局部視圖的使用一文。

主頁面Index的View中添加局部視圖：

@{Html.RenderPartial("_ProductListIndex", Model);}

其中的Model是在Index返回Model

publicActionResult Index(intpageIndex =1,intpageSize =4,stringviewName ="_ProductListIndex")

{intrecordCount =0;//總記錄數ProductDomain _productDomain=newProductDomain();

List _productlist = _productDomain.GetProduct( pageIndex,outrecordCount,0, pageSize);

PagedList _productPageList =_productlist.ToPagedList(pageIndex, pageSize, recordCount);if(base.Request.IsAjaxRequest())

{returnthis.PartialView(viewName, _productPageList);

}returnView(_productPageList);

}

其中Request.IsAjaxRequest()中判斷是否經過分頁頁碼進來的，ToPagedList須要用到改造後的MvcPager組件（見上文）

局部視圖_ProductListIndex

@using Webdiyer.WebControls.Mvc

@model PagedList@if (Model != null && Model.Count > 0)

{

foreach (var item in Model)

{@item.product.title@String.Format("{0:0.00}{1}", item.product.Price,"元")}

 

正在獲取數據，請稍候...@Html.AjaxPager(Model, new PagerOptions                  {                      Id = "divPage",ShowNumericPagerItems = false,

 

ShowPrev = false,

ShowFirstLast = false,

NextPageText = "查看更多商品>>",ShowDisabledPagerItems = false,                      AlwaysShowFirstLastPageNumber = false,                      PageIndexParameterName = "pageIndex",                      NumericPagerItemCount = 3,                      CssClass = "moregoods",                      SeparatorHtml = ""                  }, new AjaxOptions { UpdateTargetId = "ProductListDiv",LoadingElementId = "nonedata", LoadingElementDuration = 1000, InsertionMode = InsertionMode.InsertAfter})}

注意幾點：

@Html.AjaxPager須要放在局部視圖中，不然頁碼沒法更新，因爲是要加載到原數據後面所以設置InsertionMode =InsertionMode.InsertAfter

其中注意的是ShowPrev = false不然翻頁後會顯示「上一頁」 ，@Html.AjaxPager其它屬性可 下載MvcPager源碼PagerTest.rar查看

但最重要的是還須要更改jquery.unobtrusive-ajax.js源碼，不然會出現多個 「查看更多」

須要更改後的jquery.unobtrusive-ajax.js下載

點擊查看更多時效果

如今問題來了，彷佛達到效果了，但最重要的問題是初次加載 不顯示「正在獲取數據，請稍候...」，由於首次是直接由Model生成，沒有從頁碼進去，沒法執行beforeSend函數。

觀察jquery.unobtrusive-ajax源碼，其原理是異步從後臺取數據而後通過模板解析後拼接到指定元素後面。

下面棄用MvcPager組件，本身改裝，利用Get異步得到數據：

js：

var _pageIndex = 1;

$("#goods").click(function () {

LoadData(_pageIndex);

});

//按傳參加載數據列表

function LoadData(pageIndex){

$("#nonedata").show(1000);

//默認加載

var href = "ProductListIndex";

if(pageIndex !=null && pageIndex !=""){

href+="&pageIndex="+pageIndex;                }                $.ajax({                        url:href,                        type:"GET",                        success: function (data, status, xhr) {                          if(data.indexOf('nonedata') !=-1){                              $("#goods").hide(1000);                              if(_pageIndex==1){                                $("#goodslist").append(data);                              }                          }else{                              $("#goodslist").append(data);                              _pageIndex ++;                          }                        },                        complete: function () {                          $("#nonedata").hide(1000);                        }                });                            }                                //加載默認數據LoadData(1);

$.ajax得到數據後拼接，先後顯示隱藏加載提示，並初次加載由前臺執行，這樣就可實現本身控制加載提示了。

Control中要進行頁碼判斷，結合前臺數據，不然會出現頁碼不斷遞增的狀況。

publicActionResult ProductListIndex(intpageIndex =1,intpageSize =4,stringviewName ="_ProductListIndex")

{intrecordCount =0;//總記錄數ProductDomain _productDomain =newProductDomain();

List _productlist = _productDomain.GetProduct( pageIndex,outrecordCount,0, pageSize);inttotalPageCount = (int)Math.Ceiling(recordCount / (double)pageSize);if (pageIndex >totalPageCount )

{

//超過數據總數則返回空

_productlist = new List();

}returnthis.PartialView(viewName, _productlist);

}

在Index頁只須要指定加載的框架：

正在獲取數據，請稍後……查看更多商品>>

最後初次加載實現效果

總的來講是利用異步得到數據利用局部視圖裝載數據（不用本身拼字符串）而後加載到指定框架中。