MVC中实现 加载更多...
需要实现的功能:
- 数据太多想初次加载部分数据,在底部加上“加载更多”按钮
- 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多)
- 每次加载时显示“正在加载……”
网上找了一些方法,类似于MvcPager分页组件,用的是v1.5.0版,但后台需要将分页后的对象列表ToPagedList,需要在MvcPager源码中加入public static PagedList<T> ToPagedList<T>(this IList<T> list, int pageIndex, int pageSize, int? totalCount)方法,控件详见 MVC中局部视图的使用 一文。
主页面Index的View中添加局部视图:
<div id="goodslist" class="goodslist">@{Html.RenderPartial("_ProductListIndex", Model);}</div>
其中的Model是在Index返回Model
public ActionResult Index(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex"){int recordCount = 0;//总记录数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);}
其中Request.IsAjaxRequest()中判断是否通过分页页码进来的,ToPagedList需要用到改造后的MvcPager组件(见上文)
局部视图_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 class="goodslist_row"><div class="goodslist_col01 item"> <div class="item_title">@item.product.title</div><div class="item_price" style="font-size: 12px;">@String.Format("{0:0.00}{1}", item.product.Price,"元")</div></div></div>}<div><div style="clear: both;"></div><div id="nonedata" class="nonedata" style="display: none;">正在获取数据,请稍候...</div><div style="clear: both;"></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>
注意几点:
@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中要进行页码判断,结合前台数据,否则会出现页码不断递增的情况。
public ActionResult ProductListIndex(int pageIndex = 1, int pageSize = 4, string viewName = "_ProductListIndex"){int recordCount = 0;//总记录数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 ){//超过数据总数则返回空_productlist = new List<Product_Entity>();}return this.PartialView(viewName, _productlist);}
在Index页只需要指定加载的框架:
<div id="goodslist" class="goodslist"></div><div style="clear: both;"></div><div id="nonedata" class="nonedata">正在获取数据,请稍后……</div><div style="clear: both;"></div><div class="foot"><a href="javascript:void(0)" class="moregoods" id="goods">查看更多商品>></a></div>
最后初次加载实现效果
总的来说是利用异步获得数据利用局部视图装载数据(不用自己拼字符串)然后加载到指定框架中。
转载于:https://www.cnblogs.com/ajunForNet/p/4145289.html
MVC中实现 加载更多...相关推荐
- iOS开发UI篇-在UItableview中实现加载更多功能
iOS开发UI篇-在UItableview中实现加载更多功能 一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时 ...
- js页面中实现加载更多功能
js页面中实现加载更多功能 分页-如何实现加载更多功能,目前的在很多网站上使用的加载更多功能中,使用最多的是iscroll.js实现的上拉加载更多.下拉刷新功能.但是iscroll.js本身并没有集成 ...
- OS开发UI篇—在UItableview中实现加载更多功能
一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时候,主页面(主控制器 ...
- 微信小程序中的加载更多(即列表分页)
app.json中: "window": {"enablePullDownRefresh": true //是否开启当前页面下拉刷新 } wxml中: < ...
- Element-UI(一) 表格table中实现“加载更多”的功能
要实现这个功能,需要使用table slot这个属性 1.创建页面模板 <div class="cnd-table"><el-table :data=" ...
- android 加载更多,如何在android中实现加载更多的recyclerview
我想在Recyclerview中实现更多的加载.这是代码. 代码来自 github. https://gist.github.com/ssinss/e06f12ef66c51252563e MainA ...
- python selenium 点击加载更多_如何等待页面加载,然后按selenium中的“加载更多”按钮?...
你可能会在页面底部看到谷歌广告.在from selenium import webdriver from selenium.webdriver.common.by import By from sel ...
- html加载更多实现代码,如何实现点击“加载更多”?
看你的样子用的应该是java写的后端(, ...).为了实现加载更多,其实就是点击按钮后在不刷新页面的情况下添加更多的内容显示到当前页面中.用ajax拉取数据,前提是后端能够根据条件(例如:页号.分类 ...
- Listview中使用线程实现无限加载更多项目的功能
相关搜索:"Listview 加载更多", 在现在的SINA微博或者象twitter,dzone等网站中,当加载一个很长的列表时,往往都是 先加载部分内容,然后当用户用拖拉条往下拖 ...
最新文章
- python的继承用法_【后端开发】python中继承有什么用法?python继承的用法详解
- 构建高性能ASP.NET应用的12点建议
- HTML5之地理信息应用 获取自己的位置
- 什么函数不能声明为虚函数
- linux硬盘检测工具,CrazyDiskInfo 硬盘检测工具 Linux版 | 厘米天空
- PHP_CodeIgniter _remap重新定义方法
- 周子学辞任中芯国际董事长
- 公司这套架构统一处理try...catch这么香,求求你不要再满屏写了,再发现扣绩效!...
- reconnecting-websocket.min.js
- POSIX 与 CMSIS 标准
- cmd关闭计算机指令,取消CMD自动关机的命令是什么
- 【其它】怎样开启Win7快速启动栏
- 水泥行业工业互联网平台(CCPS)解决方案
- 由海天瑞声支持,全球最大多领域英语开源数据集发布
- 溯源供应链引擎APS的历史(蔡颖)
- 【ROM制作工具】小白轻松一键搞定纯净ROM刷机包
- Android 仿小米的全面屏手势-侧滑返回
- 百度地图总结第三篇之定位(我的位置)
- 入门到放弃之 NVMe-MI --- 协议简介
- 重定向和转发的区别+使用情景