【移動應用開發(fā)技術(shù)】MVC中實現(xiàn)加載更多

【移動應用開發(fā)技術(shù)】MVC中實現(xiàn)加載更多

需要實現(xiàn)的功能：

數(shù)據(jù)太多想初次加載部分數(shù)據(jù)，在底部加上“加載更多”按鈕

點擊后加載第二頁數(shù)據(jù)（從數(shù)據(jù)庫只取指定頁數(shù)據(jù)）后接在已有數(shù)據(jù)后面（類似于android中的下拉加載更多）

每次加載時顯示“正在加載……”

網(wǎng)上找了一些方法，類似于MvcPager分頁組件，用的是v1.5.0版，但后臺需要將分頁后的對象列表ToPagedList，需要在MvcPager源碼中加入publicstaticPagedList<T>ToPagedList<T>(thisIList<T>list,intpageIndex,intpageSize,int?totalCount)方法，控件詳見

MVC中局部視圖的使用

一文。

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

<divid="goodslist"class="goodslist">

@{Html.RenderPartial("_ProductListIndex",Model);}</div>

其中的Model是在Index返回Model

publicActionResultIndex(intpageIndex=1,intpageSize=4,stringviewName="_ProductListIndex")

{intrecordCount=0;//總記錄數(shù)

ProductDomain_productDomain=newProductDomain();

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

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

{returnthis.PartialView(viewName,_productPageList);

}returnView(_productPageList);

}

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

局部視圖_ProductListIndex

@usingWebdiyer.WebControls.Mvc

@modelPagedList<Domain.Shop.Product_Entity><divid="ProductListDiv">

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

{

foreach(variteminModel)

{<divclass="goodslist_row">

<divclass="goodslist_col01item">

<divclass="item_title">@duct.title</div>

<divclass="item_price">@String.Format("{0:0.00}{1}",duct.Price,"元")</div>

</div>

</div>

}<div>

<div>

</div>

<divid="nonedata"class="nonedata">

正在獲取數(shù)據(jù)，請稍候...</div>

<div>

</div>

<divclass="foot">

@Html.AjaxPager(Model,newPagerOptions

{

Id="divPage",ShowNumericPagerItems=false,

ShowPrev=false,

ShowFirstLast=false,

NextPageText="查看更多商品>>",

ShowDisabledPagerItems=false,

AlwaysShowFirstLastPageNumber=false,

PageIndexParameterName="pageIndex",

NumericPagerItemCount=3,

CssClass="moregoods",

SeparatorHtml=""

},newAjaxOptions{UpdateTargetId="ProductListDiv",LoadingElementId="nonedata",LoadingElementDuration=1000,InsertionMode=InsertionMode.InsertAfter})</div>

</div>

}</div>

注意幾點：

@Html.AjaxPager需要放在局部視圖中，否則頁碼無法更新，由于是要加載到原數(shù)據(jù)后面因此設(shè)置

InsertionMode=

InsertionMode.InsertAfter

其中注意的是ShowPrev=false

否則翻頁后會顯示“上一頁”，@Html.AjaxPager其它屬性可下載MvcPager源碼PagerTest.rar

查看

但最重要的是還需要更改jquery.unobtrusive-ajax.js源碼，否則會出現(xiàn)多個“查看更多”

需要更改后的jquery.unobtrusive-ajax.js下載

點擊查看更多時效果

現(xiàn)在問題來了，似乎達到效果了，但最重要的問題是初次加載不顯示“正在獲取數(shù)據(jù)，請稍候...”，因為首次是直接由Model生成，沒有從頁碼進去，無法執(zhí)行beforeSend函數(shù)。

觀察jquery.unobtrusive-ajax源碼，其原理是異步從后臺取數(shù)據(jù)然后經(jīng)過模板解析后拼接到指定元素后面。

下面棄用MvcPager組件，自己改裝，利用Get異步獲得數(shù)據(jù)：

js：

var_pageIndex=1;

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

LoadData(_pageIndex);

});

//按傳參加載數(shù)據(jù)列表

functionLoadData(pageIndex){

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

//默認加載

varhref="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);

}

});

}

//加載默認數(shù)據(jù)

LoadData(1);

$.ajax獲得數(shù)據(jù)后拼接，前后顯示隱藏加載提示，并初次加載由前臺執(zhí)行，這樣就可實現(xiàn)自己控制

加載提示了。

Control中要進行頁碼判斷，結(jié)合前臺數(shù)據(jù)，否則會出現(xiàn)頁碼不斷遞增的情況。

publicActionResultProductListIndex(intpageIndex=1,intpageSize=4,stringviewName="_ProductListIndex")

{intrecordCount=0;//總記錄數(shù)

ProductDomain_productDomain=newProductDomain();

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