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