本例使用表格Users(Uid,UserName,PassWord),数据库访问使用EF first code.
public class Users
{
[Key]
public int Uid { get; set; }
public string UserName { get; set; }
public string PassWord { get; set; } }
第一步:下载MVCPager.dll,添加到引用中。
MVCPager分页控件和AspNetPager分页控件是同一作者:陕西吴起娃,相信以前很多人都用过他的AspNetPager分页控件。MVCPager.dll可到他的个人主页去下载 http://www.webdiyer.com/
第二步:添加命名空间
打开view文件夹中下的web.config,添加两个命名空间。
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="Webdiyer.WebControls.Mvc"/>
<add namespace="ajaxDemo.Models"/>
</namespaces>
</pages>
做这一步的目的,是为view文件夹下的所有视图统一添加命名空间,就不需要每一个去单独添加。<add namespace="Webdiyer.WebControls.Mvc"/>这个命名空间,就是MVCPager分页控件的命名空间。<add namespace="ajaxDemo.Models"/>是您的项目下的Models。此处我的项目名称是ajaxDemo。
第三步:制作分部视图
ajax分页,是将数据分好后,放在一个分部视图中,然后再将分部视图放在主视图中。
根据模板,创建一个list的分部视图,我取名为UserPager.cshtml
@model PagedList<Users> //此处需要修改 @*//此表格放入一个DIV中,并设置ID,分页控件中需要用天此ID*@
<div id="data">
<table>
<tr>
<th>
用户名
</th>
<th>
密码
</th>
<th></th>
</tr> @foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
@Html.DisplayFor(modelItem => item.PassWord)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Uid }) |
@Html.ActionLink("Details", "Details", new { id=item.Uid }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Uid })
</td>
</tr>
}
</table>
@*//此处添加分页控件*@
@Html.AjaxPager(
Model,
new PagerOptions { PageIndexParameterName = "page" },
new AjaxOptions { UpdateTargetId = "data" }
)
</div>
主要修改三个地方:
1、最开始一行修改为@model PagedList<Users>,Users为您的实体名。
2、将表格<table>放入到一个div中,并为此DIV设定一个ID,后面放置分页控件时会用到此ID。
3、在表格<table>的后面,放置分页控件,我设定的分页参数为page,需要分页的区域为data.
至此,分部视图制作完成。
第四步:制作主视图的控制器
我将主视图命名为UserList
public ActionResult UserList(int? page)
{
PagedList<Users> u = db.Users.OrderBy(c=>c.Uid).ToPagedList (page ?? , );
if (Request.IsAjaxRequest())
return PartialView("UserPager", u);
return View(u);
}
分页参数是page,是前面放控件时设定好的,默认显示第1页,每页显示10条记录。
注意,在查询数据时,一定要用OrderBy排序,否则会出错。因为作者用的是linq的take和skip函数来进行分页的,用这两个函数前必须要排序。
第五部:制作视图UserList.cshtml
分部视图是不能独立显示的,必须放在其它主视图中显示。此例,我是将分部视图UserPager.cshtml放在主视图UserList.cshtml中显示。
分部视图主要用来分页,主视图主要用来调用分部显示显示数据。
@model PagedList<Users>
@{
ViewBag.Title = "UserList";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>用户列表</h2>
@{Html.RenderPartial("UserPager",Model);}
可根据控件器,创建空视图,添加第一行和最后一行,最后一行即是调用分部视图。
至此,分页完成。
MVC3学习:利用mvc3+ajax结合MVCPager实现分页的更多相关文章
-
MVC3学习:利用mvc3+ajax实现全选和批量删除
本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...
-
MVC3学习:利用mvc3+ajax实现级联下拉列表框
本例使用的是EF first code操作数据库. 一.准备数据库 级联下拉列表框,比较经典的就是省市数据表,在Model里同时创建三个类:province.cs.city.cs和dropContex ...
-
在ASP.NET MVC3 中利用Jsonp跨域访问
在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...
-
MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
-
ASP.NET MVC3入门教程之ajax交互
本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=100&extra=page%3D1 随着web技术的不断发展与 ...
-
【Spring学习笔记-MVC-3.1】SpringMVC返回Json数据-方式1-扩展
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
-
【Spring学习笔记-MVC-3】SpringMVC返回Json数据-方式1
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
-
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
-
学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
随机推荐
-
关于mvc5+EF里面的db.Entry(model).State = EntityState.Modified报错问题
最近在使用mvc5+EF的的时候用到了这句话 db.Entry(model).State = EntityState.Modified 看上去很简单的修改数据,但是一直报错,说是key已经存在,不能修 ...
-
maven源码分析- mvn.bat分析
第一次知道MAVEN是在2008年,当时想分析geoserver这个开源项目,发现该项目采用了maven进行项目管理,当时粗略的学习了一下.真正在工作中使用是在09年下半年,个人感觉使用起来还是非常好 ...
-
DP:Skiing(POJ 1088)
北大教你怎么滑雪 题目是中文的,要读懂题目其实不难 其实这道题挺经典的,我们这样想,他最终要找到一个最大值,这个时候我们就想到要用动态规划 那怎么用呢?我们同时这样想,由于滑雪的最高点我们不能立马找 ...
-
JS页面跳转 神器! window.href window.open
window.open 打开页面, 网址为新的网址 window.href 为打开本网址的链接, 为网站URL+传入的URL
-
Android EditView 阻止软键盘自动弹出
最近再做一个查询内的小应用,界面最上面是一个EditText查询框,进行Activity后,总会弹起软键盘.这样就挡住了查询框下面的其他查询条件 控件,感觉很不友好.所以现在要做的就是在进入Activ ...
-
[每日一题] OCP1z0-047 :2013-07-30 表连接――内联视图当作表使用
用sys用户登录,给oe用户授权dba,以便可以用oe用户查看执行计划: oe@OCM> conn / as sysdba Connected. sys@OCM> grant dba to ...
-
关于ie6中使用css滤镜[_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;images/*.png&#39;,sizingMethod=&#39;scale&#39;)]后链接无法点击的问题
RT,我做的一个效果是试用png图做背景,通过_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png' ...
-
Android重力加速度传感器数据去噪
public void onSensorChanged(SensorEvent event) { final float alpha = 0.8; gravity[0] = alpha * gravi ...
-
SqlServer和Oracle中一些常用的sql语句8 触发器和事务
--创建和执行事后触发器 --更新仓库备份表中记录时自动创建数据表且插入三条记录 create trigger db_trigger1 on 仓库备份 for update as begin if E ...
-
基于Hexo+Node.js+github+coding搭建个人博客——基础篇
附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...