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