此项目的功能为1.将数据分页显示,2.搜索数据按分页显示 3.异步或同步传递
一.第一步引用 mvc PageList插件
二.控制器写法
public ActionResult Index(int page=) //为空则默认第一页
{
var lm = DataBLL.getData()
.OrderBy(x => x.ID)
.ToPagedList(page , ); //扩展类,直接分页 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>