MVC3学习:利用mvc3+ajax结合MVCPager实现分页
本例使用表格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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@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 ?? 1, 10); 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);}
可根据控件器,创建空视图,添加第一行和最后一行,最后一行即是调用分部视图。
至此,分页完成。
相关文章
- 从零开始学习jQuery (六) AJAX快餐
- ExtJS学习笔记2:响应事件、使用AJAX载入数据
- 解决 ajax 不能下载文件的问题
- PHP - AJAX 与 MySQL
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
- bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX
- ajax
- jQuery Ajax 确定 form 表单 submit 提交成功
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
- php ajax返回无故刷新页面
- 解释 AJAX 中请求的不同就绪状态
- JS之ajax面试相关
- asp: AJAX Database
- html 页面 ajax 方法显示遮罩
- ajax实现返回数据是html类型的跨域问题
- 为了懒,我痛心学习Ajax
- 验证loadrunner对Ajax内容的校验
- Ajax.BeginForm()实现ajax无刷新提交
- 16.ajax_case07
- JavaScript之Ajax
- C#WebForm里面aspx,ajax请求后台。。。
- 细谈 axios和ajax区别