Implement load more in MVC

Source: Internet
Author: User

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:

    <id= "Goodslist"  class= "goodslist">       @{ Html.renderpartial ("_productlistindex", Model);}     </ Div >

The model is returned to the model at index

 PublicActionResult Index (intPageIndex =1,intPageSize =4,stringViewName ="_productlistindex")        {            intRecordCount =0;//Total Record CountProductdomain _productdomain=NewProductdomain (); List<Product_Entity> _productlist = _productdomain.getproduct (PageIndex, outRecordCount,0, pageSize); Pagedlist<Product_Entity> _productpagelist =_productlist.            Topagedlist (PageIndex, PageSize, RecordCount); if(Base. Request.isajaxrequest ()) {return  This.            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 pagedlist<Domain. Shop.product_entity><DivID= "Productlistdiv">@if (Model = null && model.count > 0) {foreach (var item in Model) { <Divclass= "Goodslist_row">                <Divclass= "GOODSLIST_COL01 Item">                         <Divclass= "Item_title">@item. Product.title</Div>                    <Divclass= "Item_price"style= "FONT-SIZE:12PX;">@String. Format ("{0:0.00}{1}", Item.product.Price, "meta")</Div>                </Div>        </Div>        }        <Div>            <Divstyle= "Clear:both;">            </Div>            <DivID= "Nonedata"class= "Nonedata"style= "Display:none;">getting data, please wait ...</Div>            <Divstyle= "Clear:both;">            </Div>            <Divclass= "Foot">@Html. Ajaxpager (Model, new pageroptions {Id = "divpage", Shownumericpageritems = False, Showprev = False, Showfir  Stlast = False, NextPageText = "View More Products >>", showdisabledpageritems = False, Alwaysshowfirstlastpagenumber = false, Pageindexparametername = "Pagei                       Ndex ", Numericpageritemcount = 3, CssClass =" Moregoods ", separatorhtml = ""}, new Ajaxoptions {Updatetargetid = "Productlistdiv", Loadingelementid = "Non Edata ", loadingelementduration = +, Insertionmode = Insertionmode.insertafter })</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 behind 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 :


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 (1                        000);                            }                }); }//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 Record CountProductdomain _productdomain =NewProductdomain (); List<Product_Entity> _productlist = _productdomain.getproduct (PageIndex, outRecordCount,0, pageSize); intTotalpagecount = (int) math.ceiling (RecordCount/(Double) pageSize); if (PageIndex >totalpagecount) {//exceeds the total number of data returns null _productlist = new list<            Product_entity> (); }            return  This.        Partialview (ViewName, _productlist); }

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

    <DivID= "Goodslist"class= "Goodslist">    </Div>    <Divstyle= "Clear:both;">    </Div>    <DivID= "Nonedata"class= "Nonedata">getting data, please later ...</Div>    <Divstyle= "Clear:both;">    </Div>    <Divclass= "Foot">        <ahref= "javascript:void (0)"class= "Moregoods"ID= "goods">View 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.