您好,登錄后才能下訂單哦!
需要實現(xiàn)的功能:
數(shù)據(jù)太多想初次加載部分?jǐn)?shù)據(jù),在底部加上“加載更多”按鈕
點擊后加載第二頁數(shù)據(jù)(從數(shù)據(jù)庫只取指定頁數(shù)據(jù))后接在已有數(shù)據(jù)后面(類似于android中的下拉加載更多)
每次加載時顯示“正在加載……”
網(wǎng)上找了一些方法,類似于MvcPager分頁組件,用的是v1.5.0版,但后臺需要將分頁后的對象列表ToPagedList,需要在MvcPager源碼中加入public static PagedList<T> ToPagedList<T>(this IList<T> list, int pageIndex, int pageSize, int? totalCount)方法,控件詳見 MVC中局部視圖的使用 一文。
主頁面Index的View中添加局部視圖:
<div id="goodslist" class="goodslist"> @{Html.RenderPartial("_ProductListIndex", Model);} </div>
其中的Model是在Index返回Model
public ActionResult Index(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex") { int recordCount = 0;//總記錄數(shù) ProductDomain _productDomain = new ProductDomain(); List<Product_Entity> _productlist = _productDomain.GetProduct( pageIndex, out recordCount, 0, pageSize); PagedList<Product_Entity> _productPageList = _productlist.ToPagedList(pageIndex, pageSize, recordCount); if (base.Request.IsAjaxRequest()) { return this.PartialView(viewName, _productPageList); } return View(_productPageList); }
其中Request.IsAjaxRequest()中判斷是否通過分頁頁碼進(jìn)來的,ToPagedList需要用到改造后的MvcPager組件(見上文)
局部視圖_ProductListIndex
@using Webdiyer.WebControls.Mvc @model PagedList<Domain.Shop.Product_Entity><div id="ProductListDiv"> @if (Model != null && Model.Count > 0) { foreach (var item in Model) { <div class="goodslist_row"> <div class="goodslist_col01 item"> <div class="item_title">@item.product.title</div> <div class="item_price" >@String.Format("{0:0.00}{1}", item.product.Price,"元") </div> </div> </div> } <div> <div > </div> <div id="nonedata" class="nonedata" > 正在獲取數(shù)據(jù),請稍候... </div> <div > </div> <div class="foot"> @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 }) </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)在問題來了,似乎達(dá)到效果了,但最重要的問題是初次加載 不顯示“正在獲取數(shù)據(jù),請稍候...”,因為首次是直接由Model生成,沒有從頁碼進(jìn)去,無法執(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ù)列表 function LoadData(pageIndex){ $("#nonedata").show(1000); //默認(rèn)加載 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); } }); } //加載默認(rèn)數(shù)據(jù) LoadData(1);
$.ajax獲得數(shù)據(jù)后拼接,前后顯示隱藏加載提示,并初次加載由前臺執(zhí)行,這樣就可實現(xiàn)自己控制 加載提示了。
Control中要進(jìn)行頁碼判斷,結(jié)合前臺數(shù)據(jù),否則會出現(xiàn)頁碼不斷遞增的情況。
public ActionResult ProductListIndex(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex") { int recordCount = 0;//總記錄數(shù) ProductDomain _productDomain = new ProductDomain(); List<Product_Entity> _productlist = _productDomain.GetProduct( pageIndex, out recordCount, 0, pageSize); int totalPageCount = (int)Math.Ceiling(recordCount / (double)pageSize); if (pageIndex >totalPageCount ) { //超過數(shù)據(jù)總數(shù)則返回空 _productlist = new List<Product_Entity>(); } return this.PartialView(viewName, _productlist); }
在Index頁只需要指定加載的框架:
<div id="goodslist" class="goodslist"> </div> <div > </div> <div id="nonedata" class="nonedata"> 正在獲取數(shù)據(jù),請稍后…… </div> <div > </div> <div class="foot"> <a href="javascript:void(0)" class="moregoods" id="goods">查看更多商品>></a> </div>
最后初次加載實現(xiàn)效果
總的來說是利用異步獲得數(shù)據(jù)利用局部視圖裝載數(shù)據(jù)(不用自己拼字符串)然后加載到指定框架中。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。