MvcPager 分页示例 — Ajax HtmlForm搜索（Post）

该示例演示如何在Ajax分页模式下，在分页时通过Post方式提交查询表单，从而实现按条件搜索显示数据的功能。

本示例使用Html Form。

使用Ajax查询功能只需将MvcAjaxOptions的DataFormId属性设置为要提交的表单的ID即可。用户点击提交按钮进行查询时，MvcPager会将查询条件保存在客户端脚本变量中，每次分页时自动将该查询条件发送回服务器端，开发人员只需实现服务器端查询功能，无需编写任何客户端代码。

示例
源码

查询

序号	文章标题	作者	文章来源
16	延安市吴起县境内古城投资三亿欲变陕北名镇	杨涛	吴起政府网
17	延安市居住证首发仪式在吴起举行	Webdiyer	吴起热线
18	黄土高原上的绿色丰碑——吴起县生态环境建设巡礼	杨涛	吴起热线
19	吴起的追梦之旅——吴起县争创“全国百强县”纪实	杨涛	吴起热线
20	延安铁边城入选第七批全国重点文保单位	杨涛	吴起热线

共 11 页 53 条记录，当前为第 4 页

首页上页 1 2 3 4 5 6 7 8 9 10 ... 下页尾页

View：

@model PagedList<article>
<fieldset><legend>查询</legend>
@using (Html.BeginForm("AjaxSearchHtmlPost", ViewContext.RouteData.GetRequiredString("controller"), new { id = "" }, FormMethod.Post, new { id = "searchForm" }))
{
        <span>标题：</span><input type="text" name="title" id="title" style="width:120px" />
        <span>作者：</span><input type="text" name="author" id="author" style="width:120px" /><span>（如：Webdiyer）</span>
        <span>来源：</span><input type="text" name="source" id="source" style="width:120px" /><span>（如：吴起热线）</span>
        <input type="submit" value="搜索(S)" accesskey="S" />
}</fieldset>
<div id="articles">
    @Html.Partial("_AjaxSearchPost",Model)
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_AjaxSearchPost.cshtml:

@model PagedList<article>
<div class="well well-sm">当前查询条件：标题：<span class="emph">@Request.Form["title"]</span>&nbsp;&nbsp;作者：<span class="emph">@Request.Form["author"]</span>&nbsp;&nbsp;来源：<span class="emph">@Request.Form["source"]</span></div>
 @Html.Partial("_ArticleTable", Model)
<div><div style="float:left;width:50%">共 @Model.TotalPageCount 页 @Model.TotalItemCount 条记录，当前为第 @Model.CurrentPageIndex 页</div>
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",HtmlAttributes = new Dictionary<string, object>{{"style","float:right"}},PagerItemTemplate = "&nbsp;{0}"},new MvcAjaxOptions{UpdateTargetId="articles",HttpMethod="Post",DataFormId = "searchForm"})
</div>

_ArticleTable.cshtml:

@model PagedList<Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

Model:

    public class Article
    {
        [Display(Name="文章编号")]
        public int ID { get; set; }
        [Display(Name="文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

Controller:

        
        public ActionResult AjaxSearchHtmlPost(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxSearchPost", model);
                return View(model);
            }
        }
        [HttpPost]
        public ActionResult AjaxSearchHtmlPost(string title, string author, string source, int id = 1)
        {
            return ajaxSearchPostResult(title, author, source, id);
        }
        private ActionResult ajaxSearchPostResult(string title,string author,string source, int id = 1)
        {
            using (var db = new DataContext())
            {
                var qry = db.Articles.AsQueryable();
                if (!string.IsNullOrWhiteSpace(title))
                    qry = qry.Where(a => a.Title.Contains(title));
                if (!string.IsNullOrWhiteSpace(author))
                    qry = qry.Where(a => a.Author.Contains(author));
                if (!string.IsNullOrWhiteSpace(source))
                    qry = qry.Where(a => a.Source.Contains(source));
                var model = qry.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxSearchPost", model);
                return View(model);
            }
        }

在线演示

帮助文档

源代码

MvcPager 分页示例 — Ajax HtmlForm搜索（Post）

View：

_AjaxSearchPost.cshtml:

_ArticleTable.cshtml:

Model:

Controller:

在线演示

帮助文档

源 代 码

MvcPager 分页示例 — Ajax HtmlForm搜索（Post）

View：

_AjaxSearchPost.cshtml:

_ArticleTable.cshtml:

Model:

Controller:

源代码