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
10780 LILAS LILA-Supermercado Andrew Fuller
10781 WARTH Wartian Herkku Andrew Fuller
10782 CACTU Cactus Comidas para llevar Anne Dodsworth
10783 HANAR Hanari Carnes Margaret Peacock
10784 MAGAA Magazzini Alimentari Riuniti Margaret Peacock
Page 5 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);
            }
        }