MvcPager分页控件
jQuery Ajax分页示例
插入分页控件代码:<%=Html.AjaxPager(Model, new PagerOptions {PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "orderdiv" })%>
| 订单编号 | 订单日期 | 顾客编号 | 收货地址 |
|---|---|---|---|
| 10940 | 1998/3/11 0:00:00 | BONAP | 12, rue des Bouchers |
| 10941 | 1998/3/11 0:00:00 | SAVEA | 187 Suffolk Ln. |
| 10942 | 1998/3/11 0:00:00 | REGGC | Strada Provinciale 124 |
| 10943 | 1998/3/11 0:00:00 | BSBEV | Fauntleroy Circus |
| 10944 | 1998/3/12 0:00:00 | BOTTM | 23 Tsawassen Blvd. |
| 10945 | 1998/3/12 0:00:00 | MORGK | Heerstr. 22 |
| 10946 | 1998/3/12 0:00:00 | VAFFE | Smagsloget 45 |
| 10947 | 1998/3/13 0:00:00 | BSBEV | Fauntleroy Circus |
| 10948 | 1998/3/13 0:00:00 | GODOS | C/ Romero, 33 |
| 10949 | 1998/3/13 0:00:00 | BOTTM | 23 Tsawassen Blvd. |
| 10950 | 1998/3/16 0:00:00 | MAGAA | Via Ludovico il Moro 22 |
| 10951 | 1998/3/16 0:00:00 | RICSU | Starenweg 5 |
| 10952 | 1998/3/16 0:00:00 | ALFKI | Obere Str. 57 |
| 10953 | 1998/3/16 0:00:00 | AROUT | Brook Farm Stratford St. Mary |
| 10954 | 1998/3/17 0:00:00 | LINOD | Ave. 5 de Mayo Porlamar |
| 10955 | 1998/3/17 0:00:00 | FOLKO | Åkergatan 24 |
| 10956 | 1998/3/17 0:00:00 | BLAUS | Forsterstr. 57 |
| 10957 | 1998/3/18 0:00:00 | HILAA | Carrera 22 con Ave. Carlos Soublette #8-35 |
| 10958 | 1998/3/18 0:00:00 | OCEAN | Ing. Gustavo Moncada 8585 Piso 20-A |
| 10959 | 1998/3/18 0:00:00 | GOURL | Av. Brasil, 442 |
Ajax分页(仅刷新部分页面,Url不改变):
标准Url分页模式(刷新整个页面,Url改变):
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PagedList<Order>>" %>
<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>
<%@ Import Namespace="MvcPagerSample.Models"%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ASP.NET MvcPager 使用 jQuery 分页示例
</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>ASP.NET MvcPager 使用 jQuery 分页示例</h2>
<div>本示例演示使用MvcPager配合<a href="http://www.jquery.com" target="_blank">jQuery</a>实现Ajax分页。</div><br />
<%Html.RenderPartial("UCJqOrderList", Model); %>
</asp:Content>
<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<PagedList<Order>>" %>
<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>
<%@ Import Namespace="MvcPagerSample.Models"%>
<div id="dvOrders">
<table width="98%">
<tr><th>订单编号</th><th>订单日期</th><th>顾客编号</th><th>收货地址</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分页(仅刷新部分页面,Url不改变):</p>
<%=Html.AjaxPager(Model, new PagerOptions() { CssClass = "mvcPager",
PageIndexParameterName = "id", ShowMorePagerItems = false,
AlwaysShowFirstLastPageNumber = true, ShowPageIndexBox = true,
PageIndexBoxWrapperFormatString = "页{0}" },
new AjaxOptions() { UpdateTargetId = "dvOrders" })%>
<p>标准url分页(刷新整个页面,Url改变):</p>
<%=Html.Pager(Model, new PagerOptions {CssClass="mvcPager",
PageIndexParameterName = "id", AlwaysShowFirstLastPageNumber = true,
ShowPageIndexBox = true,ShowGoButton=false,PageIndexBoxWrapperFormatString="页{0}"})%>
</div>
public ActionResult JqAjaxOrders(int? id)
{
using (var db = new MvcPagerSampleDataContext())
{
PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);
if (Request.IsAjaxRequest())
return PartialView("UCJqOrderList", orders);
return View(orders);
}
}
