该功能通过设置MvcAjaxOptions的DataFormId属性为要提交的表单的ID即可。 用户点击提交按钮进行查询时,MvcPager会将查询条件保存在客户端脚本变量中,每次分页时自动将该查询条件发送回服务器端,开发人员只需实现服务器端查询功能,无需编写任何客户端代码。
本示例使用Unobtrusive Ajax Form,因此需引入jquery.unobtrusive-ajax脚本库。
该功能通过设置MvcAjaxOptions的DataFormId属性为要提交的表单的ID即可。 用户点击提交按钮进行查询时,MvcPager会将查询条件保存在客户端脚本变量中,每次分页时自动将该查询条件发送回服务器端,开发人员只需实现服务器端查询功能,无需编写任何客户端代码。
本示例使用Unobtrusive Ajax Form,因此需引入jquery.unobtrusive-ajax脚本库。
@model PagedList<article> <fieldset><legend>查询</legend> @using (Ajax.BeginForm("AjaxSearchPost", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { UpdateTargetId = "articles", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "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();} <script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.min.js"></script>}
@model PagedList<Order> @Html.Partial("_DataTable", Model) <div><div style="float:left;width:50%">Page @Model.CurrentPageIndex of @Model.TotalPageCount, @Model.TotalItemCount items</div> @Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",HtmlAttributes = new Dictionary<string, object>{{"style","float:right"}},PagerItemTemplate = " {0}"},new MvcAjaxOptions{UpdateTargetId="orders",HttpMethod="Post",DataFormId = "searchForm"}) </div>
@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>
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; } }
public ActionResult AjaxSearchPost(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 AjaxSearchPost(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); } }