重构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

上一篇:requestAnimationFrame 知识点


下一篇:关于B树B+树的详细解释——绝对精彩