ASP.NET中DataGrid控件應用技巧簡述-ShareBody資訊站

ASP.NET中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 窗體設計器所必需的。
//
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＞

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 窗體設計器所必需的。
//
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 窗體設計器所必需的。
//
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應用程序不僅具有強大的數據處理功能，而且非常富有個性。

點擊下載源代碼

作者：http://www.zhujiangroad.com

來源：http://www.zhujiangroad.com

※以上資訊由網路資料整理而成，若有遺誤概以來源為準，本站不負任何相關責任。

※如果您認為網站上資訊侵犯了您的版權，請告訴我們按這裡，我們將即時將您的版權資料移除。

網頁語言教學

程式語言教學

移動端教學

資料庫

生活資訊

法拍資訊

實價登錄