菜鳥上路‧ 運用ASP MVC2 編寫資料分頁顯示(二)

大家好! 今日再來繼續講 <<編寫資料分頁顯示 >>

先前的範例已學習了如何在所有記錄中抽取分頁應顯示的記錄，哪麼現在就是要開始編寫分頁顯示，首要步驟便是新增一個頁數的顯示列class物件，然後再編寫頁數的程式碼於物件中。

我先在Solution Explorer新增資料夾名PageUI，並在資料夾內新增一個PageNumberUI.vb的class物件，如下圖:

然後在物件內加上以下的程式碼，如下:

   1:  Public Class PageNumberUI

   2:   

   3:  Public Shared Function PageNumber(Bgal currentPage As Integer, ByVal currentPageSize As Integer, _ ByVal totalRecords As Integer, ByVal pageForward As Integer) As String

   4:   

   5:  Dim pageLimit As Integer = 100 

   6:  Dim sb1 As New StringBuilder()

   7:   

   8:  Dim eu As Integer = (currentPage - 1) * currentPageSize

   9:  Dim backBtn As Integer = eu - currentPageSize 

  10:  Dim nextBtn As Integer = eu + currentPageize 

  11:  Dim pagethis As Integer = eu + currentPageSize

  12:   

  13:  Dim pagefwd As Integer = pageForward + pageLimit 

  14:  Dim pageback As Integer = pageForward - pageLimit 

  15:  Dim i As Integer = pageForward

  16:   

  17:  If pageForward <> 0 Then

  18:     sb1.AppendLine(String.Format( _

  19:          "<a href=""/Home/Index?currentPageIndex={0}&forward={1}"">&lsaquo;&lsaquo;</a>", _

  20:          ((pageback / currentPageize) + 1), pageback))

  21:  End If

  22:   

  23:  If (backBtn >= 0) And (backBtn >= pageForward) Then

  24:      sb1.AppendLine(String.Format( _

  25:          "<a href=""/Home/Index?currentPageIndex={0}&forward={1}"">&lsaquo;</a>", _

  26:          currentPage - 1, pageForward))

  27:  End If

  28:   

  29:   

  30:  Do While (i < totalRecords) And (i < (pageForward + pageLimit))

  31:   

  32:  If i <> eu Then

  33:      sb1.AppendLine(String.Format( _

  34:          "<a href=""/Home/Index?currentPageIndex={0}&forward={1}"">{0}</a>", _

  35:          ((i / currentPageSize) + 1), pageForward))

  36:  Else

  37:      sb1.AppendLine(String.Format("<b>{0}</b>", ((i / currentPageSize) + 1)))

  38:  End If

  39:   

  40:  i = i + currentPageSize

  41:   

  42:  Loop

  43:   

  44:   

  45:  If (pagethis < totalRecords) And (pagethis < (pageForward + pageLimit)) Then sb1.AppendLine(String_Format( _

  46:      "<a href=""/Home/Index?currentPageIndex={0}&forward={1}"">&rsaquo;</a>", _ currentPage + 1, pageForward))

  47:  End If

  48:   

  49:  If pagefwd < totalRecords Then

  50:      sb1.AppendLine(String_Format( _

  51:      "<a href=""/Home/Index?currentPageIndex={0}&forward={1}"">&rsaquo;&rsaquo;</a>", _

  52:          ((pagefwd / currentPageSize) + 1), pagefwd))

  53:  End If

  54:   

  55:  Return sb1.ToString()

  56:   

  57:  End Function End Class

以上PageNumber函式是我自行編寫出來，可以做出以下的分頁顯示:

而此函式需要四個變數才能把分頁顯示透過計算顯示出來。需要的四個變數分別是

1. currentPage 是指目前要顯示的頁數。
2. currentPageSize 是指一頁要顯示的記錄數目。
3. totalRecords 是指所有頁的記錄總筆數。
4. PageForward 是被用來計算超出的頁數，預設是0，暫時會不明白，在下面會再解釋。

在PageNumber函式內有一個變數叫pageLimit可被設定，而pageLimit=100意思是當記錄數超出100筆便會重新計算分頁顯示，可做出以下效果:

而pageLimit的值就是和PageForward的數值一起用來計算分頁顯示(* 修改pageLimit的數值時必要記得要是currentPageSize的倍數)

接著便是要修改HomeController.vb，修改成以下的程式碼:

   1:  Public Class HomeController

   2:  Inherits System_Web_Mvc_Controller

   3:   

   4:    Function Index(Optional ByVal currentPagelndex As Integer = 1, Optional ByVal forward As Integer = 0) As ActionResult 

   5:   

   6:      Dim dataContext As New DataClasses1DataContext

   7:      Dim ItemsPerPage As Integer = 10 '列出一頁包含多少筆記錄

   8:   

   9:      Dim Model = (From m In dataContext.ITStocks Order By m.SerialNum Select m)

  10:   

  11:      ViewData("ItemsPerPage") = ItemsPerPage

  12:      ViewData("currentPageIndex") = currentPagelndex

  13:      ViewData("count") = Model.Count() ViewData("pageForward") = forward

  14:   

  15:      Return View(Model.Skip((currentPageIndex - 1) * ItemsPerPage).Take(ItemsPerPage).ToList()) 

  16:   

  17:    End Function

  18:   

  19:  End Class

先說Index函式中兩個要輸入的參數currentPageIndex和forward，還記得上一篇currentPageIndex已出現於Index函式內，而現在再把它加到Index函式要輸入的參數是因為當用戶按下分頁顯示的任一頁數超連結時，會寄出該頁數的值作為QueryString (查詢字串)給伺服器，此時網頁會被更新，而Index函式在網頁被更新的過程中需要參數來重新計算分頁顯示，例如在分頁顯示按下第三頁的超連結，加到Index函式的參數currentPageIndex便能接收查詢字串內的頁數變數是3。

因此其實要轉變頁面的內容，所需的查詢字串就是currentPageIndex和forward這兩個變數，當沒有任何查詢字串提供給Index函式，currentPageIndex和forward便會分別以預設值1 (即第一頁) 和0 (用來計算超出的頁數，預設是0) 供LINQ進行查詢，而我先前寫的PageNumber函式就是產出頁數的超連結來提供這兩個變數。

另外，Model.count就是記錄的總筆數。它會被傳遞到我先前寫的PageNumber函式中，這樣PageNumber函式便有足夠的參數輸入。

現在只剩下Index.aspx要修改了，如下:

   1:  <%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

   2:   

   3:  <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server> Home Page </asp:Content>

   4:  <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

   5:    <p>

   6:    <table>

   7:    <tr>

   8:    <th>序號</th>

   9:    <th>產品描述</th>

  10:    <th>狀態</th>

  11:    </tr>

  12:   

  13:      <% For Each item In Model%>

  14:      <tr>

  15:       <td>

  16:        <%=Html.Encode(item.SerialNum)%>

  17:      </td>

  18:       <td>

  19:        <%=Html.Encode(item.Description)%>

  20:      </td>

  21:       <td>

  22:        <%=Html.Encode(item.Status)%>

  23:      </td>

  24:      </tr>

  25:      <% Next%>

  26:    </table>

  27:   

  28:    <%=test.PageNumberUI.PageNumber(ViewData("currentPageIndex"), Viewdata("ItemsPerPage"), ViewData("count"),  ViewData("pageForward"))%>

  29:    </p>

  30:   

  31:  </asp:Content>

重點就是test.PageNumberUI.PageNumber這句，意思就是把我所寫的分頁顯示 class物件顯示出用戶介面。大功告成!!