本文转自 http://www.evget.com/articles/evget_217.html 作者：王凯明
一．概述：
运用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();
}
Web Form Designer generated code#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> 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();
}
Web Form Designer generated code#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();
}
Web Form Designer generated code#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应用程序不仅具有强大的数据处理功能，而且非常富有个性。