MVC PageList使用（异步 与 正常）

此项目的功能为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>