Asp.net MVC分頁執行個體

標籤：style   blog   http   color   io   os   ar   使用   for   

分頁是網頁準系統，這裡主要討論在Asp.net MVC環境下分頁的前端實現，不涉及後台分頁。實現效果如顯示：

Step 1.建立分頁資訊類

 1     public class PagingInfo 2     { 3         public int TotalItmes { set; get; } 4         public int ItemsPerPage { set; get; } 5         public int CurrentPage { set; get; } 6         public int TotalPages 7         { 8             get { return (int)Math.Ceiling((decimal)TotalItmes / ItemsPerPage); } 9         }10     }

Step 2.建立HtmlHelper的分頁擴充方法

 1     public static class PagingHelpers 2     { 3         public static MvcHtmlString PageLinks(this HtmlHelper html,PagingInfo pagingInfo,Func<int,string> pageUrl) 4         { 5             StringBuilder result = new StringBuilder(); 6             result.Append("<ul>"); 7  8             9             if (pagingInfo.CurrentPage > 1)10             { 11                 //建立首頁分頁連結12                 result.Append("<li>");13                 result.Append("<a href=‘");14                 result.Append(pageUrl(1));15                 result.Append("‘>首頁</a>");16                 result.Append("</li>");17                 //建立上一頁分頁連結18                 result.Append("<li>");19                 result.Append("<a href=‘");20                 result.Append(pageUrl(pagingInfo.CurrentPage-1));21                 result.Append("‘>上一頁</a>");22                 result.Append("</li>");23             }24 25             for(int i=1;i<=pagingInfo.TotalPages;i++)26             {27                 if(i<=2||i>=pagingInfo.CurrentPage-3&&i<=pagingInfo.CurrentPage+3||i>=pagingInfo.TotalPages-1)28                 {29                     createPageLink(pagingInfo, pageUrl, result, i);30                 }31                 else if(result[result.Length-1]!=‘.‘)32                 {33                     result.Append("...");34                 }35             }36 37             if (pagingInfo.CurrentPage < pagingInfo.TotalPages)38             {39                 //建立上一頁分頁連結40                 result.Append("<li>");41                 result.Append("<a href=‘");42                 result.Append(pageUrl(pagingInfo.CurrentPage + 1));43                 result.Append("‘>下一頁</a>");44                 result.Append("</li>");45                 //建立首頁分頁連結46                 result.Append("<li>");47                 result.Append("<a href=‘");48                 result.Append(pageUrl(pagingInfo.TotalPages));49                 result.Append("‘>末頁</a>");50                 result.Append("</li>");51             }52             result.Append("</ul>");53             return MvcHtmlString.Create(result.ToString());54         }55 56         private static void createPageLink(PagingInfo pagingInfo, Func<int, string> pageUrl, StringBuilder result, int i)57         {58             if (i == pagingInfo.CurrentPage)59             {60                 result.Append("<li class=‘current‘>");61             }62             else63             {64                 result.Append("<li>");65             }66             result.Append("<a href=‘");67             result.Append(pageUrl(i));68             result.Append("‘>");69             result.Append(i);70             result.Append("</a>");71             result.Append("</li>");72         }73     }

擴充方法採用拼字串的方式，也可以使用TagBuilder。

Step 3.添加Action

        public ActionResult Index(int page = 1)        {            PagingInfo pagingInfo = new PagingInfo {CurrentPage = page, TotalItmes = 100, ItemsPerPage = 5};            return View(pagingInfo);        }

這裡TotalItems、ItemsPerPage均寫死資料，實際TotalItems應從資料庫統計計算，ItemsPerPage可以寫入Web.config的AppSettings，也可讀取資料庫。

Step 4.添加View

@using 分頁.HtmlHelpers@model 分頁.Models.PagingInfo<div class="pages">    @Html.PageLinks(Model, x => Url.Action("Index", new { page = x }))</div>

現在已經可以運行查看結果：

Step 5.添加CSS，修改樣式

.pages {    margin: 20px auto;    clear: both;    width: 890px;    text-align: center;    padding: 10px 0px;    text-align: center;    font-size: 12px;}    .pages ul {        display: inline;        margin: 0 auto;        width: 890px;    }    .pages li {        display: inline;        margin: 0 auto;    }    .pages a {        padding: 7px 11px;        border-radius: 3px;        margin: 4px;        background-color: #f2f3f5;        border: #ddd 1px solid;        color: #555;        text-decoration: none;    }        .pages a:hover, li.current a {            background-color: #CC0000;            color: #FFFFFF;            border: #CC0000 1px solid;            text-decoration: none;        }

這樣分頁顯示的前端部分就完成了，當然還有後台分頁、路由設定等等問題留待下次完成。另外部分代碼可修改用於WebForm。

Asp.net MVC分頁執行個體