在MVC项目中分页使用MvcPager插件

参考网站  http://www.webdiyer.com/mvcpager/demos/

这个插件非常简单易用,如果想快速使用 可以参考我这篇文章,其实参考网站也是非常简单的

首先选择你的web项目安装插件,在nuget里面直接安装,我这里的版本是 3.0

在MVC项目中分页使用MvcPager插件

在这里我提供的是一个带搜索的分页

我现在控制器里写一个Search的Action,代码如下:


 public ActionResult Search(int id = , string kword = null)
        {
            //查询数据库
            using (var db = new ShortTraining.Model.ShortTrainDbContext())
            {
                var query = db.ConsultationMsgModels.AsQueryable();
                if (!string.IsNullOrWhiteSpace(kword))
                    query = query.Where(m => m.StudentName.Contains(kword));
                //得到一个集合
                var model = query.OrderByDescending(a => a.Id)//查询得到一个Iqueryable
                    .Select(m => new Model.ViewModels.ConsultationMsg()//将Iqueryable poco成为我们的视图模型
                { Id = m.Id, StudentCollege = m.StudentCollege, StudentName = m.StudentName, StudentPhoneNo = m.StudentPhoneNo, StudentQQ = m.StudentQQ }).ToPagedList(id, );
                return View(model);
            }
        }

这里面进行了一个POCO


然后我们要针对这个搜索页面创建一个视图 代码如下:

 @using Webdiyer.WebControls.Mvc;
@model PagedList<ShortTraining.Model.ViewModels.ConsultationMsg>
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@using (Html.BeginForm("Search", ViewContext.RouteData.GetRequiredString("Controller"), new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
{
<div class="well well-sm">
<span>搜索关键字:</span><input type="text" name="kword" value="@Request.QueryString["kword"]" style="width:120px" /><input type="submit" value="搜索(S)" accesskey="S" />
<span>(请输入“吴起”或“吴起县”进行测试)</span>
</div>
}
@Html.Partial("_ConsultationMsgTable", Model)
@Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetPagerItemTemplate("{0}&nbsp;"))
</div>
</body>
</html>

我在视图的第一行引用了  @using Webdiyer.WebControls.Mvc;  命名空间。

如果不使用这个命名空间,PagedList和@Html.Pager 都会报错的。

然后,我们要为这个视图创建一个Partal视图  _ConsultationMsgTable.cshtml 用来放置列表数据

代码如下:

 @using Webdiyer.WebControls.Mvc;
@model PagedList<ShortTraining.Model.ViewModels.ConsultationMsg>
<table class="table table-bordered table-striped">
<tr>
<th class="nowrap">序号</th>
<th>
@Html.DisplayNameFor(m=>m.StudentName)
</th>
<th>
@Html.DisplayNameFor(model => model.StudentPhoneNo)
</th>
<th>
@Html.DisplayNameFor(model => model.StudentQQ)
</th>
<th>
@Html.DisplayNameFor(model => model.StudentCollege)
</th>
</tr>
@{ int i = ;}
@foreach (var item in Model)
{
<tr>
<td>@(Model.StartItemIndex + i++)</td>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.StudentPhoneNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.StudentQQ)
</td>
<td>
@Html.DisplayFor(modelItem => item.StudentCollege)
</td>
</tr>
}
</table>

以上是核心,下面我列出我的两个模型,这两个模型一个是我的entity model,一个是我的view model 解释我的POCO:

entity model

在MVC项目中分页使用MvcPager插件

view model:

在MVC项目中分页使用MvcPager插件

显示效果如下:

在MVC项目中分页使用MvcPager插件

上一篇:Roman to Integer


下一篇:springMVC学习笔记--知识点总结1