zoukankan      html  css  js  c++  java
  • 在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:

    显示效果如下:

  • 相关阅读:
    dojo/Deferred类和dojo/promise类的使用
    dojo中类的继承
    c# 委托
    使用Spring Data JPA报错:javax.persistence.TransactionRequiredException: Executing an update/delete query
    服务器重启后,Docker安装的mysql怎么重启?
    IDEA开启Run Dashboard的配置
    Java中List集合去重的几种方式
    关闭迅雷更新到新版本的提示
    XMind8 破解激活教程(win系统)
    连接Oracle报错 ORA-12638: 身份证明检索失败
  • 原文地址:https://www.cnblogs.com/wholeworld/p/8662945.html
Copyright © 2011-2022 走看看