Implement load more in MVC

Features that need to be implemented:

1. Too much data to load part of the data for the first time, add "load more" button at the bottom
2. Click to load the second page of data (from the database to fetch only the specified page data) followed by the existing data (similar to the Android pull-down load more)
3. Show "Loading ..." every time you load

Online to find some methods, similar to the Mvcpager paging component, with the v1.5.0 version, but the background needs to be paged object list topagedlist, need to add public static pagedlist<t> Mvcpager source Topagedlist<t> (this ilist<t> list, int pageIndex, int pageSize, int, totalcount) methods, controls are described in the use of local views in MVC.

Add a detail view to the view of the main page index:

    <div id= "goodslist" class= "goodslist" >       @{html.renderpartial ("_productlistindex", Model);}    </div>

The model is returned to the model at index

Public ActionResult Index (int pageIndex = 1, int pageSize = 4, String viewName = "_productlistindex")        {            int record Count = 0;//Total number of records            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);        }     

where Request.isajaxrequest () determines whether to enter through the pagination page number, topagedlist need to use the modified Mvcpager components (see above)

Detail View _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 C lass= "Goodslist_row" > <div class= "goodslist_col01 item" > <div class= "it Em_title "> @item .product.title</div> <div class=" Item_price "style=" FONT-SIZE:12PX; "        > @String. Format ("{0:0.00}{1}", Item.product.Price, "meta") </div> </div> </div>} <div> <div style= "Clear:both;" > </div> <div id= "Nonedata" class= "Nonedata" style= "Display:none;" > Getting data, please wait ... </div> <div style= "Clear:both;"  > </div> <div class= "Foot" > @Html. Ajaxpager (Model, New pageroptions                 {Id = "divpage", Shownumericpageritems = False, Showprev = False, Showfirstlast = false, NextPageText = "See more Products >&                       gt; ", Showdisabledpageritems = False, Alwaysshowfirstlastpagenumber = False,                       Pageindexparametername = "PageIndex", Numericpageritemcount = 3, CssClass = "Moregoods", separatorhtml = ""}, new Ajaxoptions {Updatetarg Etid = "Productlistdiv", Loadingelementid = "Nonedata", loadingelementduration = +, Insertionmode = InsertionMode.Inse Rtafter}) </div> </div>}</div>

Note the points:

@Html. Ajaxpager needs to be placed in the detail view, otherwise the page number cannot be updated because it is to be loaded after the original data so set Insertionmode = Insertionmode.insertafter

The note is Showprev = False otherwise the page will display "previous", @Html. Ajaxpager Other properties can be downloaded Mvcpager source Pagertest.rar view

But the most important is also need to change the Jquery.unobtrusive-ajax.js source code, or there will be multiple "see more"

Need to change the jquery.unobtrusive-ajax.js download

　　

Click to see more Effects

Now that the problem seems to have been achieved, the most important issue is that the initial load does not show "fetching data, please wait ..." because the first time is generated directly from the model, not from the page number, unable to execute the Beforesend function.

Observe the Jquery.unobtrusive-ajax source code, the principle is to asynchronously from the background to fetch the data and then after the template parsing and stitching to the specified element behind.

The following deprecated Mvcpager components, self-modification, with get asynchronous data:

Js:

          var _pageindex = 1;            $ ("#goods"). Click (function () {loaddata (_pageindex);            });                 Press to upload data list function LoadData (pageIndex) {$ ("#nonedata"). Show (1000);                Default load var href = "Productlistindex";                if (PageIndex!=null && pageIndex! = "") {href+= "&pageindex=" +PAGEINDEX; } $.ajax ({url:href, type: "GET", Succe                              Ss: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);                            }                }); }//load default data LoadData (1);

$.ajax get data after stitching, front and rear display hidden loading prompt, and the initial load by the foreground execution, so that you can implement their own control loading prompt.

Control in order to judge the page number, combined with the foreground data, otherwise there will be a continuous increase in page numbers.

Public ActionResult productlistindex (int pageIndex = 1, int pageSize = 4, String viewName = "_productlistindex")        {
   
    int RecordCount = 0;//Total number of records            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)            {                //exceeds the total data count return null                _productlist = new list<product_entity> ();            }            return this. Partialview (ViewName, _productlist);        }
   

You only need to specify the frame to load on the index page:

    <div id= "goodslist" class= "goodslist" >    </div>    <div style= "Clear:both;" >    </div>    <div id= "Nonedata" class= "Nonedata" >    getting Data, please later    ... </div>    <div style= "Clear:both;" >    </div>    <div class= "foot" >        <a href= "javascript:void (0)" class= "Moregoods" id= " Goods "> see more Products >></a>    </div>

Final initial load implementation effect

In general, the use of asynchronous data to load data using a local view (without having to spell the string yourself) and then loading into the specified frame.

Implement load more in MVC