ASP.NET 2.0 GridView 範例集
文/黃忠成
這篇文章從何來？
在寫ASP.NET AJAX/Silverlight書之前，我曾經動過念頭撰寫一本ASP.NET 2.0聖經類型的書籍，也付諸執行了一段時間，完成了近500頁的書稿(500頁，僅是此書的3章....，全書規劃有15章)，但由於工作上的關係，我終究沒能在ASP.NET 3.5推出前完成這一本書，只是將書中的ASP.NET/Silverlight抽出成為另一本書，但東西寫都寫好了，不將其公諸於世，總覺得對不起她們(我一直認為，文章在其完成時，即擁有作者所賦與的生命)，雖然我可以將其收錄在未來可能撰寫的ASP.NET 3.5新書中，但由於近一年內的新書計劃中並沒有排定此書，遂決定將其中較實用的技巧抽出，貼在BLOG上面，與各位讀者分享，也算是送給各位長期支持我的讀者們，一份意外的聖誕禮物吧 ^_^。
PS:文章未經潤飾，不通順之處還請見諒。
漸層光棒
不喜歡GridView控件單調的Header區、單調的選取光棒嗎？這裡有個小技巧可以讓你的GridView控件看起來與眾不同，請先準備兩張圖形。
圖4-8-50(4-71.tif)
這種漸層圖形可以用Photoshop或PhotoImpact輕易做出來，接著將這兩個圖形檔加到專案的Images目錄中，左邊取名為titlebar.gif、右邊取名為gridselback.gif，然後開啟一個新網頁，組態SqlDataSource控件連結到任一資料表，再加入GridView控件繫結至此SqlDataSource控件，接著將Enable Selection打勾，切換至網頁Source頁面，加入CSS的程式碼。
程式4-8-10
<%@ <!DOCTYPE <style .grid_sel_back {
} .title_bar { background-image:url(Images/titlebar.gif); background-repeat:repeat-x } </style> |
完成後切回設計頁面，設定GridView控件的SelectedRowStyle及HeaderStyle屬性。
圖4-8-51(4-72.tif)
完成後執行網頁，你會見到很不一樣的GridView。
圖4-8-52(4-73.tif)
2 Footer or 2 Header
前面曾提及，GridView控件並沒有限制我們只能在裡面加入一個Footer，因此我們可以透過程式4-8-11的方式，添加另一個Footer至GridView控件中。
程式4-8-11
protected {
{
DataControlRowType.Footer, DataControlRowState.Normal);
cell.Text = "Footer 2"; cell.Attributes["colspan"] = GridView1.Columns.Count.ToString(); //merge columns row2.Controls.Add(cell); GridView1.Controls[0].Controls.AddAt(GridView1.Controls[0].Controls.Count - 1, row2); } } |
相同的，同樣的方法也可以用於添加另一個Header至GridView控件中，這個範例看起來無用，但是卻給了無限的想像空間，這是實現GridView Insert及Collapsed GridView功能的基礎。
Group Header
想合併Header中的兩個欄位為一個嗎？很簡單！只要在RowCreated事件中將欲被合併的欄位移除，將另一欄位的colspan設為2即可。
程式4-8-12
protected {
{ e.Row.Cells.RemoveAt(3); e.Row.Cells[2].Attributes["colspan"] = "2"; e.Row.Cells[2].Text = "Contact Information"; } } |
圖4-8-53為執行畫面。
圖4-8-53(4-74.tif)
我想，應該不需要我再解釋2這個數字從何而來了吧。 ^_^
Group Row
想將同值的欄位合成一個嗎？4-8-13的程式碼可以幫你達成。
程式4-8-13
private {
{
{
{ currentRow = row;
}
{
{ currentRow.Cells[2].Attributes["rowspan"] = (tempModifyRows.Count+1).ToString(); currentRow.Cells[2].Attributes["valign"] = "center";
row2.Cells.RemoveAt(2); lastSupID = currSupID; tempModifyRows.Clear(); currentRow = row; lastSupID = currSupID; }
tempModifyRows.Add(row); } } }
{ currentRow.Cells[2].Attributes["rowspan"] = (tempModifyRows.Count + 1).ToString(); currentRow.Cells[2].Attributes["valign"] = "center";
row2.Cells.RemoveAt(2); } }
protected { PrepareGroup(); } |
這段程式碼應用了先前所提過的GridViewRow控件及TableCell的使用方式，圖4-8-54為執行結果。
圖4-8-54
Master-Detail GridView
Master-Detail，也就是主明細表的顯示，是資料庫應用常見的功能，運用DataSource及GridView控件可以輕易做到這點，請建立一個網頁，加入兩個GridView控件，一名為GridView1，用於顯示主表，二名為GridView2，用於顯示明細表，接著加入兩個SqlDataSource控件，一個連結至Northwind資料庫的Orders資料表，另一個連結至Order Details資料表，於連結至Order Details資料表的SqlDataSource中添加WHERE條件來比對OrderID欄位，值來源設成GridView1的SelectedValue屬性。
圖4-8-61
接下來請將GridView1的DataSoruce設為Orders的SqlDataSource，GridView2的DataSource設為Order Details的SqlDataSource，最後將GridView1的Enable Selection打勾即可完成Master-Detail的範例。
圖4-8-62
那這是如何辦到的呢？當使用者點選GridView1上某筆資料的Select連結時，GridView1的SelectedValue屬性便會設成該筆資料的DataKeyName屬性所指定的欄位值，而連結至Order Details的SqlDataSource又以該屬性做為比對OrderID欄位時的值來源，結果便成了，使用者點選了Select連結，PostBack發生，GridView2向連結至Order Details的SqlDataSource索取資料，該SqlDataSource以GridView1.SelectedValue做為比對OrderID欄位的值，執行選取資料的SQL指令後，該結果集便是GridView1所選取那筆資料的明細了。
Master-Detail GridView Part 2
前面的Master-Detail GridView控件應用，相信你已在市面上的書、或網路上見過，但此節中的GridView控件應用包你沒看過，但一定想過！請見圖4-8-63。
圖4-8-63
圖4-8-64
你一定很想驚呼？這是GridView嗎？？不是第三方控件的效果吧？是的！這是GridView控件，而且只需要不到100行程式碼！！請先建立一個UserControl：DetailsGrid.ascx，加入一個SqlDataSource控件連結至Northwind的Order Details資料表，選取所有欄位，接著在WHERE區設定如圖4-8-65的條件。
圖4-8-65
接著加入一個GridView控件繫結至此SqlDataSource控件，並將Enable Editing打勾，然後於原始碼中鍵入4-8-17的程式碼。
程式4-8-17
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
public {
{
{
}
{ ViewState["OrderID"] = value; SqlDataSource1.SelectParameters[0].DefaultValue = value.ToString(); } }
{ } } |
接著建立一個新網頁，加入SqlDataSource控件繫結至Northwind的Orders資料表，然後加入一個GridView控件，並於其欄位編輯器中加入一個TemplateField，於其內加入一個LinkButton控件，設定其屬性如圖4-8-66。
圖4-8-66
然後設定LinkButton的DataBindings如圖4-8-67。
圖4-8-67
然後於原始碼中鍵入4-8-18的程式碼。
程式4-8-18
using System; using System.Collections.Generic; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
public {
{
}
{
{
DataControlRowType.DataRow, DataControlRowState.Normal);
row.Cells.Add(cell);
cell2.Attributes["colspan"] = (GridView1.Columns.Count - 1).ToString();
((DetailsGrid)c).OrderID = (int)GridView1.DataKeys[gridRow.RowIndex].Value; cell2.Controls.Add(c); row.Cells.Add(cell2); _delayAddRows.Add(row); } }
{
}
{
_collaspedRows = (List<int>)state.Second; }
{
} } |
接下來在TemplateField中的LinkButton的Click事件中鍵入4-8-19的程式碼。
程式4-8-19
protected {
{ _collaspedRows.Remove(key); GridView1.DataBind(); }
{ _collaspedRows.Clear(); // clear. _collaspedRows.Add(key); GridView1.DataBind(); } } |
最後在GridView控件的RowCreated、PageIndexChanging事件中鍵入4-8-20的程式碼。
程式4-8-20
protected {
CreateDetailRow(e.Row);
{
{
{ GridView1.Controls[0].Controls.AddAt(GridView1.Rows[i].RowIndex + 2, _delayAddRows[0]); _delayAddRows.RemoveAt(0); } } } }
{ _collaspedRows.Clear(); } |
執行後你就能看到前圖的效果了，那具體是如何做到的呢？從前面的說明，我們知道了可以在GridView控件中動態的插入一個 GridViewRow控件，而GridViewRow控件可以擁有多個Cell，每個Cell可以擁有子控件，那麼當這個子控件是一個UserControl呢 ？相信說到這份上，讀者已經知道整個程式的運行基礎及概念了，剩下的細節如LoadViewState、SaveViewState皆已在前面章節提過，看懂這個範例後！你應該也想到了其它的應用了(UserControl中放DetailsView、FormView、MultiView，哈!)，對於GridView！你已經毫無疑問了！
4-8-4、GridView的效能
OK，GridView控件功能很強大，但是如果你仔細思考下GridView控件的分頁是如何做的，會發現她的做法其實隱含著一個很大的效能問題，GridView控件在分頁功能啟動的情況下，會建立一個PageDataSource物件，由這個物件負責向DataSource索取資料，於索取資料時一併傳入DataSourceSelectArgument物件，此物件中便包含了起始的列及需要的列數，看起來似乎沒啥問題嗎？其實不然，當DataSource控件不支援分頁時，PageDataSource物件只能以該DataSource所傳回的資料來做分頁，簡略的說！SqlDataSource控件是不支援分頁的，這時PageDataSource會要求SqlDataSource控件傳回資料，而SqlDataSource控件就用SelectQuery中的SQL指令向資料庫要求資料，結果便是，當該SQL指令選取100000筆資料時，SqlDataSource所傳回給PageDataSource的資料也是100000筆！！這意味著，GridView每次做資料繫結顯示時，是用100000筆資料在分頁，不管顯示的是幾筆，存在於記憶體中的都是100000筆！如果同時有10個人、100個人在使用此網頁，可想而知Server的負擔有多重了，即使有Cache加持，一樣會有100000筆資料在記憶體中！以往在ASP.NET 1.1時，可以運用DataGrid控件的CustomPaging功能來解決此問題，但GridView控件並未提供這個功能，我們該怎麼處理這個問題呢？在提出解決方案前，我們先談談GridView控件為何將這麼有用的功能移除了？答案很簡單，這個功能已經被移往DataSource控件了，這是因為DataSource控件所需服務的不只是GridView，FormView、DetailsView都需要她，而且她們都支援分頁，如果將CustomPaging直接做在這些控件上，除了控件必須有著重複的程式碼外，設計師於撰寫分頁程式時，也需針對不同的控件來處理，將這些移往DataSource控件後，便只會有一份程式碼。說來好聽，那明擺著SqlDataSource控件就不支援分頁了，那該如何解決這個問題了，答案是ObjectDataSource，這是一個支援分頁的DataSource控件，只要設定幾個屬性及對資料提供者做適當的修改後，便可以達到手動分頁的效果了。請建立一個WebiSte專案，添加一個DataSet連結到Northwind的Customers資料表，接著新增一個Class，檔名為NorthwindCustomersTableAdapter.cs，鍵入4-8-26的程式碼。
程式4-8-26
using System; using System.ComponentModel; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
namespace NorthwindTableAdapters {
{ [System.ComponentModel.DataObjectMethodAttribute( System.ComponentModel.DataObjectMethodType.Select, true)]
{
}
{
Connection.Open();
{
}
{ Connection.Close(); } } } } |
此程式提供了兩個函式，GetData函式需要兩個參數，一個是起始的筆數，一個是選取的筆數，利用這兩個參數加上SQL Server 2005新增的RowNumber，便可以向資料庫要求傳回特定範圍的資料。那這兩個參數從何傳入的呢？當GridView向ObjectDataSource索取資料時，便會傳入這兩個參數，例如當GridView的PageSize是10時，第1頁時傳入的startRowIndex便是10，maximumRows就是10，以此類推。第二個函式是GetCount，對於GridView來說，她必須知道繫結資料的總頁數才能顯示Pager區，而此總頁數必須由資料總筆數算出，此時GridView會向PageDataSource要求資料的總筆數，而PageDataSource在DataSource控件支援分頁的情況下，會要求其提供總筆數，這時此函式就會被呼叫了。大致了解這個程式後，回到設計頁面，加入一個ObjectDataSource控件，於SELECT頁次選取帶startRowIndex及maximumRows參數的函式。
圖4-8-68
按下Next按紐後，精靈會要求我們設定參數值來源，請直接按下Finish來完成組態。
圖4-8-69
接著設定ObjectDataSource的EnablePaging屬性為True，SelectCountMethod屬性為GetCount(對應了程式4-8-26中的GetCount函式)，最後放入一個GridView控件，繫結至此ObjectDataSource後將Enable Paging打勾，就完成了手動分頁的GridView範例了。
圖4-8-70
在效能比上，手動分頁的效能在資料量少時絕對比Cache來的慢，但資料量大時，手動分頁的效能及記憶體耗費就一定比Cache來的好。
