此项目的功能为1.将数据分页显示,2.搜索数据按分页显示 3.异步或同步传递
一.第一步引用 mvc PageList插件
二.控制器写法
public ActionResult Index(int page=1) //为空则默认第一页 { var lm = DataBLL.getData() .OrderBy(x => x.ID) .ToPagedList(page , 20); //扩展类,直接分页 if (Request.IsAjaxRequest()) //用户异步请求 return PartialView("search", lm); return View(lm); }
三.视图写法(主视图和分布视图):
考虑到异步刷新,搜索条件什么不能改变(就是form表单里面的东西不能修改),所以设计2个视图:
1.主体 用户保持查询条件的不变
<div class="row"> <form class="form" method="post" action="/" data-ajax="true" data-target="#search"> <input type="search" class="form-control" name="产品名称" data-autocomplete="@Url.Action("AutoCom")" autocomplete="on" /> <input type="submit" class="form-control" value="查询" /> <input type="button" class="form-control" id="down" value="下载" /> </form> </div> @Html.Partial("search", Model) <!-- 载入分布视图 --!>
2.分布视图
<div class="pagedList row" id="search" data-target="#search"> <!-- 载入分页html代码 --!> @Html.PagedListPager(Model, Page => Url.Action("index", new { Page }), PagedListRenderOptions.OnlyShowFivePagesAtATime) <!-- 样式 --!> <table class="table table-hover" > <tr> <th>序列 </th> <th>产品名称 </th> <th>类型ID </th> <th>类型名称 </th> <th>别名 </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.产品ID) </td> <td> @Html.DisplayFor(modelItem => item.产品名称) </td> <td> @Html.DisplayFor(modelItem => item.类型ID) </td> <td> @Html.DisplayFor(modelItem => item.类型名称) </td> <td> @Html.DisplayFor(modelItem => item.别名) </td> </tr> } </table> </div>
四、是否实现异步
我们数据显示主要是在 <div class="pagedList row" id="search" data-target="#search"> 这个里面,所以我们要替换的数据在这里
所以异步主要是获取HTML 然后替换 #search的代码
$("form[data-ajax='true']").submit(function () { //有个小技巧,在表单里面添加属性便于操作管理 var $form = $(this); $.ajax({ url: $form.attr("action"), type: $form.attr("method"), data: $form.serialize(), success: function (data) { $("#search").html(data); } }) return false; }); $(".pagedList a").click((function(){ var $a = $(this); $.ajax({ url : $a.attr("href"), data: $("form").serialize(), type: "get", success: function(data){ $("#search").html(data); } }) return false; }))
源代码:http://pan.baidu.com/s/1bnOAWEj
20160315 注意事项
1.在视图层只能用 @model IPagedList<search.Models.DataModel> ,以前的 @model IEnumerable<???>不能在使用
2.呵呵 你们想在视图层用IPagedList是不是用不好?
记得在VIew文件夹下的 web.config里面添加:
<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="PagedList"/> <!-- 看我 --> <add namespace="PagedList.Mvc"/> <!-- 看我 --> </namespaces>