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页只须要指定加载的框架：

正在获取数据，请稍后……查看更多商品>>

最后初次加载实现效果

总的来讲是利用异步得到数据利用局部视图装载数据（不用本身拼字符串）而后加载到指定框架中。