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

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

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

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

Model：

继承PagerBase：

 

public class SearchModel : PagerBase
{
public SearchModel()
{
AddFields("UserName", "Age", "Sex");
}

[Required(ErrorMessage = "需要输入 用户名")]
public string UserName { get; set; }
public string Age { get; set; }
public string Sex { get; set; }

public IQueryable<Member> Members { get; set; }

public override void Search()
{
int age = 0;
if(!Int32.TryParse(Age, out age)) Age = string.Empty;
// 过滤
Members = Members.Where(UserName, entity => entity.UserName.Contains(UserName))
.Where(Age, entity => entity.Age == age)
.Where(Sex, entity => entity.Sex == Sex.Trim());
// 分页
Members = Pager(Members.OrderBy(entity => entity.UserName));
}
}

SearchModel

View：

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

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

第一种（刷新的）：

 

@model MvcPagerSearch.Models.SearchModel
@{
ViewBag.Title = "Index";
}

<h2>查询</h2>
@using(Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-search form-inline", id = "formMain" }))
{
<div class="input-append">
@Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })
@Html.TextBoxFor(model => model.UserName, new { @class = "span2 search-query" })
@Html.TextBoxFor(model => model.Sex, new { @class = "span2 search-query" })
<button type="submit" class="btn">
快速查询</button>
</div>
<div data-valmsg-summary="true" class="text-warning"><ul></ul></div>
}

<div class="container">
<div id="pager"></div>
<div id="Content">
@Html.Partial("IndexTable")
</div>
</div>

@Url.IncludePagerScript()
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript">
$(function () {
$.pager({
content: "#Content",
pager: "#pager",
form: "#formMain",
@Html.Raw(Model.Extension),
refresh: false
});
});
</script>

Index.cshtml

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

数据展现的分部视图：

 

@model MvcPagerSearch.Models.SearchModel
<table class="table table-hover">
<thead>
<tr>
<th>
昵称
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>
</thead>
<tbody>
@if(Model.Members != null)
{
foreach(var entity in Model.Members)
{
<tr>
<td>
@entity.UserName
</td>
<td>
@entity.Sex
</td>
<td>
@entity.Age
</td>
</tr>
}
}
</tbody>
</table>

IndexTable.cshtml

第二种（无刷新的）：

 

@model MvcPagerSearch.Models.SearchModel
@{
ViewBag.Title = "Index";
}

<h2>Ajax查询</h2>
@using(Html.BeginForm("Index", "AjaxSearch", FormMethod.Post, new { @class="form-search form-inline", id="formMain" }))
{
<div class="input-append">
@Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })
@Html.TextBoxFor(model => model.UserName, new { @class = "span2" })
@Html.TextBoxFor(model => model.Sex, new { @class = "span2" })
<button type="submit" class="btn">查询</button>
</div>
<div data-valmsg-summary="true" class="text-warning"><ul></ul></div>
}
<div class="container">
<div id="pager"></div>
<div id="Content">
@Html.Partial("IndexTable")
</div>
</div>
@Url.IncludeAjaxPagerScript()
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript">
$(function () {
$.ajaxPager({
content: "#Content",
pager: "#pager",
form: "#formMain"
});
});
</script>

Index.cshtml

数据展现的分部视图：

 

@model MvcPagerSearch.Models.SearchModel
@Html.Partial("~/Views/Shared/_AjaxPagerPartial.cshtml")
<table class="table table-hover">
<thead>
<tr>
<th>
昵称
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>
</thead>
<tbody>
@if(Model.Members != null)
{
foreach(var entity in Model.Members)
{
<tr>
<td>
@entity.UserName
</td>
<td>
@entity.Sex
</td>
<td>
@entity.Age
</td>
</tr>
}
}
</tbody>
</table>

IndexTable.cshtml

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

Control:

2种方式的代码都一样：

 

public class SearchController : Controller
{
//
// GET: /Search/
TestContext testContext = new TestContext();

public ActionResult Index(SearchModel model)
{
if(ModelState.IsValid)
{
model.Members = testContext.Members;
model.Search();
}

if(Request.IsAjaxRequest()) return PartialView("IndexTable", model);
return View("Index", model);
}
}

SearchController.cs

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

 

 

 

 

绿色通道： 好文要顶 关注我