关于ASP.NET MVC 分页

采用ajax效果对ASP.NET MVC进行分页（要用到BlockUI插件http://malsup.com/jquery/block，在网上下载jquery.blockUI.js脚本，后面有地址的）

   1.先建立一个视图ajaxview.ascx

 1     <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PagedList<Order>>" %>
 2 <%@ Import Namespace="Webdiyer.WebControls.Mvc"%>
 3 <%@ Import Namespace="MvcPagerSample.Models"%>
 4 <div id="dvOrders">
 5 <table width="98%">
 6 <tr><th>编号</th><th>内容</th><th>添加时间</th</tr>
 7 <%foreach(Order od in Model)
 8  {
 9      %>
10      <tr><td><%=od.OrderID %></td><td><%=od.OrderDate.ToString() %></td><td><%=od.CustomerID %></td><td><%=od.ShipAddress %></td></tr>
11      <%
12  } %>
13 </table>
14 <p>jQuery Ajax：</p>
15 <%=Html.AjaxPager(Model, new PagerOptions() { PageIndexParameterName = "id", ShowDisabledPagerItems = false,ShowPageIndexBox=true}, new AjaxOptions() { UpdateTargetId = "dvOrders",OnBegin="AjaxStart",OnComplete="AjaxStop"})%>
16 </div>

 

2.在项目中引用MvcPager.dll（http://www.zhaodll.com/dll/m/201210/232959.html）

3.在Script文件夹中添加jquery.blockUI.js（http://malsup.com/jquery/block/#download）

4.在Controller中一个ActionResult的Action

 1 public ActionResult ajaxview(int? id)
 2         {
 3             using (var db = new MvcPagerSampleDataContext())
 4             {
 5                 PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);
 6                 if (Request.IsAjaxRequest())
 7                 {
 8                     System.Threading.Thread.Sleep(2000); //休眠3秒，模拟需要花费较长时间才能完成的任务
 9                     return PartialView("UCLoading", orders);
10                 }
11                 return View(orders);
12             }
13         }

 

5.然后在建立一个强类型的ajaxview视图

 1 <%@ 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"%>
 2 
 3 <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  Ajax正在加载示例 </asp:Content>
 4 
 5 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
 6 
 7 <script language="javascript" type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.4.2.min.js") %>"></script> 
 8 
 9 <script language="javascript" type="text/javascript" src="<%=Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
10 
11  <script language="javascript" type="text/javascript" src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>
12 
13  <script language="javascript" type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.blockUI.js") %>"></script> 
14 
15 <script language="javascript" type="text/javascript">    
16 
17  function AjaxStart(){ $.blockUI({ message: '<h2>
18 
19 <img src="<%=Url.Content("~/Images/loading.gif") %>" width="16" height="16"/>正在获取数据，请稍候...</h2>' }); } 
20 
21    function AjaxStop() { $.unblockUI(); } </script>    
22 
23    <div>本示例演示使用MvcPager的Ajax分页功能在分页时使用Modal Dialog显示“正在加载...”效果，其中的Modal Dialog效果通过jQuery <a href="http://malsup.com/jquery/block" target="_blank">BlockUI插件</a>实现。</div>     <br /> <%Html.RenderPartial("ajaxview", Model); %> </asp:Content>

 

6.效果展示

 

7.OK了！！

 

转载于:https://www.cnblogs.com/chenyin/archive/2013/05/05/MVC-AJAX.html