MvcPager分页控件
jQuery Ajax分页示例
插入分页控件代码:<%=Html.AjaxPager(Model, new PagerOptions {PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "orderdiv" })%>
| 订单编号 | 订单日期 | 顾客编号 | 收货地址 |
|---|---|---|---|
| 10800 | 1997/12/26 0:00:00 | SEVES | 90 Wadhurst Rd. |
| 10801 | 1997/12/29 0:00:00 | BOLID | C/ Araquil, 67 |
| 10802 | 1997/12/29 0:00:00 | SIMOB | Vinbæltet 34 |
| 10803 | 1997/12/30 0:00:00 | WELLI | Rua do Mercado, 12 |
| 10804 | 1997/12/30 0:00:00 | SEVES | 90 Wadhurst Rd. |
| 10805 | 1997/12/30 0:00:00 | THEBI | 89 Jefferson Way Suite 2 |
| 10806 | 1997/12/31 0:00:00 | VICTE | 2, rue du Commerce |
| 10807 | 1997/12/31 0:00:00 | FRANS | Via Monte Bianco 34 |
| 10808 | 1998/1/1 0:00:00 | OLDWO | 2743 Bering St. |
| 10809 | 1998/1/1 0:00:00 | WELLI | Rua do Mercado, 12 |
| 10810 | 1998/1/1 0:00:00 | LAUGB | 2319 Elm St. |
| 10811 | 1998/1/2 0:00:00 | LINOD | Ave. 5 de Mayo Porlamar |
| 10812 | 1998/1/2 0:00:00 | REGGC | Strada Provinciale 124 |
| 10813 | 1998/1/5 0:00:00 | RICAR | Av. Copacabana, 267 |
| 10814 | 1998/1/5 0:00:00 | VICTE | 2, rue du Commerce |
| 10815 | 1998/1/5 0:00:00 | SAVEA | 187 Suffolk Ln. |
| 10816 | 1998/1/6 0:00:00 | GREAL | 2732 Baker Blvd. |
| 10817 | 1998/1/6 0:00:00 | KOENE | Maubelstr. 90 |
| 10818 | 1998/1/7 0:00:00 | MAGAA | Via Ludovico il Moro 22 |
| 10819 | 1998/1/7 0:00:00 | CACTU | Cerrito 333 |
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);
}
}
