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

 

 

转载于:https://www.cnblogs.com/Ferry/archive/2010/06/21/1762098.html