MVC中實現加載更多 MVC中局部視圖的使用

須要實現的功能：

1. 數據太多想初次加載部分數據，在底部加上「加載更多」按鈕
2. 點擊後加載第二頁數據（從數據庫只取指定頁數據）後接在已有數據後面（相似於android中的下拉加載更多）
3. 每次加載時顯示「正在加載……」

網上找了一些方法，相似於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;//總記錄數

            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()中判斷是否經過分頁頁碼進來的，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" style="font-size: 12px;">@String.Format("{0:0.00}{1}", item.product.Price,"元")
                    </div>
                </div>
        </div>
        }
        <div>
            <div style="clear: both;">
            </div>
            <div id="nonedata" class="nonedata" style="display: none;">
                正在獲取數據，請稍候...
            </div>
            <div style="clear: both;">
            </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須要放在局部視圖中，不然頁碼沒法更新，因爲是要加載到原數據後面所以設置 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中要進行頁碼判斷，結合前臺數據，不然會出現頁碼不斷遞增的狀況。

 public ActionResult ProductListIndex(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex")
        {
            int recordCount = 0;//總記錄數
            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 )
            {
                //超過數據總數則返回空
                _productlist = new List<Product_Entity>();
            }
            return this.PartialView(viewName, _productlist);
        }

 

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

    <div id="goodslist" class="goodslist">

    </div>
    <div style="clear: both;">
    </div>
    <div id="nonedata" class="nonedata">
    正在獲取數據，請稍後……
    </div>
    <div style="clear: both;">
    </div>
    <div class="foot">
        <a href="javascript:void(0)" class="moregoods" id="goods">查看更多商品>></a>
    </div>

 

最後初次加載實現效果

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