欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

MVC中實(shí)現(xiàn)加載更多-創(chuàng)新互聯(lián)

需要實(shí)現(xiàn)的功能:

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程,更有寧陽(yáng)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
  1. 數(shù)據(jù)太多想初次加載部分?jǐn)?shù)據(jù),在底部加上“加載更多”按鈕

  2. 點(diǎn)擊后加載第二頁(yè)數(shù)據(jù)(從數(shù)據(jù)庫(kù)只取指定頁(yè)數(shù)據(jù))后接在已有數(shù)據(jù)后面(類似于android中的下拉加載更多)

  3. 每次加載時(shí)顯示“正在加載……”

網(wǎng)上找了一些方法,類似于MvcPager分頁(yè)組件,用的是v1.5.0版,但后臺(tái)需要將分頁(yè)后的對(duì)象列表ToPagedList,需要在MvcPager源碼中加入public static PagedList<T> ToPagedList<T>(this IList<T> list, int pageIndex, int pageSize, int? totalCount)方法,控件詳見(jiàn)  MVC中局部視圖的使用 一文。

主頁(yè)面Index的View中添加局部視圖:

    <div id="goodslist" class="goodslist">
       @{Html.RenderPartial("_ProductListIndex", Model);}    </div>

其中的Model是在Index返回Model

MVC中實(shí)現(xiàn)加載更多

public ActionResult Index(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex")
        {            int recordCount = 0;//總記錄數(shù)
            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);
        }

MVC中實(shí)現(xiàn)加載更多

其中Request.IsAjaxRequest()中判斷是否通過(guò)分頁(yè)頁(yè)碼進(jìn)來(lái)的,ToPagedList需要用到改造后的MvcPager組件(見(jiàn)上文)

局部視圖_ProductListIndex

MVC中實(shí)現(xiàn)加載更多

@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" >@String.Format("{0:0.00}{1}", item.product.Price,"元")                    </div>
                </div>
        </div>
        }        <div>
            <div >
            </div>
            <div id="nonedata" class="nonedata" >
                正在獲取數(shù)據(jù),請(qǐng)稍候...            </div>
            <div >
            </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>

MVC中實(shí)現(xiàn)加載更多

注意幾點(diǎn):

@Html.AjaxPager需要放在局部視圖中,否則頁(yè)碼無(wú)法更新,由于是要加載到原數(shù)據(jù)后面因此設(shè)置 InsertionMode = InsertionMode.InsertAfter

其中注意的是ShowPrev = false 否則翻頁(yè)后會(huì)顯示“上一頁(yè)” ,@Html.AjaxPager其它屬性可 下載MvcPager源碼PagerTest.rar 查看

但最重要的是還需要更改jquery.unobtrusive-ajax.js源碼,否則會(huì)出現(xiàn)多個(gè) “查看更多”

MVC中實(shí)現(xiàn)加載更多

  需要更改后的jquery.unobtrusive-ajax.js下載

MVC中實(shí)現(xiàn)加載更多

  

   點(diǎn)擊查看更多時(shí)效果

MVC中實(shí)現(xiàn)加載更多

現(xiàn)在問(wèn)題來(lái)了,似乎達(dá)到效果了,但最重要的問(wèn)題是初次加載 不顯示“正在獲取數(shù)據(jù),請(qǐng)稍候...”,因?yàn)槭状问侵苯佑蒑odel生成,沒(méi)有從頁(yè)碼進(jìn)去,無(wú)法執(zhí)行beforeSend函數(shù)。

觀察jquery.unobtrusive-ajax源碼,其原理是異步從后臺(tái)取數(shù)據(jù)然后經(jīng)過(guò)模板解析后拼接到指定元素后面。

下面棄用MvcPager組件,自己改裝,利用Get異步獲得數(shù)據(jù):

js:

MVC中實(shí)現(xiàn)加載更多

          var _pageIndex = 1;
            $("#goods").click(function () {
             LoadData(_pageIndex);
            });

            //按傳參加載數(shù)據(jù)列表
            function LoadData(pageIndex){
                $("#nonedata").show(1000);
                 //默認(rèn)加載
                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);
                        }
                });
                
            }        
            
            //加載默認(rèn)數(shù)據(jù)   
            LoadData(1);

MVC中實(shí)現(xiàn)加載更多

$.ajax獲得數(shù)據(jù)后拼接,前后顯示隱藏加載提示,并初次加載由前臺(tái)執(zhí)行,這樣就可實(shí)現(xiàn)自己控制 加載提示了。

Control中要進(jìn)行頁(yè)碼判斷,結(jié)合前臺(tái)數(shù)據(jù),否則會(huì)出現(xiàn)頁(yè)碼不斷遞增的情況。

MVC中實(shí)現(xiàn)加載更多

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

MVC中實(shí)現(xiàn)加載更多

在Index頁(yè)只需要指定加載的框架:

MVC中實(shí)現(xiàn)加載更多

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

    </div>
    <div >
    </div>
    <div id="nonedata" class="nonedata">
    正在獲取數(shù)據(jù),請(qǐng)稍后……    </div>
    <div >
    </div>
    <div class="foot">
        <a href="javascript:void(0)" class="moregoods" id="goods">查看更多商品>></a>
    </div>

MVC中實(shí)現(xiàn)加載更多

最后初次加載實(shí)現(xiàn)效果

MVC中實(shí)現(xiàn)加載更多

總的來(lái)說(shuō)是利用異步獲得數(shù)據(jù)利用局部視圖裝載數(shù)據(jù)(不用自己拼字符串)然后加載到指定框架中。

MVC中實(shí)現(xiàn)加載更多

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題:MVC中實(shí)現(xiàn)加載更多-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://www.chinadenli.net/article14/dgcige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷ChatGPT建站公司外貿(mào)網(wǎng)站建設(shè)關(guān)鍵詞優(yōu)化品牌網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站