ASP.NET 資料分頁第三篇 – 結合 Custom Control 處理 GridView 的 UI 呈現

 延續本系列前兩篇文章「ASP.NET 資料分頁第一篇 - 探討分頁原理及 SQL Server 2005 的 ROW_NUMBER 函數」、「ASP.NET 資料分頁第二篇 - 範例下載」，本系列的第三篇文章，同樣是處理 GridView 的「分頁」的問題，但前兩篇是處理資料庫的資料擷取問題，本篇是處理 GridView 前端 UI 呈現的問題。 
 
 本帖的重點，是版工我自己寫了一個 Custom Control 的 GridView，名為 WizardGridView，其直接繼承自微軟 ASP.NET 2.0 原生的 GridView 控制項，執行畫面如 1 所示，在換頁 (分頁) 功能、相關資訊顯示上，強化了微軟原生 GridView 不足之處。

 
圖 1　WizardGridView 的執行畫面，連結的資料庫為 SQL Server 2005 的 Northwind 資料庫的 Orders 資料表
 
 -------------------------------------------------
 本帖的範例程式碼下載點：
 http://files.cnblogs.com/WizardWu/080907.zip
 
 (執行本樣本，需要 SQL Server 2000 / 2005 資料庫的 Northwind 資料庫，以及 IIS 或 VS 2005 / 2008)
 -------------------------------------------------
 
  若您只是要測試此 Custom Control，可直接用 IIS 或 VS 2005 / 2008，開啟下載樣本裡的 SqlDataSource 網站。但您必須要有 SQL Server 2000 / 2005 的 Northwind 資料庫。

 另外，下載樣本中，活頁夾 ObjectDataSource，為結合本系列前兩篇文章的內容，結合「資料分頁」的處理，亦即當您的資料表有一百萬筆資料，依照微軟原生 GridView、DataSource 控制項的行為，當使用者每次單擊「下一頁」或頁碼，或單擊欄位 title 做排序時，每次都是一百萬筆資料全部重新擷取，此舉不但大量浪費 IIS 主機的記憶體，亦會消耗大量的 DB Server 系統資源及網路頻寬。
 
 若您要用 IIS、VS 2005 / 2008 開啟下載樣本的 ObjectDataSource 網站時，請先在 SQL Server 2005 裡，建立樣本內附的 Stored Procedure。透過這個 Stored Procedure，當 使用者操作 GridView、每次要換頁或排序時，只會去 Northwind 資料庫的 Orders 資料表，擷取真正需要的 10 筆資料，再從 DB 回傳此 10 筆資料，暫存在 IIS 記憶體裡的 DataSet 裡，最 後再呈現在前端的 GridView 中。有關詳細原理，請參考本系列的前兩篇文章。
 
 
 至於 GridView 的呈現方式，是透過版工自己寫的 WizardGridView 這個 Custom Control (一個 C# Class)，如 2 所示。在此 ObjectDataSource 項目中，所附的為有源碼的版本，尚未編譯成 DLL。若在您自己的 ASP.NET 2.0 / 3.5 項目中，有 Bin 活頁夾，想直接拿編譯好的 DLL 來使用，可取用本帖下載樣本中，SqlDataSource、WizardGridView 兩個項目裡的 WizardGridView.dll。
 
 
 圖 2　ObjectDataSource 項目的結構，為 BLL、DAL、DAL2 四層式架構，再結合 WizardGridView 這個 Custom Control 去處理分頁 UI 的呈現
 
 
 下載樣本中，ObjectDataSource、WizardGridView 兩個活頁夾裡，內附這個 WizardGridView 的原始碼。如 3，若您想讓程式員自訂 GridView 的單數行、雙數行、光棒的顏色，可將 WizardGridView.cs 中的第 93~95 行註解掉，如下列代碼所示：

WizardGridView.cs 的第 93~95 行
// 設定「光棒、單數列、雙數列」的顏色
protected override void OnRowDataBound(System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    // 背景顏色暫時寫死在下面這三行，但如此一來，即無法由程式員自訂顏色；
    // 若要開放讓程式員自訂顏色，必須將下列三行註解掉，亦即改由每支程式的前端 .aspx 透過 GridView 的「屬性」視窗，去設定顏色
    Wizard_OddRowBackColor = System.Drawing.Color.FromName("#FFFFFF");       // 白色
    Wizard_EvenRowBackColor = System.Drawing.Color.FromName("#F7F6F3");      // 淺藍色 
    Wizard_MouseOverBackColor = System.Drawing.Color.FromName("#FFFF77");   // 米黃色

圖 3　可開放讓程式員自訂單數行、雙數行、光棒的顏色。至於 WizardEnableCustomPager 屬性預設即為 True，亦即此「UI 分頁」功能預設為啟用

您亦可設定，「頁碼行 (Pager Row)」，是要顯示在 GridView 上方還是下方，抑或上、下方都顯示；另亦可設定「頁碼行」要顯示在左、中、右側。若要開放給程式員自訂，就必須將 WizardGridView.cs 中的第 477~478 行註解掉，如下列代碼所示，然後如 SqlServer2005.aspx 的第 64 行，要求程式員自行加入設定值。

WizardGridView.cs 中的第 477~478 行
// 設定「頁碼行」，是要顯示在 GridView 上方還下方，還是上、下方都顯示；另再設定「頁碼行」要顯示在左、中、還是右側。
// 若在此寫死，則程式員即無法由前端自訂；若要開放讓程式員自訂位置，必須將下面這兩行註解掉。
//PagerSettings.Position = PagerPosition.Top; //.TopAndBottom;
//PagerStyle.HorizontalAlign = HorizontalAlign.Right;SqlServer2005.aspx 的第 64 行
<PagerSettings Position="Top" /><PagerStyle HorizontalAlign="right" />

 此外，當一個 Class 直接繼承自 ASP.NET 2.0 的 GridView Class 時，這個自訂 Class (亦即 Custom Control GridView 控制項) 在 .aspx 的 Columns Tag 中的 IntelliSense，都會無故失效，如 4 所示，造成程式員開發上的不便。版工猜測，這可能是微軟 GridView 本身的 Bug。

 本帖下載樣本的解決之道，是再加上 WizardBoundField、WizardTempateField 兩個 Class，直接繼承自微軟原生的 BoundField、TempateField 這兩個 Class，但卻能讓自訂的 WizardGridView 控制項裡，Columns Tag 中的 IntelliSense 功能都恢複正常運作，如 4 所示。網友們亦可參考下載樣本中，ObjectDataSource、SqlDataSource 網站裡，SqlServer2005.aspx、Default.aspx 的寫法。

 圖 4　繼承自 GridView 後，Columns Tag 裡的 IntelliSense，預設會無故失效

 本帖的 WizardGridView 控制項，網友們若有任何建議，或發現有 Bug，歡迎留言反應。但版工因工作關係，時間有限，各位的意見或反應的 Bug 可能無法立刻修正，敬請見諒。