Fork me on GitHub

MvcPager demo - Ajax HtmlForm search (Get)

This sample demonstrates how to add paging functionality for Ajax search result within the normal HtmlForm that uses the GET http method.

Search Orders:
Employee Name (Like):
Order ID Customer ID Company Name Employee Name
10765 QUICK QUICK-Stop Janet Leverling
10766 OTTIK Ottilies Käseladen Margaret Peacock
10767 SUPRD Suprêmes délices Margaret Peacock
10768 AROUT Around the Horn Janet Leverling
10769 VAFFE Vaffeljernet Janet Leverling
Page 2 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 (Html.BeginForm("AjaxSearchHtmlGet", ViewContext.RouteData.GetRequiredString("controller"), new { id = "" }, FormMethod.Get, new { 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("_AjaxSearchGet", Model)
    </div>
    @section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_AjaxSearchGet.cshtml:

        
@model PagedList<Order>
@Html.Partial("_DataTable", Model)
<div><div style="float:left;width:35%">Page @Model.CurrentPageIndex of @Model.TotalPageCount, @Model.TotalItemCount items</div>
@Ajax.Pager(Model).Options(o=>o.SetPageIndexParameterName("id").AddHtmlAttribute("style","float:right").SetPagerItemTemplate("&nbsp;{0}")).AjaxOptions(a=>a.SetUpdateTargetId("orders").SetDataFormId("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 AjaxSearchHtmlGet(string emp, int id = 1)
        {
            return ajaxSearchGetResult(emp, id);
        }
                
        private ActionResult ajaxSearchGetResult(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("_AjaxSearchGet", model);
                return View(model);
            }
        }