MVC PageList使用(异步 与 正常)

MVC PageList使用(异步 与 正常)

此项目的功能为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>
上一篇:Redux 入门教程


下一篇:Centos操作系统在虚拟机VMware上的安装