一．概述
运用ASPNET开发Web应用程序过程中DataGrid是一个非常重要的控件几乎任何和数据相关的表现都要用到该控件所以熟练掌握DataGrid控件的应用技巧是每个Web开发人员所必备的基本能力
DataGrid控件能以表格的方式显示数据源中的数据并提供了诸如分页排序以及过滤等一些强大的内置功能所以它能大大简化Web应用程序的开发过程同时开发者还可以通过运用各种不同的数据绑定列来自定义DataGrid控件显示数据的方式这样就大大增强了DataGrid控件的功能本文我就将向大家介绍如何运用其中的TemplateColumnEditCommandColumnHyperlinkColumnButtonColumn以及BoundColumn等来自定义DataGrid控件显示数据的方式
二．BoundColumn数据列的应用
一般地我们运用DataGrid控件开发数据驱动的Web应用程序时会以一行显示数据源中的某一条记录而其中的一列则显示某个特定的字段值DataGrid控件本身为我们提供了强大的功能所以我们只需要以很少的代码便可以实现数据的显示功能不过这样也带来了一个问题那就是我们如何来个性化显示数据的方式呢？显然DataList控件和Repeater控件在这个方面要强于DataGrid控件不过如果我们放弃了DataGrid控件也就相当于放弃了其具有的强大功能那么我们如何运用DataGrid控件也来实现数据显示的自定义功能呢？首先我们得把DataGrid控件根据数据源自动产生数据绑定列的功能关掉方法很简单就是将其AutoGenerateColumns属性设置为False即可下面是这种方法的一个示例
＜asp:DataGrid runat= serverid=myDataGrid AutoGenerateColumns=False＞
＜/asp:DataGrid＞
一旦其AutoGenerateColumns属性为False值我们就得编程实现数据列的绑定了在绑定数据列过程中我们可以运用上面介绍的五中数据列中的任何一种不过任何数据列都必须在＜Columns＞＜/Columns＞标记内被定义这个标记能表明被定义的对象是一种数据列
下面我们首先来介绍BoundColumn数据列的应用通过运用BoundColumn数据列我们能根据自己的需求来动态地将数据源中的数据绑定到特定的数据列上并修改数据列的外观比如我们可以更改各个列显示的次序使DataGrid控件只显示某些字段的值而非全部字段的值更改数据列的标题等等BoundColumn数据列能设定DataFieldDataFormatStringFooterTextHeaderTextHeaderImageUrl以及SortField等属性而正是这些使得DataGrid控件的外观变得千变万化多姿多彩
下面我们来建立一个示例性的Web应用程序项目该项目运用到了DataGrid控件并且显示了如何在其中运用BoundColumn数据列来自定义数据的显示方式下面是本项目的主要文件以及其代码后置文件的内容
WebFormaspx
＜%@ Page language=c# Codebehind=WebFormaspxcs AutoEventWireup=false Inherits=DataGridTemplatesWebForm %＞
＜!DOCTYPE HTML PUBLIC //WC//DTD HTML Transitional//EN ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm＜/title＞
＜meta name=GENERATOR Content=Microsoft Visual Studio ＞
＜meta name=CODE_LANGUAGE Content=C#＞
＜meta name=vs_defaultClientScript content=JavaScript＞
＜meta name=vs_targetSchema content=http://schemasmicrosoftcom/intellisense/ie＞
＜/HEAD＞
＜body＞
＜form id=Form method=post runat=server＞
＜asp:DataGrid runat=server id=myDataGrid AutoGenerateColumns=False BorderWidth=px FontNames=VerdanaArialsansserif FontSize=px BorderColor=# GridLines=Horizontal CellPadding=＞
＜AlternatingItemStyle BackColor=#EEE＞＜/AlternatingItemStyle＞
＜HeaderStyle FontBold=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＞
WebFormaspxcs
using System;
using SystemCollections;
using SystemComponentModel;
using SystemData;
using SystemDataSqlClient;
using SystemDrawing;
using SystemWeb;
using SystemWebSessionState;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemWebUIHtmlControls;
namespace DataGridTemplates
{
/// ＜summary＞
/// WebForm 的摘要说明
/// ＜/summary＞
public class WebForm : SystemWebUIPage
{
protected SystemWebUIWebControlsDataGrid myDataGrid;
private void Page_Load(object sender SystemEventArgs e)
{
// 在此处放置用户代码以初始化页面
if( !PageIsPostBack )
BindData();
}
private void BindData()
{
SqlConnection con = new SqlConnection( server=localhost;database=Northwind;integrated security=true; );
SqlCommand cmd = new SqlCommand( SELECT * FROM Customers con );
try
{
conOpen();
myDataGridDataSource = cmdExecuteReader();
myDataGridDataBind();
conClose();
}
catch( Exception ) {}
if( con != null && conState == ConnectionStateOpen )
conClose();
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN该调用是 ASPNET Web 窗体设计器所必需的
//
InitializeComponent();
baseOnInit(e);
}
/// ＜summary＞
/// 设计器支持所需的方法 不要使用代码编辑器修改
/// 此方法的内容
/// ＜/summary＞
private void InitializeComponent()
{
thisLoad += new SystemEventHandler(thisPage_Load);
}
#endregion
}
}
项目创建完毕在浏览器中运行的效果如图所示
图 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数据列下面是本项目的主要文件以及其代码后置文件的内容
WebFormaspx
＜%@ Page language=c# Codebehind=WebFormaspxcs AutoEventWireup=false Inherits=DataGridTemplatesWebForm %＞
＜!DOCTYPE HTML PUBLIC //WC//DTD HTML Transitional//EN ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm＜/title＞
＜meta name=GENERATOR Content=Microsoft Visual Studio ＞
＜meta name=CODE_LANGUAGE Content=C#＞
＜meta name=vs_defaultClientScript content=JavaScript＞
＜meta name=vs_targetSchema content=http://schemasmicrosoftcom/intellisense/ie＞
＜/HEAD＞
＜body MS_POSITIONING=FlowLayout＞
＜form id=Form method=post runat=server＞
＜asp:DataGrid id=myDataGrid runat=server HeaderStyleFontBold=True Cellpadding= BorderWidth=px AutoGenerateColumns=False GridLines=Horizontal FontNames=VerdanaArialsansserif FontSize=px BorderStyle=Solid＞
＜AlternatingItemStyle BackColor=#EFEFEF＞＜/AlternatingItemStyle＞
＜ItemStyle FontSize=XSmall＞＜/ItemStyle＞
＜HeaderStyle FontBold=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＞
WebFormaspxcs
using System;
using SystemCollections;
using SystemComponentModel;
using SystemData;
using SystemDataSqlClient;
using SystemDrawing;
using SystemWeb;
using SystemWebSessionState;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemWebUIHtmlControls;
namespace DataGridTemplates
{
/// ＜summary＞
/// WebForm 的摘要说明
/// ＜/summary＞
public class WebForm : SystemWebUIPage
{
protected SystemWebUIWebControlsDataGrid myDataGrid;
private void Page_Load(object sender SystemEventArgs e)
{
// 在此处放置用户代码以初始化页面
if( !PageIsPostBack )
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
{
conOpen();
myDataGridDataSource = cmdExecuteReader();
myDataGridDataBind();
conClose();
}
catch( Exception ) {}
if( con != null && conState == ConnectionStateOpen )
conClose();
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN该调用是 ASPNET Web 窗体设计器所必需的
//
InitializeComponent();
baseOnInit(e);
}
/// ＜summary＞
/// 设计器支持所需的方法 不要使用代码编辑器修改
/// 此方法的内容
/// ＜/summary＞
private void InitializeComponent()
{
thismyDataGridItemCommand += new SystemWebUIWebControlsDataGridCommandEventHandler(thismyDataGrid_ItemCommand);
thisLoad += new SystemEventHandler(thisPage_Load);
}
#endregion
private void myDataGrid_ItemCommand(object source SystemWebUIWebControlsDataGridCommandEventArgs e)
{
if( eCommandName == GetDetails )
ResponseRedirect( WebFormaspx?id= + eItemCells[]Text );
}
}
}
项目创建完毕在浏览器中运行的效果如图所示
图 DataGrid控件中运用HyperlinkColumn以及ButtonColumn数据列显示数据的效果
四．TemplateColumn数据列的应用
DataGrid控件中的TemplateColumn数据列可以说是功能极其强大的灵活地运用它就能使得DataGrid控件显示数据的方式变得多种多样TemplateColumn数据列主要为我们提供了以下四种数据列模板
·HeaderTemplate
·ItemTemplate
·EditItemTemplate
·FooterTemplate
其中HeaderTemplate是用于显示DataGrid控件的首行中的文本图片或是绑定数据的FooterTemplate的功能与HeaderTemplate的功能类似不过它是用于显示尾行中的内容的EditItemTemplate是应用于具有编辑功能的数据列的任何运用了该模板的数据列的数据能被用户编辑并在适当时候更新到数据源中
ItemTemplate允许你建立具有完全自定义数据显示方式的数据列通过运用＜%# ContainerDataItem([FieldName]) %＞或＜%# DataBinderEval(ContainerDataItem [FieldName] {:[FormatString]}) %＞两种数据绑定语法你就可以将数据源中的某列数据绑定到相应的数据列中并赋予完全自定义的显示方式
下面我们在第三步中建立的Web应用程序中添加一个新的Web页面－WebForm该页面能显示公司的详细信息也就是在图中的按钮被点击时浏览器会导向到的页面它能根据用户的选择显示相应公司的详细信息方法就是判断RequestQueryString内的信息如果其中包含了一个id名/值对则根据其中的值选择相对应的公司信息并显示在页面中如果没有包含任何id值的信息则从数据表中选取所有公司的信息并显示在页面中同时还要指出的是在一个DataGrid控件中你可以将多种类型的数据列结合起来一起使用并根据不同的需要选择合适的数据列显示相应的数据下面是本页面的HTML文件以及其代码后置文件的内容
WebFormaspx
＜%@ Page language=c# Codebehind=WebFormaspxcs AutoEventWireup=false Inherits=DataGridTemplatesWebForm %＞
＜!DOCTYPE HTML PUBLIC //WC//DTD HTML Transitional//EN ＞
＜HTML＞
＜HEAD＞
＜title＞WebForm＜/title＞
＜meta name=GENERATOR Content=Microsoft Visual Studio ＞
＜meta name=CODE_LANGUAGE Content=C#＞
＜meta name=vs_defaultClientScript content=JavaScript＞
＜meta name=vs_targetSchema content=http://schemasmicrosoftcom/intellisense/ie＞
＜/HEAD＞
＜body MS_POSITIONING=FlowLayout＞
＜form id=Form method=post runat=server＞
＜asp:datagrid id=myDataGrid runat=server ItemStyleFontSize=xsmall HeaderStyleFontBold=True HeaderStyleFontSize=xsmall AlternatingItemStyleBackColor=#EFEFEF Cellpadding= BorderWidth= AutoGenerateColumns=False BorderStyle=Solid GridLines=Horizontal BorderColor=# FontNames=VerdanaArialsansserif FontSize=px＞
＜AlternatingItemStyle BackColor=#EEE＞＜/AlternatingItemStyle＞
＜ItemStyle FontSize=XSmall＞＜/ItemStyle＞
＜HeaderStyle FontSize=XSmall FontBold=True ForeColor=White BackColor=Teal＞＜/HeaderStyle＞
＜Columns＞
＜asp:TemplateColumn＞
＜HeaderTemplate＞
＜b＞Company Detail＜/b＞
＜/HeaderTemplate＞
＜ItemTemplate＞
＜table border= Cellpadding= Cellspacing= Width=% style=FONTSIZE: px; FONTFAMILY: Verdana Arial sansserif＞
＜tr＞
＜td colspan=＞
＜b＞
＜%# DataBinderEval( ContainerDataItem CompanyName ) %＞
＜/b＞
＜/td＞
＜/tr＞
＜tr＞
＜td width=% valign=top＞＜b＞Contact:＜/b＞＜/td＞
＜td width=% valign=top nowrap＞
＜%# DataBinderEval( ContainerDataItem ContactName ) %＞
＜/td＞
＜td width=% valign=top＞＜b＞Phone:＜/b＞＜/td＞
＜td width=% valign=top nowrap＞
＜%# DataBinderEval( ContainerDataItem Phone ) %＞
＜/td＞
＜/tr＞
＜tr＞
＜td width=% valign=top＞＜b＞Title:＜/b＞＜/td＞
＜td width=% valign=top＞
＜%# DataBinderEval( ContainerDataItem ContactTitle ) %＞
＜/td＞
＜td width=% valign=top＞＜b＞Fax:＜/b＞＜/td＞
＜td width=% valign=top nowrap＞
＜%# DataBinderEval( ContainerDataItem Fax ) %＞
＜/td＞
＜/tr＞
＜tr＞
＜td width=% valign=top＞＜b＞Address:＜/b＞＜/td＞
＜td width=% valign=top colspan=＞
＜%# DataBinderEval( ContainerDataItem Address ) %＞
＜br＞
＜%# DataBinderEval( ContainerDataItem City ) %＞
＜%# DataBinderEval( ContainerDataItem Region ) %＞
＜%# DataBinderEval( ContainerDataItem PostalCode ) %＞
＜br＞
＜%# DataBinderEval( ContainerDataItem Country ) %＞
＜/td＞
＜/tr＞
＜/table＞
＜/ItemTemplate＞
＜/asp:TemplateColumn＞
＜/Columns＞
＜/asp:datagrid＞
＜/form＞
＜/body＞
＜/HTML＞
WebFormaspxcs
using System;
using SystemCollections;
using SystemComponentModel;
using SystemData;
using SystemDataSqlClient;
using SystemDrawing;
using SystemWeb;
using SystemWebSessionState;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemWebUIHtmlControls;
namespace DataGridTemplates
{
/// ＜summary＞
/// WebForm 的摘要说明
/// ＜/summary＞
public class WebForm : SystemWebUIPage
{
protected SystemWebUIWebControlsDataGrid myDataGrid;
private void Page_Load(object sender SystemEventArgs e)
{
// 在此处放置用户代码以初始化页面
if( !PageIsPostBack )
BindData();
}
private void BindData()
{
DataSet ds = new DataSet();
SqlDataAdapter da;
String strSQL;
if( RequestQueryString[id] == null )
strSQL = SELECT * FROM Customers;
else
strSQL = SELECT * FROM Customers WHERE CustomerID = + RequestQueryString[id]ToString() + ;
da = new SqlDataAdapter( strSQL server=localhost;integrated security=true;database=Northwind );
daFill( ds Customers );
myDataGridDataSource = dsTables[Customers]DefaultView;
myDataGridDataBind();
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN该调用是 ASPNET Web 窗体设计器所必需的
//
InitializeComponent();
baseOnInit(e);
}
/// ＜summary＞
/// 设计器支持所需的方法 不要使用代码编辑器修改
/// 此方法的内容
/// ＜/summary＞
private void InitializeComponent()
{
thisLoad += new SystemEventHandler(thisPage_Load);
}
#endregion
}
}
新页面创建完毕在浏览器中运行的效果如图所示
图 DataGrid控件中运用TemplateColumn数据列显示数据的效果
五．总结
到此为止我想大家已经基本掌握了在Web应用程序中运用DataGrid控件自定义数据显示的方法了相比于DataList控件和Repeater控件DataGrid控件具有更多强大的功能而且其自定义数据显示的功能也不弱所以只要你好好掌握其中的技巧和方法运用DataGrid控件也同样可以使得你的Web应用程序不仅具有强大的数据处理功能而且非常富有个性
