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>

主要修改三個地方：

  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);}

可根據控件器，創建空視圖，添加第一行和最后一行，最后一行即是調用分部視圖。

至此，分頁完成。