MvcPager分页控件
jQuery Ajax分页示例
插入分页控件代码:<%=Html.AjaxPager(Model, new PagerOptions {PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "orderdiv" })%>
| 订单编号 | 订单日期 | 顾客编号 | 收货地址 |
|---|---|---|---|
| 10860 | 1998/1/29 0:00:00 | FRANR | 54, rue Royale |
| 10861 | 1998/1/30 0:00:00 | WHITC | 1029 - 12th Ave. S. |
| 10862 | 1998/1/30 0:00:00 | LEHMS | Magazinweg 7 |
| 10863 | 1998/2/2 0:00:00 | HILAA | Carrera 22 con Ave. Carlos Soublette #8-35 |
| 10864 | 1998/2/2 0:00:00 | AROUT | Brook Farm Stratford St. Mary |
| 10865 | 1998/2/2 0:00:00 | QUICK | Taucherstraße 10 |
| 10866 | 1998/2/3 0:00:00 | BERGS | Berguvsvägen 8 |
| 10867 | 1998/2/3 0:00:00 | LONEP | 89 Chiaroscuro Rd. |
| 10868 | 1998/2/4 0:00:00 | QUEEN | Alameda dos Canàrios, 891 |
| 10869 | 1998/2/4 0:00:00 | SEVES | 90 Wadhurst Rd. |
| 10870 | 1998/2/4 0:00:00 | WOLZA | ul. Filtrowa 68 |
| 10871 | 1998/2/5 0:00:00 | BONAP | 12, rue des Bouchers |
| 10872 | 1998/2/5 0:00:00 | GODOS | C/ Romero, 33 |
| 10873 | 1998/2/6 0:00:00 | WILMK | Keskuskatu 45 |
| 10874 | 1998/2/6 0:00:00 | GODOS | C/ Romero, 33 |
| 10875 | 1998/2/6 0:00:00 | BERGS | Berguvsvägen 8 |
| 10876 | 1998/2/9 0:00:00 | BONAP | 12, rue des Bouchers |
| 10877 | 1998/2/9 0:00:00 | RICAR | Av. Copacabana, 267 |
| 10878 | 1998/2/10 0:00:00 | QUICK | Taucherstraße 10 |
| 10879 | 1998/2/10 0:00:00 | WILMK | Keskuskatu 45 |
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);
}
}
