MVC implementation Load More

Implement load more in MVCauthor Huanhuan attention 2016.01.25 08:48 words 945 Read 136 Comments 0 likes 2

Features that need to be implemented:

Too much data to load part of the data for the first time, add "load more" button at the bottom

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)

Show "Loading ..." every time you load

Online 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 Mvcpager source (This IList 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:

@{html.renderpartial ("_productlistindex", Model);}

The model is returned to the model at index

Publicactionresult Index (intpageindex =1,intpagesize =4,stringviewname = "_productlistindex")

{Intrecordcount =0;//total number of records 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);

}

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 [email protected] (model! = NULL && model.count > 0)

{

foreach (var item in Model)

{@[email protected] ("{0:0.00}{1}", Item.product.Price, "meta")}

Getting data, please wait [email protected] (Model, new pageroptions {Id = "divpage", Shownumericpage Ritems = False,

Showprev = False,

Showfirstlast = False,

NextPageText = "See more goods >>", Showdisabledpageritems = False, Alwaysshowfirstlastpagenumber = False                      , Pageindexparametername = "PageIndex", Numericpageritemcount = 3, CssClass = "Moregoods", separatorhtml = ""}, new Ajaxoptions {Updatetarget Id = "Productlistdiv", Loadingelementid = "Nonedata", loadingelementduration = +, Insertionmode = Insertionmode.insertafter})}

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);

});

Download data list by upload

function LoadData (pageIndex) {

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

Default load

var href = "Productlistindex";

if (PageIndex!=null && pageIndex! = "") {

href+= "&pageindex=" +pageindex;               }        &NB Sp       $.ajax ({                        URL:HREF,                         type: "GET",                        success:function (data, status, XHR) {      &NBSP ;                   if (data.indexof (' Nonedata ')!=-1) {      &NBS P                       $ ("#goods"). Hide (; )     & nbsp                       if (_pageindex==1) {                                $ ("#goodslist") append (data);  & nbsp &nbSp                        }          &N Bsp              }else{                  &NBS P           $ ("#goodslist"). Append (data);                &N Bsp             _pageindex ++;                  &NB Sp      }                       },                        complete:function () {        & nbsp                 $ ("#nonedata"). Hide (; )         &NBSP ;            }               });    &nbsp                      }            &N Bsp                  //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.

Publicactionresult Productlistindex (intpageindex =1,intpagesize =4,stringviewname = "_ProductListIndex")

{Intrecordcount =0;//total number of records Productdomain _productdomain =newproductdomain ();

List _productlist = _productdomain.getproduct (pageindex,outrecordcount,0, pageSize); inttotalpagecount = (int) Math.ceiling (RecordCount/(double) pageSize); if (PageIndex >totalpagecount)

{

More than the total number of data returned empty

_productlist = new List ();

}returnthis. Partialview (ViewName, _productlist);

}

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

Getting data, please later ... View More Products >>

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.

MVC implementation Load More