ASP.NET MVC 2入門演練 5 —— 分頁

    先睹為快，如下： 

    

    分頁使用的是Paging with ASP.NET MVC，你可以點擊這裡下載和瞭解使用說明。或者從這裡下載源碼：/Files/Ferry/VS2010/martijnboland-MvcPaging-515e582.zip

    下載下來後解壓，開啟解決方案，將MvcPaging項目編譯，然後在Debug/Bin目錄下找到MvcPaging.dll，並添加到項目中（添加引用）。

    解決方案中還有一個Demo項目，會對你使用MvcPaging有協助。

    好了，接下來，看看如何改造下我們的代碼，實現列表翻頁功能。

一、添加引用

    就是上面說的，不多說了。如果使用過程中發現找不到某個（些）對象，將項目編譯一下就好了，當然命名空間要引用。

二、改造Controller：NewsController.cs

      先添加對命名空間的引用：

using MvcPaging;

      再將List方法修改如下：

        public ActionResult List(int? page)
        {            //每頁顯示記錄數，這裡設定了1
            const int defaultPageSize = 1;
            int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
            return View(db.CMSNews.OrderByDescending(Model => Model.PubDate).ToList().ToPagedList(currentPageIndex, defaultPageSize));
            //return View(db.CMSNews.OrderByDescending(Model => Model.PubDate).ToList());
        }

 

三、修改View：List.aspx

　　先修改Page命令，就是修改Inherits屬性，再添加對所需命名空間的引用：

      這裡的CMSNews就是我們這個例子中的Model。

<%--<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MVC2Demo.Models.CMSNews>>" %>--%>
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage<IPagedList<CMSNews>>" %>

<%@ Import Namespace="MvcPaging"%>
<%@ Import Namespace="MVC2Demo.Models"%>

 

　　添加分頁代碼（div部分是新加的）：

<p>
        <%: Html.ActionLink("Create New", "Create") %>
        <div class="pager">
        <%= Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount) %>
        </div>
    </p>

 

四、添加CSS

     實際上，上面的步驟已經完成的分頁的功能，但要讓分頁更好看一些，那麼從下載的Demo項目的Content/Site.css中將如下代碼拷貝到我們網站的Css檔案中，我們也看到了，在上面的div中也指定了使用此樣式。

/* Pager */
.pager 
{
    margin:8px 3px;
    padding:3px;
}

.pager .disabled 
{
    border:1px solid #ddd;
    color:#999;
    margin-top:4px;
    padding:3px;
    text-align:center;
}

.pager .current 
{
    background-color:#06c;
    border:1px solid #009;
    color:#fff;
    font-weight:bold;
    margin-top:4px;
    padding:3px 5px;
    text-align:center;
}

.pager span, .pager a
{
    margin: 4px 3px;
}

.pager a 
{
    border:1px solid #c0c0c0;
    padding:3px 5px;
    text-align:center;
    text-decoration:none;
}