MvcPager分页控件
jQuery Ajax分页示例
插入分页控件代码:<%=Html.AjaxPager(Model, new PagerOptions {PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "orderdiv" })%>
| 订单编号 | 订单日期 | 顾客编号 | 收货地址 |
|---|---|---|---|
| 11020 | 1998/4/14 0:00:00 | OTTIK | Mehrheimerstr. 369 |
| 11021 | 1998/4/14 0:00:00 | QUICK | Taucherstraße 10 |
| 11022 | 1998/4/14 0:00:00 | HANAR | Rua do Paço, 67 |
| 11023 | 1998/4/14 0:00:00 | BSBEV | Fauntleroy Circus |
| 11024 | 1998/4/15 0:00:00 | EASTC | 35 King George |
| 11025 | 1998/4/15 0:00:00 | WARTH | Torikatu 38 |
| 11026 | 1998/4/15 0:00:00 | FRANS | Via Monte Bianco 34 |
| 11027 | 1998/4/16 0:00:00 | BOTTM | 23 Tsawassen Blvd. |
| 11028 | 1998/4/16 0:00:00 | KOENE | Maubelstr. 90 |
| 11029 | 1998/4/16 0:00:00 | CHOPS | Hauptstr. 31 |
| 11030 | 1998/4/17 0:00:00 | SAVEA | 187 Suffolk Ln. |
| 11031 | 1998/4/17 0:00:00 | SAVEA | 187 Suffolk Ln. |
| 11032 | 1998/4/17 0:00:00 | WHITC | 1029 - 12th Ave. S. |
| 11033 | 1998/4/17 0:00:00 | RICSU | Starenweg 5 |
| 11034 | 1998/4/20 0:00:00 | OLDWO | 2743 Bering St. |
| 11035 | 1998/4/20 0:00:00 | SUPRD | Boulevard Tirou, 255 |
| 11036 | 1998/4/20 0:00:00 | DRACD | Walserweg 21 |
| 11037 | 1998/4/21 0:00:00 | GODOS | C/ Romero, 33 |
| 11038 | 1998/4/21 0:00:00 | SUPRD | Boulevard Tirou, 255 |
| 11039 | 1998/4/21 0:00:00 | LINOD | Ave. 5 de Mayo Porlamar |
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);
}
}
