MVC项目中的分页实现例子

在开发项目中，写了一个分页实现的例子，现在把源代码贴上，以供以后写代码时参考

在列表的头部，有如下显示，

这个代表一个页面显示10条记录，总共22条记录。

这个是页面底部的显示

那么如何来显示这个分页效果，如何来写一个泛型的通用的分页类实现分页效果呢

第1个类 Paging.cs

这个类包括分页需要的一些变量，包括页面数PageCount, 上面图片中Previous,Next是否显示，以及Previous 和 Next对应的链接URL, 以及组成URL的各部分

using System;

using System.Collection.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Web;

public class Paging

{

    public string PrependStr = string.Empty;

    public string UrlPart;

    public string NextHrefUrl = "";

    public string PrevHrefUrl = "";

    public bool IsPreviousVisible = false;

    public bool IsNextVisible = false;

    private int _pageCount;

    private string _summary;

    public int[] Numbers {get; set;}

    public int PageSize {get; set;}

    public int PageNo

    {

       get

       {

          int pageNo = ;

          if(HttpContext.Current.Request["page"] != null && !String.IsNullOrEmpty(HttpContext.Current.Request["page"]))

           {

              Int32.TryParse(HttpContext.Current.Request["page"], out pageNo);

           }

           return pageNo;

         }

      }

     public void BindPaging(string urlPart, int recordCount, int pageSize, string prependStr, string summary)

    {

        _pageCount = (int)Math.Ceiling((decimal)recordCount / pageSize);

        UrlPart = urlPart.Split('?')[];

        _summary = summary;

        PrependStr = prependStr;

        Numbers = new int[_pageCount];

        for(int i = ; i <= _pageCount; i++)

             Numbers[i-] = i;

       PrepagePaging();

     }

     protected void PreparePaging()

     {

           if(PageNo == )

                IsPreviousVisible = false;

           if (PageNo ==  && _pageCount == )

            {

                IsPreviousVisible = false;

                IsNextVisible = false;

            }

            else if (PageNo ==  && PageNo < _pageCount)

            {

                IsPreviousVisible = false;

                IsNextVisible = true;

                NextHrefUrl = UrlPart + "?page=" + (PageNo + ).ToString() + PrependStr;

            }

            else if (PageNo >  && PageNo < _pageCount)

            {

                IsPreviousVisible = true;

                PrevHrefUrl = UrlPart + "?page=" + (PageNo - ).ToString() + PrependStr;

                IsNextVisible = true;

                NextHrefUrl = UrlPart + "?page=" + (PageNo + ).ToString() + PrependStr;

            }

            else if (PageNo == _pageCount)

            {

                IsPreviousVisible = true;

                PrevHrefUrl = UrlPart + "?page=" + (PageNo - ).ToString() + PrependStr;

                IsNextVisible = false;

            } 

     }

}

上面这个类是分页需要的类，我们当然还需要一个类，来实现分页中的实际页面，也就是PagedResult, 但是因为我们并不知道页面中的具体内容，我们是要做一个通用的例子，所以，使用泛型来实现

第2个类 PagedResult.cs

我们来看看这个类, 我们先定义一个泛型接口 IPagedResult<T>

public interface IPagedResult<T>

{

     ICollection<T> Result {get;}

     int Total {get;}

     int CurrentPage {get; set;}

     int PageCount {get; set;}

     int PageSize {get; set;}

     int RowCount {get; set;}

     bool IsEmpty {get;}

     void Add(T entity);

     string GetCurrentPageRangeString();

}

接下来我们再定义一个泛型类PagedResult<T>,来继承这个泛型接口

public class PagedResult<T> : IPagedResult<T>

{

       private readonly Collection<T> _result;

       private readonly int _total;

       //依赖注入 构造函数

       public PagedResult(IEnumerable<T> result, int total)

       {

                 _result = new Collection<T>(new List<T>(result)); // 这里也是一个小知识点，可以通过new List(IEnumerable) 把IEnumerable类型转为List类型

                 _total = total;

        }

        public PagedResult() : this(new List<T>(),)

        {

         }

        public int CurrentPage {get; set;}

        public bool IsEmpty

        {

             get

             {

                    return _result.Count == ;

              }

        }

         public int PageCount {get; set;}

         public int PageSize {get; set;}

         public ICollection<T> Result

         {

                  get

                  {

                        return _result;

                   }

         }

        public int RowCount {get; set;}

        public int Total

        {

            get

            {

                  return _total;

            }

        }

        public void Add(T entity)

        {

                _result.Add(entity);

        }

        public string GetCurrentPageRangeText()

        {

             CurrentPage = CurrentPage ==  ? : CurrentPage;

             var start = PageSize * (CurrentPage - ) + ;

             var end = CurrentPage * PageSize <= Total ? start + PageSize - : Total;

              if(Total == )

                 return "No results found";

              string resultsOf = "results of";

              string showing = "Showing";

              return string.Format("{0} {1} - {2} {3} {4}", showing, start, end, resultsOf, Total);

        }

}

我们还需要一个类，是根据类的结果列表来获取它的页结果列表PagedResult, 这是一个帮助类. 我们给它取名为PaginationHelper.cs

public static class PaginationHelper

{

      public static int TotalPage(int total, int rowPerPage)

      {

            if((total == ) || (rowPerPage == ))

            {

                  return ;

            }

            if((total % rowPerPage) == )

            {

                   return total / rowPerPage;

            }

            double result = Convert.ToDouble(total / rowPerPage);

            result = Math.Ceiling(result);

            return Convert.ToInt32(result) + ;

      }

     public static int StartIndex(int? page, int rowPerPage)

     {

         return (page.HasValue && (page.Value > )) ? ((page.Value -) * rowPerPage) : ;

     }

     public static PagedResult<T> GetPagedResultSet<T>(IEnumerable<T> resultSet, int pageSize, int? currentPage)

     {

             if(resultSet == null)

                  return new PagedResult<T>();

             var result = new List<T>(resultSet);  //这个是把IEnumerable转换为List的方法

             var resultCount = result.Count;

             var startIndex = StartIndex(currentPage, pageSize);

             var results = result.Skip(startIndex).Take(pageSize); // 这里放的是当前这个页面的结果列表，因为我们在View中需要列出当前那页的结果列表

              var pageTotals = TotalPage(resultCount,pageSize);

               if(currentPage.HasValue && currentPage > pageTotals)

                            currentPage = null;

                var pageResultSet = new PagedResult<T>(results,resultCount)

                {

                   CurrentPage = currentPage.HasValue ? currentPage.Value : ,

                   PageCount = pageTotals,

                   PageSize = pageSize

                 };

                 return pagedResultSet;

     }

public static PagedResult<T> GetPagedResult<T>(Func<IEnumerable<T>> func, int pageSize, int? currentPageIndex) where T : class

{

    return GetPagedResultSet(func(), pageSize, currentPageIndex);

}

现在我们开始写这个View

写这个图显示的View, 它用的Model 就是上面的Paging.cs, 我们可以看到，这个类Paging.cs没有关注分页的内容是什么，也就是它拥有完全的通用性，无论分页中的内容具体是什么，都可以使用这个来实现这个图示例的分页，那我们现在来看看这个View是怎么写的

Paging.cshtml

@inherits UmbracoViewPage<Paging>

@if (Model.Numbers.Length > )

{

    <div class="row">

        <div class="col-md-6">

            <div class="pagination-page">

                <ul>

                    @if (Model.IsPreviousVisible)

                    {

                        <li>

                            <a href="@Model.PrevHref">Previous</a>

                        </li>

                    }

                    @foreach (var number in Model.Numbers)

                    {

                    var urlHref = Model.UrlPart + "?page=" + (number).ToString() + Model.PrependStr;

                        <li class="@(number == Model.PageNo ? "active" : string.Empty)">

                            <a href="@urlHref">@number</a>

                        </li>

                    }

                    @if (Model.IsNextVisible)

                    {

                        <li>

                            <a href="@Model.NextHref">Next</a>

                        </li>

                    }

                </ul>

            </div>

        </div>

    </div>

}

这里面还有一些css 我就不贴在这里了，CSS及格式可以自己设置调整

接下来我们就来看看分页内容的实现，也就是说每一页中的内容的实现

我们举个例子，这个列表是News的列表，每页显示10条News,每一条News上的title上是一个链接，点击这个链接会打开一个新的页面(有这个news的URL去链接到另一个页面)来显示这个news的全部内容

显示每页News内容的页面，所使用的Model是NewsSearchResult, 具体如下

NewsSearchResult.cs

public class NewsSearchResult

{

     public NewsSearchResult()

     {

      }

      public int? PageNo {get; set;}

      public IPagedResult<NewsResult> NewsResults {get; set;}

      public Paging Paging {get; set;}

}

可以看到，它这里用到了我们上面定义的Paging类，已经接口IPagedResult<T>, 里面又有一个类NewsResult, 定义的是每一个News所包含的一些基本属性(title, url等)，我们来看看它的定义

NewsResult.cs

public class NewsResult

{

     public string NewsTitle {get; set;}

     public string NewsDesc {get; set;}

     public string NewsDate {get; set;}

     public string PageUrl {get; set;}

}

定义好了model后，我们来看看MVC中的Controller的实现，我们取名为SearchController.cs

SearchController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

public class SearchController : Controller

{

     public ActionResult Render()

     {

        return View("NewsListSearch.cshtml", BuildInitialModel());

      }

      public NewsSearchResult BuildInitialModel()

      {

         NewsSearchResult model = new NewsSearchResult();

         model.PageNo = !string.IsNullOrEmpty(Request["page"]) ? Int32.Parse(Request["page"]) : ;

         List<NewsResult> newsResults = GetAllNewsList();

         Paging paging = new Paging();

         IPagedResult<NewsResult> pagedResultSet = null;

         pagedResultSet = PaginationHelper.GetPagedResultSet(newsResults,,paging.PageNo); //每页面显示10条结果

         paging.BindPaging(Request.RawUrl, pagedResultSet.Total,,string.Empty,string.Empty);

         model.Paging = paging;

         model.NewsResults = pagedResultSet;

         return model;

      }     

       private List<NewsResult> GetAllNewsList()

       {

         List<NewsResult> allNewsResults = new List<NewsResult>{

          new NewsResult {NewsTitle = "News 1", NewsDesc = "This is the description for News 1", NewsDate = "2017-01", PageUrl = "www.ournews.com/list/news1"},

          new NewsResult {NewsTitle = "News 2", NewsDesc = "This is the description for News 2", NewsDate = "2017-02", PageUrl = "www.ournews.com/list/news2"},

          new NewsResult {NewsTitle = "News 3", NewsDesc = "This is the description for News 3", NewsDate = "2017-03", PageUrl = "www.ournews.com/list/news3"},

          new NewsResult {NewsTitle = "News 4", NewsDesc = "This is the description for News 4", NewsDate = "2017-04", PageUrl = "www.ournews.com/list/news4"},

          new NewsResult {NewsTitle = "News 5", NewsDesc = "This is the description for News 5", NewsDate = "2017-05", PageUrl = "www.ournews.com/list/news5"},

          new NewsResult {NewsTitle = "News 6", NewsDesc = "This is the description for News 6", NewsDate = "2017-06", PageUrl = "www.ournews.com/list/news6"},

          new NewsResult {NewsTitle = "News 7", NewsDesc = "This is the description for News 7", NewsDate = "2017-07", PageUrl = "www.ournews.com/list/news7"},

          new NewsResult {NewsTitle = "News 8", NewsDesc = "This is the description for News 8", NewsDate = "2017-08", PageUrl = "www.ournews.com/list/news8"},

          new NewsResult {NewsTitle = "News 9", NewsDesc = "This is the description for News 9", NewsDate = "2017-09", PageUrl = "www.ournews.com/list/news9"},

          new NewsResult {NewsTitle = "News 10", NewsDesc = "This is the description for News 10", NewsDate = "2017-10", PageUrl = "www.ournews.com/list/news10"},

          new NewsResult {NewsTitle = "News 11", NewsDesc = "This is the description for News 11", NewsDate = "2017-11", PageUrl = "www.ournews.com/list/news11"},

          new NewsResult {NewsTitle = "News 12", NewsDesc = "This is the description for News 12", NewsDate = "2017-12", PageUrl = "www.ournews.com/list/news12"},

          new NewsResult {NewsTitle = "News 13", NewsDesc = "This is the description for News 13", NewsDate = "2018-01", PageUrl = "www.ournews.com/list/news13"},

          new NewsResult {NewsTitle = "News 14", NewsDesc = "This is the description for News 14", NewsDate = "2018-02", PageUrl = "www.ournews.com/list/news14"},

          new NewsResult {NewsTitle = "News 15", NewsDesc = "This is the description for News 15", NewsDate = "2018-03", PageUrl = "www.ournews.com/list/news15"},

          new NewsResult {NewsTitle = "News 16", NewsDesc = "This is the description for News 16", NewsDate = "2018-04", PageUrl = "www.ournews.com/list/news16"},

          new NewsResult {NewsTitle = "News 17", NewsDesc = "This is the description for News 17", NewsDate = "2018-05", PageUrl = "www.ournews.com/list/news17"},

          new NewsResult {NewsTitle = "News 18", NewsDesc = "This is the description for News 18", NewsDate = "2018-06", PageUrl = "www.ournews.com/list/news18"},

          new NewsResult {NewsTitle = "News 19", NewsDesc = "This is the description for News 19", NewsDate = "2018-07", PageUrl = "www.ournews.com/list/news19"},

          new NewsResult {NewsTitle = "News 20", NewsDesc = "This is the description for News 20", NewsDate = "2018-08", PageUrl = "www.ournews.com/list/news20"},

          new NewsResult {NewsTitle = "News 21", NewsDesc = "This is the description for News 21", NewsDate = "2018-09", PageUrl = "www.ournews.com/list/news21"},

          new NewsResult {NewsTitle = "News 22", NewsDesc = "This is the description for News 22", NewsDate = "2018-10", PageUrl = "www.ournews.com/list/news22"},

          new NewsResult {NewsTitle = "News 23", NewsDesc = "This is the description for News 23", NewsDate = "2018-11", PageUrl = "www.ournews.com/list/news23"},

          new NewsResult {NewsTitle = "News 24", NewsDesc = "This is the description for News 24", NewsDate = "2018-12", PageUrl = "www.ournews.com/list/news24"}

              }

        }

}

现在我们来看看这个展示结果页面的View，也就是每一个页面实际显示的View ===> NewsList.cshtml

@inherits UmbracoViewPage<NewsSearchResult>

<div class="col-md-12">

    <div class="support-item" style="padding-bottom:0px">

        @foreach (var newsResult in Model.NewsResults.Result)

        {

              <a href="@newsResult.PageUrl">@newsResult.NewsTitle</a>

                        <div>

                            <p class="small">@newsResult.NewsDesc</p>

                            <a href="@newsResult.PageUrl">

                                <span class="small">Read News

                                ›</span>

                            </a>

                        </div>

                    </div>

                </div>

        }

    </div>

</div>

这上面的 Model.NewsResults.Result 里面是当前页面的那个10条News结果

最后，我们来看看页面顶部的显示当前News记录顺序的View, 就是显示如下图示的View

我们给这个View取名为ShowingDesc.cshtml, 内容如下

@inherits UmbracoViewPage<NewsSearchResult>

<div class="col-md-6">

    @if (Model.NewsResults.Total > )

    {

        <p class="pagination-result" style="text-align: left;">

            <strong> @Model.NewsResults.GetCurrentPageRangeString() </strong>

        </p>

    }

</div>

到目前为止，页面的3部分都有了，分别是 ShowingDesc.cshtml, NewsList.cshtml,Paging.cshtml 我们把它们组成最后的显示页面 NewsListSearch.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage<NewsSearchResult>

<div class="col-md-12">

    @Html.Partial("ShowingDesc.cshtml", Model)

    <hr />

</div>

@Html.Partial("NewsList.cshtml", Model)

<div class="col-md-12">

    @Html.Partial("Paging.cshtml", Model.Paging)

</div>

巴特西

MVC项目中的分页实现例子

最新文章

热门文章