jQuery Ajax:

Standard url paging:

MicrosoftAjax:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 

Inherits="System.Web.Mvc.ViewPage<Webdiyer.WebControls.Mvc.PagedList<Order>>" %>

<%@ Import Namespace="Webdiyer.Mvc2Demo.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    input or select page index

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<style type="text/css">

.mvcPager{font-size:9pt}

.mvcPager input[type=text]{width:28px}

.mvcPager .gotoPage{float:right}

</style>

<script language="javascript" type="text/javascript" 

src="<%=Url.Content("~/Scripts/jquery-1.4.2.min.js") %>"></script>

<script language="javascript" type="text/javascript" 

src="<%=Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>

<script language="javascript" type="text/javascript" 

src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>

    <h2>Input or select page index</h2>

    <div>MvcPager can be configured to allow use input or select page index 

    and jump directly to that page, user entered page index is validated in the client.</div>

    <br />

<%

    Html.RenderPartial("UCPageIndexBox"); %>

</asp:Content>

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PagedList<Order>>" %>

<%@ Import Namespace="Webdiyer.Mvc2Demo.Models" %>

<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>

<div id="dvOrders">

<table width="98%">

<tr><th>Order ID</th><th>Order Date</th><th>Customer ID</th><th>Ship Address</th></tr>

<%foreach(Order od in Model)

 {

     %>

     <tr><td><%=od.OrderID %></td><td><%=od.OrderDate.ToString() %></td>

     <td><%=od.CustomerID %></td><td><%=od.ShipAddress %></td></tr>

     <%

 } %>

</table>

<p>jQuery Ajax:</p>

<%=Html.AjaxPager(Model, new PagerOptions() { CssClass = "mvcPager", 

    PageIndexParameterName = "id", ShowPageIndexBox = true, 

    PageIndexBoxType = PageIndexBoxType.DropDownList, 

    ShowGoButton = false,PageIndexBoxWrapperFormatString="Go to page{0}" }, 

    new AjaxOptions() { UpdateTargetId = "dvOrders" })%>

<p>Standard url paging:</p>

<%=Html.Pager(Model, new PagerOptions { CssClass = "mvcPager", 

    PageIndexParameterName = "id", ShowPageIndexBox = true, 

    PageIndexBoxWrapperFormatString = "Go to page{0}", 

    GoToPageSectionWrapperFormatString = "<span class=\"gotoPage\">{0}</span>" })%>

<p>MicrosoftAjax:

<%=Html.AjaxPager(Model, new PagerOptions() { CssClass = "mvcPager", 

    PageIndexParameterName = "id", ShowPageIndexBox = true,

    ShowGoButton=false }, new AjaxOptions() { UpdateTargetId = "dvOrders" })%>

</p></div>

        public ActionResult PageIndexBox(int? id)

        {

            Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);

            Response.Cache.SetExpires(DateTime.Today.AddYears(-1));

            using (var db = new MvcPagerDemoDataContext())

            {

                PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);

                if (Request.IsAjaxRequest())

                    return PartialView("UCPageIndexBox", orders);

                return View(orders);

            }

        }