MVC MvcPager Ajax分页

最新推荐文章于 2023-11-23 14:39:25 发布

long881227

最新推荐文章于 2023-11-23 14:39:25 发布

阅读量2.3k

点赞数

分类专栏： MVC编程文章标签： mvc ajax asp.net jquery import action

MVC编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、创建PartialView：

使用Ajax分页功能需将数据显示及分页部分独立于ASP.NET MVC用户控件或Partial View中，Ajax分页时只获取并更新这一部分的内容，下面我们先创建一个显示数据和分页的Partial View。

在解决方案资源管理器的Views—Orders文件夹上点击右键，从弹出的快捷菜单中选择“新建”—“View”，然后在弹出的“Add View”对话框中选中“Create a partial view(.ascx)”复选框，并将View名称改为“UCOrderList”后点击“添加”按钮， Visual Studio 2008将创建一个空白的Partial View并在编辑器中打开，该Partial View此时只有一行Control指令代码：<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> ，在该代码下引入Order实体类所在的命名空间和Webdiyer.WebControls.Mvc命名空间，代码如下：

<%@ Import Namespace="MvcPagerSample.Models"%>
<%@ Import Namespace="Webdiyer.WebControls.Mvc"%>

然后将Control指令中的 Inherits="System.Web.Mvc.ViewUserControl" 改为：Inherits="System.Web.Mvc.ViewUserControl<PagedList<Order>>"，并加入数据显示代码如下：

<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>

分页部分将加在数据显示部分之后，ASP.NET MVC Pager支持两种Ajax框架来实现Ajax分页，一种是ASP.NET MVC默认的MicrosoftAjax，另一种是jQuery，两种Ajax分页方式除要引入的客户端脚本不同外，分页控件使用的扩展方法也不同，如果使用MicrosoftAjax，则应该调用AjaxHelper的Pager扩展方法，分页代码的写法如下：

<%=Ajax.Pager(Model,new PagerOptions(){PageIndexParameterName="id"},new AjaxOptions(){UpdateTargetId="dvOrders"}) %>

如果使用jQuery，则应该调用HtmlHelper的AjaxPager扩展方法，分页代码写法如下：

<%=Html.AjaxPager(Model,new PagerOptions(){PageIndexParameterName="id"},new AjaxOptions(){UpdateTargetId="dvOrders"}) %>

上面的AjaxOptions中的UpdateTargetId属性值表示ASP.NET MVC Pager在实现Ajax分页时要更新其内容的Html元素的Id，到现在为止我们还没定义这个元素，不过定义的方法很简单：创建一个div元素，将其Id设为dvOrders，然后将上面的数据显示及分页部分的代码都包在这个div元素中，最终的Partial View代码如下所示：

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PagedList<Order>>" %>
    <%@ Import Namespace="MvcPagerSample.Models"%>
    <%@ Import Namespace="Webdiyer.WebControls.Mvc"%>
    <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>
    <%=Ajax.Pager(Model,new PagerOptions(){PageIndexParameterName="id"},
                        new AjaxOptions(){UpdateTargetId="dvOrders"}) %>
    </div>

如果使用jQuery，则最后部分的分页代码稍有不同，请看前面的两种Ajax分页方法分页代码写法的说明。至此Partial View创建完成，需要说明的一点是，如果该Partial View还要在其它Controller中调用的话，那么应该把它保存到Views下的Shared文件夹中，本示例中我们只在OrdersController中调用，所以将它保存在Views下的Orders文件夹中即可。

2、创建View：

类似于ASP.NET WebForm中的用户控件，ASP.NET MVC的用户控件或Partial View也不能直接做为页面呈现，它只能被包含在一个View中，下面我们就创建一个包含这个使用Ajax分页功能的Partial View的View。

在解决方案资源管理器中Views下的Orders文件夹上点击右键，从快捷菜单中选择“新建”—“View”，在弹出的“Add View”对话框中修改View名称，本例中改为MsAjaxOrders，修改名称后点击“添加”按钮，新建的View就会在Visual Studio 2008的编辑器中打开。

与刚才创建Partial View一样，在该View中引入两个命名空间并修改Page指令代码中的Inherits属性值，然后在页面主体部分插入调用刚才创建的Partial View的代码如下：

<%Html.RenderPartial("UCOrderList", Model); %>

插入Partial View后剩下最后也是最重要的一步：引入相应的客户端脚本库。如果使用MicrosoftAjax进行分页，则需要引入MicrosoftAjax.js和MicrosoftMvcAjax.js两个客户端脚本文件，如果使用jQuery分页，则需引入jQuery脚本文件，所有这些脚本文件都已包含在默认的ASP.NET MVC项目中的Scripts文件夹中，您无需再去下载，直接引用即可，最终生成的View代码如下：

<%@ 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 MVC Pager 使用 MicrosoftAjax分页示例
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<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 MVC Pager 使用 MicrosoftAjax分页示例</h2>
<%Html.RenderPartial("UCOrderList", Model); %>
</asp:Content>

View部分至此结束，下面我们为Controller创建相应的Action。

3、编写Controller的Action代码：

打开演练1中创建的OrdersController.cs文件，新增一个MsAjaxOrders方法（即Action），代码如下：

        public ActionResult MsAjaxOrders(int? id)
        {
            using (var db = new MvcPagerSampleDataContext())
            {
                PagedList<Order> orders = db.Orders.ToPagedList(id ?? 1, 20);
                if (Request.IsAjaxRequest())
                    return PartialView("UCOrderList", orders);
                return View(orders);
            }
        }

该Action名即可前面创建的View的名称，PartialView方法中的第一个参数的值就是前面创建的包含数据显示和分页部分代码的Partial View的名称。