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