Input or select page index

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.

Order IDOrder DateCustomer IDShip Address
110604/30/1998 12:00:00 AMFRANSVia Monte Bianco 34
110614/30/1998 12:00:00 AMGREAL2732 Baker Blvd.
110624/30/1998 12:00:00 AMREGGCStrada Provinciale 124
110634/30/1998 12:00:00 AMHUNGO8 Johnstown Road
110645/1/1998 12:00:00 AMSAVEA187 Suffolk Ln.
110655/1/1998 12:00:00 AMLILASCarrera 52 con Ave. Bolívar #65-98 Llano Largo
110665/1/1998 12:00:00 AMWHITC1029 - 12th Ave. S.
110675/4/1998 12:00:00 AMDRACDWalserweg 21
110685/4/1998 12:00:00 AMQUEENAlameda dos Canàrios, 891
110695/4/1998 12:00:00 AMTORTUAvda. Azteca 123
110705/5/1998 12:00:00 AMLEHMSMagazinweg 7
110715/5/1998 12:00:00 AMLILASCarrera 52 con Ave. Bolívar #65-98 Llano Largo
110725/5/1998 12:00:00 AMERNSHKirchgasse 6
110735/5/1998 12:00:00 AMPERICCalle Dr. Jorge Cash 321
110745/6/1998 12:00:00 AMSIMOBVinbæltet 34
110755/6/1998 12:00:00 AMRICSUStarenweg 5
110765/6/1998 12:00:00 AMBONAP12, rue des Bouchers
110775/6/1998 12:00:00 AMRATTC2817 Milton Dr.

jQuery Ajax:

First  Prev  ...  7  8  9  10  11  12  13  14  15  16  Next  Last  Go to page

Standard url paging:

First  Prev  ...  7  8  9  10  11  12  13  14  15  16  Next  Last  Go to page

MicrosoftAjax:

First  Prev  ...  7  8  9  10  11  12  13  14  15  16  Next  Last  

<%@ 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);
            }
        }