Ajax paging with MicrosoftAjax script library
Syntax:<%=Ajax.Pager(Model,"Paging",null, new PagerOptions{ShowDisabledPagerItems = false}, new AjaxOptions{ UpdateTargetId = "dvOrders" },null)%>
| Order ID | Order Date | Customer ID | Ship Address |
|---|---|---|---|
| 11060 | 4/30/1998 12:00:00 AM | FRANS | Via Monte Bianco 34 |
| 11061 | 4/30/1998 12:00:00 AM | GREAL | 2732 Baker Blvd. |
| 11062 | 4/30/1998 12:00:00 AM | REGGC | Strada Provinciale 124 |
| 11063 | 4/30/1998 12:00:00 AM | HUNGO | 8 Johnstown Road |
| 11064 | 5/1/1998 12:00:00 AM | SAVEA | 187 Suffolk Ln. |
| 11065 | 5/1/1998 12:00:00 AM | LILAS | Carrera 52 con Ave. Bolívar #65-98 Llano Largo |
| 11066 | 5/1/1998 12:00:00 AM | WHITC | 1029 - 12th Ave. S. |
| 11067 | 5/4/1998 12:00:00 AM | DRACD | Walserweg 21 |
| 11068 | 5/4/1998 12:00:00 AM | QUEEN | Alameda dos Canàrios, 891 |
| 11069 | 5/4/1998 12:00:00 AM | TORTU | Avda. Azteca 123 |
| 11070 | 5/5/1998 12:00:00 AM | LEHMS | Magazinweg 7 |
| 11071 | 5/5/1998 12:00:00 AM | LILAS | Carrera 52 con Ave. Bolívar #65-98 Llano Largo |
| 11072 | 5/5/1998 12:00:00 AM | ERNSH | Kirchgasse 6 |
| 11073 | 5/5/1998 12:00:00 AM | PERIC | Calle Dr. Jorge Cash 321 |
| 11074 | 5/6/1998 12:00:00 AM | SIMOB | Vinbæltet 34 |
| 11075 | 5/6/1998 12:00:00 AM | RICSU | Starenweg 5 |
| 11076 | 5/6/1998 12:00:00 AM | BONAP | 12, rue des Bouchers |
| 11077 | 5/6/1998 12:00:00 AM | RATTC | 2817 Milton Dr. |
Ajax paging (only refresh part of page and url does not change):
Standard url paging (refresh whole page and url changed)
<%@ 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 paging with MicrosoftAjax
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<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>Ajax paging with MicrosoftAjax script library</h2>
<%Html.RenderPartial("UCOrderList", 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>Ajax paging (only refresh part of page and url does not change):'a3?</p>
<%=Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id",
ShowDisabledPagerItems = false, SeparatorHtml = " " },
new AjaxOptions { UpdateTargetId = "dvOrders"})%>
<p>Standard url paging (refresh whole page and url changed)</p>
<%=Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id",
ShowDisabledPagerItems = false, SeparatorHtml = " " })%>
</div>
public ActionResult MsAjaxOrders(int? id)
{
using (var db = new MvcPagerDemoDataContext())
{
PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);
if (Request.IsAjaxRequest())
return PartialView("UCOrderList", orders);
return View(orders);
}
}