ASP.NET中DataGrid控制項應用技巧簡述

asp.net|datagrid|datagrid控制項|技巧 　 一．概述：

　　運用ASP.NET開發Web應用程式過程中，DataGrid是一個非常重要的控制項，幾乎任何和資料相關的表現都要用到該控制項。所以熟練掌握DataGrid控制項的應用技巧是每個Web開發人員所必備的基本能力。

　　DataGrid控制項能以表格的方式顯示資料來源中的資料，並提供了諸如分頁、排序以及過濾等一些強大的內建功能，所以它能大大簡化Web應用程式的開發過程。同時，開發人員還可以通過運用各種不同的資料繫結列來自訂DataGrid控制項顯示資料的方式，這樣就大大增強了DataGrid控制項的功能。本文我就將向大家介紹如何運用其中的TemplateColumn、EditCommandColumn、HyperlinkColumn、ButtonColumn以及BoundColumn等來自訂DataGrid控制項顯示資料的方式。

　　二．BoundColumn資料列的應用：

　　一般地，我們運用DataGrid控制項開發資料驅動的Web應用程式時會以一行顯示資料來源中的某一條記錄，而其中的一列則顯示某個特定的欄位值。DataGrid控制項本身為我們提供了強大的功能，所以我們只需要以很少的代碼便可以實現資料的顯示功能。不過，這樣也帶來了一個問題，那就是我們如何來個人化顯示資料的方式呢？顯然DataList控制項和Repeater控制項在這個方面要強於DataGrid控制項，不過如果我們放棄了DataGrid控制項也就相當於放棄了其具有的強大功能。那麼，我們如何運用DataGrid控制項也來實現資料顯示的自訂功能呢？首先，我們得把DataGrid控制項根據資料來源自動產生資料繫結列的功能關掉，方法很簡單，就是將其AutoGenerateColumns屬性設定為False即可。下面是這種方法的一個樣本：

＜asp:DataGrid runat= "server"id="myDataGrid" AutoGenerateColumns="False"＞
＜/asp:DataGrid＞

　　一旦其AutoGenerateColumns屬性為False值，我們就得編程實現資料列的綁定了。在綁定資料列過程中，我們可以運用上面介紹的五中資料列中的任何一種，不過任何資料列都必須在＜Columns＞＜/Columns＞標記內被定義，這個標記能表明被定義的對象是一種資料列。

　　下面我們首先來介紹BoundColumn資料列的應用。通過運用BoundColumn資料列，我們能根據自己的需求來動態地將資料來源中的資料繫結到特定的資料列上並修改資料列的外觀，比如我們可以更改各個列顯示的次序、使DataGrid控制項只顯示某些欄位的值而非全部欄位的值、更改資料列的標題等等。BoundColumn資料列能設定DataField、DataFormatString、FooterText、HeaderText、HeaderImageUrl以及SortField等屬性，而正是這些使得DataGrid控制項的外觀變得千變萬化、多姿多彩。

　　下面，我們來建立一個樣本性的Web應用程式項目，該項目運用到了DataGrid控制項，並且顯示了如何在其中運用BoundColumn資料列來自訂資料的顯示方式。下面是本項目的主要檔案以及其代碼後置檔案的內容：

　　WebForm1.aspx：

＜%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridTemplates.WebForm1" %＞
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm1＜/title＞
＜meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"＞
＜meta name="CODE_LANGUAGE" Content="C#"＞
＜meta name="vs_defaultClientScript" content="JavaScript"＞
＜meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"＞
＜/HEAD＞
＜body＞
＜form id="Form1" method="post" runat="server"＞
＜asp:DataGrid runat="server" id="myDataGrid" AutoGenerateColumns="False" BorderWidth="1px" Font-Names="Verdana,Arial,sans-serif" Font-Size="12px" BorderColor="#404040" GridLines="Horizontal" CellPadding="4"＞
＜AlternatingItemStyle BackColor="#E0E0E0"＞＜/AlternatingItemStyle＞
＜HeaderStyle Font-Bold="True" ForeColor="White" BackColor="Teal"＞＜/HeaderStyle＞
＜Columns＞
＜asp:BoundColumn DataField="CustomerID" HeaderText="ID"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="CompanyName" HeaderText="Company Name"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="ContactName" HeaderText="Contact Name"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="Address" HeaderText="Address"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="City" HeaderText="City"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="Region" HeaderText="Region"＞＜/asp:BoundColumn＞
＜asp:BoundColumn DataField="PostalCode" HeaderText="Postal Code"＞
＜HeaderStyle Wrap="False"＞＜/HeaderStyle＞
＜/asp:BoundColumn＞
＜/Columns＞
＜/asp:DataGrid＞
＜/form＞
＜/body＞
＜/HTML＞

WebForm1.aspx.cs：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace DataGridTemplates
{
/// ＜summary＞
/// WebForm1 的摘要說明。
/// ＜/summary＞
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid myDataGrid;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置使用者代碼以初始化頁面
if( !Page.IsPostBack )
BindData();
}

private void BindData()
{
SqlConnection con = new SqlConnection( "server=localhost;database=Northwind;integrated security=true;" );
SqlCommand cmd = new SqlCommand( "SELECT * FROM Customers", con );

try
{
con.Open();
myDataGrid.DataSource = cmd.ExecuteReader();
myDataGrid.DataBind();
con.Close();
}
catch( Exception ) {}
if( con != null && con.State == ConnectionState.Open )
con.Close();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：該調用是 ASP.NET Web Form設計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// ＜summary＞
/// 設計器支援所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// ＜/summary＞
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}

　　項目建立完畢，在瀏覽器中啟動並執行效果如圖1所示：


圖1 DataGrid控制項中運用BoundColumn資料列顯示資料的效果。

　三．HyperlinkColumn資料列以及ButtonColumn資料列的應用：

　　上面我向大家介紹了BoundColumn資料列的應用，而其它的兩種資料列：HyperlinkColumn資料列以及ButtonColumn資料列的應用方式與之相差無幾。

　　HyperlinkColumn資料列包含了DataTextField屬性以及DataNavigateUrlField屬性等，前者可以用於指定要顯示的常值內容，而後者則用於指定超連結。同時HyperlinkColumn資料列還包含了一個可用於指定文本顯示格式的DataNavigateUrlFormatString屬性。

　　像HyperlinkColumn資料列那樣ButtonColumn資料列也提供了DataTextField屬性以及DataTextFormatString屬性。同時它還提供了一個CommandName屬性，該屬效能指定按鈕被點擊時伺服器端的響應動作。而此時DataGrid控制項的OnItemCommand屬性必須指向一個相應的方法，該方法在按鈕被點擊時會自動被調用。DataGrid控制項中的一行可以包含多個ButtonColumn資料列，每個資料列中的按鈕訊息響應函數都是OnItemCommand屬性所對應的方法，而不同的按鈕是根據其CommandName屬性來區分函數所應執行的不同部分的。ButtonColumn資料列還提供了一個ButtonType屬性以指定按鈕的外觀，該屬性包括兩種可取值：LinkButton（預設）和PushButton。

　　下面我們在原來解決方案的基礎上再添加一個新的Web應用程式項目，並在其中運用DataGrid控制項的BoundColumn資料列、HyperlinkColumn資料列以及ButtonColumn資料列。下面是本項目的主要檔案以及其代碼後置檔案的內容：

　　WebForm1.aspx：

＜%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridTemplates2.WebForm1" %＞
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm1＜/title＞
＜meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"＞
＜meta name="CODE_LANGUAGE" Content="C#"＞
＜meta name="vs_defaultClientScript" content="JavaScript"＞
＜meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"＞
＜/HEAD＞
＜body MS_POSITIONING="FlowLayout"＞
＜form id="Form1" method="post" runat="server"＞
＜asp:DataGrid id="myDataGrid" runat="server" HeaderStyle-Font-Bold="True" Cellpadding="4" BorderWidth="1px" AutoGenerateColumns="False" GridLines="Horizontal" Font-Names="Verdana,Arial,sans-serif" Font-Size="12px" BorderStyle="Solid"＞
＜AlternatingItemStyle BackColor="#EFEFEF"＞＜/AlternatingItemStyle＞
＜ItemStyle Font-Size="X-Small"＞＜/ItemStyle＞
＜HeaderStyle Font-Bold="True" ForeColor="White" BackColor="Teal"＞＜/HeaderStyle＞
＜Columns＞
＜asp:BoundColumn DataField="CustomerID" HeaderText="ID"＞＜/asp:BoundColumn＞
＜asp:HyperLinkColumn DataNavigateUrlField="Url" DataTextField="CompanyName" HeaderText="Comapny Name"＞＜/asp:HyperLinkColumn＞
＜asp:ButtonColumn Text="Get Details" ButtonType="PushButton" CommandName="GetDetails"＞＜/asp:ButtonColumn＞
＜/Columns＞
＜/asp:DataGrid＞
＜/form＞
＜/body＞
＜/HTML＞

WebForm1.aspx.cs：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace DataGridTemplates2
{
/// ＜summary＞
/// WebForm1 的摘要說明。
/// ＜/summary＞
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid myDataGrid;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置使用者代碼以初始化頁面
if( !Page.IsPostBack )
BindData();
}

private void BindData()
{
SqlConnection con = new SqlConnection( "server=localhost;integrated security=true;database=Northwind" );
SqlCommand cmd = new SqlCommand( "SELECT *, 'http://www.' + CustomerID + '.com' As Url FROM Customers", con );
try
{
con.Open();
myDataGrid.DataSource = cmd.ExecuteReader();
myDataGrid.DataBind();
con.Close();
}
catch( Exception ) {}
if( con != null && con.State == ConnectionState.Open )
con.Close();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：該調用是 ASP.NET Web Form設計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// ＜summary＞
/// 設計器支援所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// ＜/summary＞
private void InitializeComponent()
{
this.myDataGrid.ItemCommand += new System.Web.UI.WebControls.DataGridCommandEventHandler(this.myDataGrid_ItemCommand);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion

private void myDataGrid_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
if( e.CommandName == "GetDetails" )
Response.Redirect( "WebForm2.aspx?id=" + e.Item.Cells[0].Text );
}
}
}

　　項目建立完畢，在瀏覽器中啟動並執行效果如圖2所示：


圖2 DataGrid控制項中運用HyperlinkColumn以及ButtonColumn資料列顯示資料的效果。

　四．TemplateColumn資料列的應用：

　　DataGrid控制項中的TemplateColumn資料列可以說是功能極其強大的，靈活地運用它就能使得DataGrid控制項顯示資料的方式變得多種多樣。TemplateColumn資料列主要為我們提供了以下四種資料列模板：

　　·HeaderTemplate
　　·ItemTemplate
　　·EditItemTemplate
　　·FooterTemplate

　　其中HeaderTemplate是用於顯示DataGrid控制項的首行中的文本、圖片或是綁定資料的。FooterTemplate的功能與HeaderTemplate的功能類似，不過它是用於顯示尾行中的內容的。EditItemTemplate是應用於具有編輯功能的資料列的，任何運用了該模板的資料列的資料能被使用者編輯並在適當時候更新到資料來源中。

　　ItemTemplate允許你建立具有完全自訂資料顯示方式的資料列。通過運用＜%# Container.DataItem("[FieldName]") %＞或＜%# DataBinder.Eval(Container.DataItem, "[FieldName]", "{0:[FormatString]}") %＞兩種資料繫結文法你就可以將資料來源中的某列資料繫結到相應的資料列中並賦予完全自訂的顯示方式。

　　下面我們在第三步中建立的Web應用程式中添加一個新的Web頁面－WebForm2，該頁面能顯示公司的詳細資料，也就是在圖2中的按鈕被點擊時瀏覽器會導向到的頁面。它能根據使用者的選擇顯示相應公司的詳細資料，方法就是判斷Request.QueryString內的資訊。如果其中包含了一個"id"名/值對，則根據其中的值選擇相對應的公司資訊並顯示在頁面中，如果沒有包含任何"id"值的資訊則從資料表中選取所有公司的資訊並顯示在頁面中。同時還要指出的是，在一個DataGrid控制項中你可以將多種類型的資料列結合起來一起使用，並根據不同的需要選擇合適的資料列顯示相應的資料。下面是本頁面的HTML檔案以及其代碼後置檔案的內容：

　　WebForm2.aspx：

＜%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="DataGridTemplates2.WebForm2" %＞
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm2＜/title＞
＜meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"＞
＜meta name="CODE_LANGUAGE" Content="C#"＞
＜meta name="vs_defaultClientScript" content="JavaScript"＞
＜meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"＞
＜/HEAD＞
＜body MS_POSITIONING="FlowLayout"＞
＜form id="Form1" method="post" runat="server"＞
＜asp:datagrid id="myDataGrid" runat="server" ItemStyle-Font-Size="x-small" HeaderStyle-Font-Bold="True" HeaderStyle-Font-Size="x-small" AlternatingItemStyle-BackColor="#EFEFEF" Cellpadding="4" BorderWidth="1" AutoGenerateColumns="False" BorderStyle="Solid" GridLines="Horizontal" BorderColor="#404040" Font-Names="Verdana,Arial,sans-serif" Font-Size="11px"＞
＜AlternatingItemStyle BackColor="#E0E0E0"＞＜/AlternatingItemStyle＞
＜ItemStyle Font-Size="X-Small"＞＜/ItemStyle＞
＜HeaderStyle Font-Size="X-Small" Font-Bold="True" ForeColor="White" BackColor="Teal"＞＜/HeaderStyle＞
＜Columns＞
＜asp:TemplateColumn＞
＜HeaderTemplate＞
＜b＞Company Detail＜/b＞
＜/HeaderTemplate＞
＜ItemTemplate＞
＜table border="0" Cellpadding="4" Cellspacing="0" Width="100%" style="FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif"＞
＜tr＞
＜td colspan="4"＞
＜b＞
＜%# DataBinder.Eval( Container.DataItem, "CompanyName" ) %＞
＜/b＞
＜/td＞
＜/tr＞
＜tr＞
＜td width="25%" valign="top"＞＜b＞Contact:＜/b＞＜/td＞
＜td width="25%" valign="top" nowrap＞
＜%# DataBinder.Eval( Container.DataItem, "ContactName" ) %＞
＜/td＞
＜td width="25%" valign="top"＞＜b＞Phone:＜/b＞＜/td＞
＜td width="25%" valign="top" nowrap＞
＜%# DataBinder.Eval( Container.DataItem, "Phone" ) %＞
＜/td＞
＜/tr＞
＜tr＞
＜td width="25%" valign="top"＞＜b＞Title:＜/b＞＜/td＞
＜td width="25%" valign="top"＞
＜%# DataBinder.Eval( Container.DataItem, "ContactTitle" ) %＞
＜/td＞
＜td width="25%" valign="top"＞＜b＞Fax:＜/b＞＜/td＞
＜td width="25%" valign="top" nowrap＞
＜%# DataBinder.Eval( Container.DataItem, "Fax" ) %＞
＜/td＞
＜/tr＞
＜tr＞
＜td width="25%" valign="top"＞＜b＞Address:＜/b＞＜/td＞
＜td width="25%" valign="top" colspan="3"＞
＜%# DataBinder.Eval( Container.DataItem, "Address" ) %＞
＜br＞
＜%# DataBinder.Eval( Container.DataItem, "City" ) %＞
,
＜%# DataBinder.Eval( Container.DataItem, "Region" ) %＞
＜%# DataBinder.Eval( Container.DataItem, "PostalCode" ) %＞
＜br＞
＜%# DataBinder.Eval( Container.DataItem, "Country" ) %＞
＜/td＞
＜/tr＞
＜/table＞
＜/ItemTemplate＞
＜/asp:TemplateColumn＞
＜/Columns＞
＜/asp:datagrid＞
＜/form＞
＜/body＞
＜/HTML＞

WebForm2.aspx.cs：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace DataGridTemplates2
{
/// ＜summary＞
/// WebForm2 的摘要說明。
/// ＜/summary＞
public class WebForm2 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid myDataGrid;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此處放置使用者代碼以初始化頁面
if( !Page.IsPostBack )
BindData();
}

private void BindData()
{
DataSet ds = new DataSet();
SqlDataAdapter da;
String strSQL;

if( Request.QueryString["id"] == null )
strSQL = "SELECT * FROM Customers";
else
strSQL = "SELECT * FROM Customers WHERE CustomerID = '" + Request.QueryString["id"].ToString() + "'";

da = new SqlDataAdapter( strSQL, "server=localhost;integrated security=true;database=Northwind" );
da.Fill( ds, "Customers" );
myDataGrid.DataSource = ds.Tables["Customers"].DefaultView;
myDataGrid.DataBind();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：該調用是 ASP.NET Web Form設計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// ＜summary＞
/// 設計器支援所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// ＜/summary＞
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}

　　新頁面建立完畢，在瀏覽器中啟動並執行效果如圖3所示：


圖3 DataGrid控制項中運用TemplateColumn資料列顯示資料的效果。

　　五．總結：

　　到此為止，我想大家已經基本掌握了在Web應用程式中運用DataGrid控制項自訂資料顯示的方法了。相比於DataList控制項和Repeater控制項，DataGrid控制項具有更多強大的功能，而且其自訂資料顯示的功能也不弱。所以只要你好好掌握其中的技巧和方法，運用DataGrid控制項也同樣可以使得你的Web應用程式不僅具有強大的資料處理功能，而且非常富有個性。