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

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

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

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

Model：

继承PagerBase：

 SearchModel
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块，将数据展现的这块独立出来，便于无刷新地展示数据，所以做了个分部视图。

第一种（刷新的）：

 Index.cshtml
@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选项来调整

数据展现的分部视图：

 IndexTable.cshtml
@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

第二种（无刷新的）：

 Index.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

数据展现的分部视图：

 IndexTable.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种方式的代码都一样：

 SearchController.cs
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

 

 

 

 

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