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

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

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

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

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

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

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

这里面进行了一个POCO

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

 1 @using Webdiyer.WebControls.Mvc;
 2 @model PagedList<ShortTraining.Model.ViewModels.ConsultationMsg>
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <title>Index</title>
13 </head>
14 <body>
15     <div>
16         @using (Html.BeginForm("Search", ViewContext.RouteData.GetRequiredString("Controller"), new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
17         {
18             <div class="well well-sm">
19                 <span>搜索关键字：</span><input type="text" name="kword" value="@Request.QueryString["kword"]" style="120px" /><input type="submit" value="搜索(S)" accesskey="S" />
20                 <span>（请输入“吴起”或“吴起县”进行测试）</span>
21             </div>
22         }
23         @Html.Partial("_ConsultationMsgTable", Model)
24         @Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetPagerItemTemplate("{0}&nbsp;"))
25     </div>
26 </body>
27 </html>

View Code

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

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

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

代码如下:

 1 @using Webdiyer.WebControls.Mvc;
 2 @model PagedList<ShortTraining.Model.ViewModels.ConsultationMsg>
 3 <table class="table table-bordered table-striped">
 4     <tr>
 5         <th class="nowrap">序号</th>
 6         <th>
 7             @Html.DisplayNameFor(m=>m.StudentName)
 8         </th>
 9         <th>
10             @Html.DisplayNameFor(model => model.StudentPhoneNo)
11         </th>
12         <th>
13             @Html.DisplayNameFor(model => model.StudentQQ)
14         </th>
15         <th>
16             @Html.DisplayNameFor(model => model.StudentCollege)
17         </th>
18     </tr>
19     @{ int i = 0;}
20     @foreach (var item in Model)
21     {
22         <tr>
23             <td>@(Model.StartItemIndex + i++)</td>
24             <td>
25                 @Html.DisplayFor(modelItem => item.StudentName)
26             </td>
27             <td>
28                 @Html.DisplayFor(modelItem => item.StudentPhoneNo)
29             </td>
30             <td>
31                 @Html.DisplayFor(modelItem => item.StudentQQ)
32             </td>
33             <td>
34                 @Html.DisplayFor(modelItem => item.StudentCollege)
35             </td>
36         </tr>
37     }
38 </table>

View Code

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

entity model

view model：

显示效果如下: