Ajax paging and loading effect with jQuery:

Order ID	Order Date	Customer ID	Ship Address
10760	12/1/1997 12:00:00 AM	MAISD	Rue Joseph-Bens 532
10761	12/2/1997 12:00:00 AM	RATTC	2817 Milton Dr.
10762	12/2/1997 12:00:00 AM	FOLKO	Åkergatan 24
10763	12/3/1997 12:00:00 AM	FOLIG	184, chaussée de Tournai
10764	12/3/1997 12:00:00 AM	ERNSH	Kirchgasse 6
10765	12/4/1997 12:00:00 AM	QUICK	Taucherstraße 10
10766	12/5/1997 12:00:00 AM	OTTIK	Mehrheimerstr. 369
10767	12/5/1997 12:00:00 AM	SUPRD	Boulevard Tirou, 255
10768	12/8/1997 12:00:00 AM	AROUT	Brook Farm Stratford St. Mary
10769	12/8/1997 12:00:00 AM	VAFFE	Smagsloget 45
10770	12/9/1997 12:00:00 AM	HANAR	Rua do Paço, 67
10771	12/10/1997 12:00:00 AM	ERNSH	Kirchgasse 6
10772	12/10/1997 12:00:00 AM	LEHMS	Magazinweg 7
10773	12/11/1997 12:00:00 AM	ERNSH	Kirchgasse 6
10774	12/11/1997 12:00:00 AM	FOLKO	Åkergatan 24
10775	12/12/1997 12:00:00 AM	THECR	55 Grizzly Peak Rd.
10776	12/15/1997 12:00:00 AM	ERNSH	Kirchgasse 6
10777	12/15/1997 12:00:00 AM	GOURL	Av. Brasil, 442
10778	12/16/1997 12:00:00 AM	BERGS	Berguvsvägen 8
10779	12/16/1997 12:00:00 AM	MORGK	Heerstr. 22

jQuery Ajax：

1 2 3 4 5 6 7 8 9 10 ... Next Last

MicrosoftAjax：

1 2 3 4 5 6 7 8 9 10 ... Next Last

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

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

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

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

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

    Ajax loading effect

</asp:Content>

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

<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>

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

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

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

    function AjaxStart() { $.blockUI({ message: '<h2><img src="<%=Url.Content("~/Images/loading.gif") %>"

    width="16" height="16"/>Retrieving data, please wait...</h2>' }); }

    function AjaxStop() { $.unblockUI(); }

</script>

    <h2>Ajax paging and loading effect with jQuery:</h2>

    <br />

<%Html.RenderPartial("UCLoading", Model); %>

</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() { PageIndexParameterName = "id",

    ShowDisabledPagerItems = false, ShowPageIndexBox = true,

    PageIndexBoxType = PageIndexBoxType.DropDownList, ShowGoButton = false },

    new AjaxOptions() { UpdateTargetId = "dvOrders", OnBegin = "AjaxStart",

        OnComplete = "AjaxStop" })%>

<p>MicrosoftAjax:</p>

<%=Ajax.Pager(Model, new PagerOptions() { PageIndexParameterName = "id",

    ShowDisabledPagerItems = false,ShowPageIndexBox=true,

    PageIndexBoxType=PageIndexBoxType.DropDownList,ShowGoButton=false},

    new AjaxOptions() { UpdateTargetId = "dvOrders",OnBegin="AjaxStart",

        OnComplete="AjaxStop"})%>

</div>

        public ActionResult Loading(int? id)

            using (var db = new MvcPagerDemoDataContext())

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

                if (Request.IsAjaxRequest())

                    System.Threading.Thread.Sleep(2000);

                    return PartialView("UCLoading", orders);

                return View(orders);