• 重构MVC多条件+分页解决方案


    为支持MVC的验证,无刷新查询,EF,以及让代码可读性更强一点,所以就重构了下原来的解决方案。

    这里就简单讲下使用方法吧:

    Model:

    继承PagerBase:

     1 public class SearchModel : PagerBase
     2     {
     3         public SearchModel()
     4         {
     5             AddFields("UserName", "Age", "Sex");
     6         }
     7 
     8         [Required(ErrorMessage = "需要输入 用户名")]
     9         public string UserName { get; set; }
    10         public string Age { get; set; }
    11         public string Sex { get; set; }
    12 
    13         public IQueryable<Member> Members { get; set; }
    14 
    15         public override void Search()
    16         {
    17             int age = 0;
    18             if(!Int32.TryParse(Age, out age)) Age = string.Empty;
    19             // 过滤
    20             Members = Members.Where(UserName, entity => entity.UserName.Contains(UserName))
    21                 .Where(Age, entity => entity.Age == age)
    22                 .Where(Sex, entity => entity.Sex == Sex.Trim());
    23             // 分页
    24             Members = Pager(Members.OrderBy(entity => entity.UserName));
    25         }
    26     }
    SearchModel

    View:

    分2种,一种是以Get形式刷新地提交查询条件的,分页可以在无刷新与刷新模式之间切换的,优化搜索引擎用的;另一种是无刷新形式提交查询条件的,分页亦是无刷新的。

    这里需要将View分成2块,将数据展现的这块独立出来,便于无刷新地展示数据,所以做了个分部视图。

    第一种(刷新的):

     1 @model MvcPagerSearch.Models.SearchModel
     2 @{
     3     ViewBag.Title = "Index";
     4 }
     5 
     6 <h2>查询</h2>
     7 @using(Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-search form-inline", id = "formMain" }))
     8 {
     9     <div class="input-append">
    10     @Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })
    11     @Html.TextBoxFor(model => model.UserName, new { @class = "span2 search-query" })
    12     @Html.TextBoxFor(model => model.Sex, new { @class = "span2 search-query" })
    13     <button type="submit" class="btn">
    14         快速查询</button>
    15     </div>
    16     <div data-valmsg-summary="true" class="text-warning"><ul></ul></div>
    17 }
    18 
    19 <div class="container">
    20     <div id="pager"></div>
    21     <div id="Content">
    22     @Html.Partial("IndexTable")
    23     </div>
    24 </div>
    25 
    26 @Url.IncludePagerScript()
    27 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    28 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    29 <script type="text/javascript">
    30     $(function () {
    31         $.pager({
    32             content: "#Content",
    33             pager: "#pager",
    34             form: "#formMain",
    35             @Html.Raw(Model.Extension),
    36             refresh: false
    37         });
    38     });
    39 </script>
    Index.cshtml

    分页的刷新、无刷新可以通过js中的refresh: false选项来调整

    数据展现的分部视图:

     1 @model MvcPagerSearch.Models.SearchModel
     2 <table class="table table-hover">
     3     <thead>
     4         <tr>
     5             <th>
     6                 昵称
     7             </th>
     8             <th>
     9                 性别
    10             </th>
    11             <th>
    12                 年龄
    13             </th>
    14         </tr>
    15     </thead>
    16     <tbody>
    17     @if(Model.Members != null)
    18     {
    19         foreach(var entity in Model.Members)
    20         {
    21             <tr>
    22                 <td>
    23                     @entity.UserName
    24                 </td>
    25                 <td>
    26                     @entity.Sex
    27                 </td>
    28                 <td>
    29                     @entity.Age
    30                 </td>
    31             </tr>
    32         }
    33     }
    34     </tbody>
    35 </table>
    IndexTable.cshtml

    第二种(无刷新的):

     1 @model MvcPagerSearch.Models.SearchModel
     2 @{
     3     ViewBag.Title = "Index";
     4 }
     5 
     6 <h2>Ajax查询</h2>
     7 @using(Html.BeginForm("Index", "AjaxSearch", FormMethod.Post, new { @class="form-search form-inline", id="formMain" }))
     8 {
     9     <div class="input-append">
    10         @Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })
    11         @Html.TextBoxFor(model => model.UserName, new { @class = "span2" })
    12         @Html.TextBoxFor(model => model.Sex, new { @class = "span2" })
    13         <button type="submit" class="btn">查询</button>
    14     </div>
    15     <div data-valmsg-summary="true" class="text-warning"><ul></ul></div>
    16 }
    17 <div class="container">
    18     <div id="pager"></div>
    19     <div id="Content">
    20     @Html.Partial("IndexTable")
    21     </div>
    22 </div>
    23 @Url.IncludeAjaxPagerScript()
    24 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    25 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    26 <script type="text/javascript">
    27     $(function () {
    28         $.ajaxPager({
    29             content: "#Content",
    30             pager: "#pager",
    31             form: "#formMain"
    32         });
    33     });
    34 </script>
    Index.cshtml

    数据展现的分部视图:

     1 @model MvcPagerSearch.Models.SearchModel
     2 @Html.Partial("~/Views/Shared/_AjaxPagerPartial.cshtml")
     3 <table class="table table-hover">
     4     <thead>
     5         <tr>
     6             <th>
     7                 昵称
     8             </th>
     9             <th>
    10                 性别
    11             </th>
    12             <th>
    13                 年龄
    14             </th>
    15         </tr>
    16     </thead>
    17     <tbody>
    18     @if(Model.Members != null)
    19     {
    20         foreach(var entity in Model.Members)
    21         {
    22             <tr>
    23                 <td>
    24                     @entity.UserName
    25                 </td>
    26                 <td>
    27                     @entity.Sex
    28                 </td>
    29                 <td>
    30                     @entity.Age
    31                 </td>
    32             </tr>
    33         }
    34     }
    35     </tbody>
    36 </table>
    IndexTable.cshtml

    这里用到了另外个分部视图_AjaxPagerPartial.cshtml,用于记录查询条件与分页信息的。

    Control:

    2种方式的代码都一样:

     1 public class SearchController : Controller
     2     {
     3         //
     4         // GET: /Search/
     5         TestContext testContext = new TestContext();
     6 
     7         public ActionResult Index(SearchModel model)
     8         {
     9             if(ModelState.IsValid)
    10             {
    11                 model.Members = testContext.Members;
    12                 model.Search();
    13             }
    14 
    15             if(Request.IsAjaxRequest()) return PartialView("IndexTable", model);
    16             return View("Index", model);
    17         }
    18     }
    SearchController.cs

    源代码:http://files.cnblogs.com/nickppa/MvcPagerSearch%E9%87%8D%E6%9E%84.rar

  • 相关阅读:
    2016年会有感之测试解决方案
    APP测试走过的那些坑
    2016年终总结——测试基础篇(二)
    2016年终总结——测试基础篇(一)
    分享篇——我的Java学习路线
    selenium使用笔记(三)——元素定位
    selenium使用笔记(二)——Tesseract OCR
    selenium使用笔记(一)——selenium你该知道的
    对新手学习自动化的一些感想
    Maven的配置和使用(三)
  • 原文地址:https://www.cnblogs.com/nickppa/p/3247634.html
Copyright © 2020-2023  润新知