MVC3学习：利用mvc3+ajax结合MVCPager实现分页

本例使用表格Users(Uid,UserName,PassWord),数据库访问使用EF first code.

   public class Users

    {

        [Key]

        public int Uid { get; set; }

        public string UserName { get; set; }

        public string PassWord { get; set; }

        

    }

第一步：下载MVCPager.dll，添加到引用中。

MVCPager分页控件和AspNetPager分页控件是同一作者:陕西吴起娃，相信以前很多人都用过他的AspNetPager分页控件。MVCPager.dll可到他的个人主页去下载 http://www.webdiyer.com/

第二步：添加命名空间

打开view文件夹中下的web.config，添加两个命名空间。

  <pages pageBaseType="System.Web.Mvc.WebViewPage">

      <namespaces>

        <add namespace="System.Web.Mvc" />

        <add namespace="System.Web.Mvc.Ajax" />

        <add namespace="System.Web.Mvc.Html" />

        <add namespace="System.Web.Routing" />

        <add namespace="Webdiyer.WebControls.Mvc"/>

        <add namespace="ajaxDemo.Models"/>

      </namespaces>

    </pages>

做这一步的目的，是为view文件夹下的所有视图统一添加命名空间，就不需要每一个去单独添加。<add namespace="Webdiyer.WebControls.Mvc"/>这个命名空间，就是MVCPager分页控件的命名空间。<add namespace="ajaxDemo.Models"/>是您的项目下的Models。此处我的项目名称是ajaxDemo。

第三步：制作分部视图

ajax分页，是将数据分好后，放在一个分部视图中，然后再将分部视图放在主视图中。

根据模板，创建一个list的分部视图，我取名为UserPager.cshtml

@model PagedList<Users> //此处需要修改



@*//此表格放入一个DIV中，并设置ID，分页控件中需要用天此ID*@

<div id="data"> 

<table>

    <tr>

        <th>

            用户名

        </th>

        <th>

            密码

        </th>

        <th></th>

    </tr>



@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.UserName)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.PassWord)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id=item.Uid }) |

            @Html.ActionLink("Details", "Details", new { id=item.Uid }) |

            @Html.ActionLink("Delete", "Delete", new { id=item.Uid })

        </td>

    </tr>

}

</table>

@*//此处添加分页控件*@

@Html.AjaxPager(

Model,

new PagerOptions { PageIndexParameterName = "page" },

new AjaxOptions { UpdateTargetId = "data" }

)

</div>

View Code

主要修改三个地方：

  1、最开始一行修改为@model PagedList<Users>，Users为您的实体名。

  2、将表格<table>放入到一个div中，并为此DIV设定一个ID，后面放置分页控件时会用到此ID。

  3、在表格<table>的后面，放置分页控件，我设定的分页参数为page,需要分页的区域为data.

至此，分部视图制作完成。

第四步：制作主视图的控制器

我将主视图命名为UserList

 public ActionResult UserList(int? page)

        {

            PagedList<Users> u = db.Users.OrderBy(c=>c.Uid).ToPagedList (page ?? 1, 10);

            if (Request.IsAjaxRequest())

                return PartialView("UserPager", u);

            return View(u);

         }

分页参数是page,是前面放控件时设定好的，默认显示第1页，每页显示10条记录。

注意，在查询数据时，一定要用OrderBy排序，否则会出错。因为作者用的是linq的take和skip函数来进行分页的，用这两个函数前必须要排序。

第五部:制作视图UserList.cshtml

分部视图是不能独立显示的，必须放在其它主视图中显示。此例，我是将分部视图UserPager.cshtml放在主视图UserList.cshtml中显示。

分部视图主要用来分页，主视图主要用来调用分部显示显示数据。

@model PagedList<Users>

@{

    ViewBag.Title = "UserList";

    Layout = "~/Views/Shared/_Layout.cshtml";

}



<h2>用户列表</h2>

@{Html.RenderPartial("UserPager",Model);}

可根据控件器，创建空视图，添加第一行和最后一行，最后一行即是调用分部视图。

至此，分页完成。