Fork me on GitHub

MvcPager demo - AjaxForm search (Post)

This sample demonstrates how to add paging functionality for Ajax search result within the AjaxForm that uses the POST http method.

To page for Ajax search result, sets the value of MvcAjaxOptions.DataFormId property to the ID of the form that contains search fields. When form is submitted, MvcPager will save the serialized form data to a Javascript local variable, it passes this variable value to the server side every time page is changed, you can get the values of the search form fields from server side and return search result there, there's no need to do anything in the client side.

The jquery.unobtrusive-ajax plugin is required in this sample because it uses Unobtrusive Ajax Form!

Search Orders:
Employee Name (Like):
Order ID Customer ID Company Name Employee Name
10760 MAISD Maison Dewey Margaret Peacock
10761 RATTC Rattlesnake Canyon Grocery Steven Buchanan
10762 FOLKO Folk och fä HB Janet Leverling
10763 FOLIG Folies gourmandes Janet Leverling
10764 ERNSH Ernst Handel Michael Suyama
Page 1 of 64, 318 items
 First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last

View:

        
@model PagedList<Order>
<fieldset><legend>Search Orders:</legend>
@using (Ajax.BeginForm("AjaxSearchPost", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { UpdateTargetId = "orders", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "id", "searchForm" }, { "class", "form-inline well well-sm" } }))
{
    <span>Employee Name (Like):</span>
    <input type="text" name="emp" placeholder="e.g., Janet,Michael" title="e.g, Janet,Michael" id="emp" style="width: 180px" class="form-control" />
    <input type="submit" value="Search(S)" accesskey="S" class="btn btn-default" />
}
    </fieldset>
<div id="orders">
    @Html.Partial("_AjaxSearchPost",Model)
</div>
@section Scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
<script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.min.js"></script>}

_AjaxSearchPost.cshtml

@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 = "&nbsp;{0}"},new MvcAjaxOptions{UpdateTargetId="orders",HttpMethod="Post",DataFormId = "searchForm"})
</div>

_DataTable.cshtml:

@model PagedList<order>
<table class="table table-striped table-bordered">
    <tr>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.OrderId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CustomerId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CompanyName)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.EmployeeName)
        </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
    <td>
                @Html.DisplayFor(modelItem => item.OrderId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CustomerId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CompanyName)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.EmployeeName)
            </td>
        </tr>
    }
</table>

Model:

    public class Order
    {
        [Display(Name = "Order ID")]
        public int OrderId { get; set; }
        [Display(Name = "Customer ID"),StringLength(20)]
        public string CustomerId { get; set; }
        [Display(Name = "Order Date")]
        public DateTime OrderDate { get; set; }
        [Display(Name = "Company Name"), StringLength(20)]
        public string CompanyName { get; set; }
        [Display(Name = "Employee Name"), StringLength(20)]
        public string EmployeeName { get; set; }
    }

Controller:

        public ActionResult AjaxSearchPost(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxSearchPost", model);
                return View(model);
            }
        }

        [HttpPost]
        public ActionResult AjaxSearchPost(string emp, int id = 1)
        {
            return ajaxSearchPostResult(emp, id);
        }

        private ActionResult ajaxSearchPostResult(string emp, int id = 1)
        {
            using (var db = new DataContext())
            {
                var qry = db.Orders.AsQueryable();
                if (!string.IsNullOrWhiteSpace(emp))
                    qry = qry.Where(a => a.EmployeeName.Contains(emp));
                var model = qry.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxSearchPost", model);
                return View(model);
            }
        }