参考网站 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} ")) 25 </div> 26 </body> 27 </html>
我在视图的第一行引用了 @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>
以上是核心,下面我列出我的两个模型,这两个模型一个是我的entity model,一个是我的view model 解释我的POCO:
entity model
view model:
显示效果如下: