ASP.NET中DataGrid控件应用技巧简述

2024-11-02 16:30:34

推荐回答（1个）

回答1：

　　 一．概述

　　运用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数据列来自定义数据的显示方式下面是本项目的主要文件以及其代码后置文件的内容

　　WebForm aspx

WebForm 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＞/// WebForm 的摘要说明 /// ＜/summary＞public class WebForm : 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 codeoverride 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}}

　　项目创建完毕在浏览器中运行的效果如图所示

图 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数据列下面是本项目的主要文件以及其代码后置文件的内容

　　WebForm aspx

namespace DataGridTemplates {/// ＜summary＞/// WebForm 的摘要说明 /// ＜/summary＞public class WebForm : 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 * // + CustomerID + 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 codeoverride 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( WebForm aspx?id= + e Item Cells[ ] Text );}}}

　　项目创建完毕在浏览器中运行的效果如图所示

图 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] { :[FormatString]} ) %＞两种数据绑定语法你就可以将数据源中的某列数据绑定到相应的数据列中并赋予完全自定义的显示方式

　　下面我们在第三步中建立的Web应用程序中添加一个新的Web页面－WebForm 该页面能显示公司的详细信息也就是在图中的按钮被点击时浏览器会导向到的页面它能根据用户的选择显示相应公司的详细信息方法就是判断Request QueryString内的信息如果其中包含了一个 id 名/值对则根据其中的值选择相对应的公司信息并显示在页面中如果没有包含任何 id 值的信息则从数据表中选取所有公司的信息并显示在页面中同时还要指出的是在一个DataGrid控件中你可以将多种类型的数据列结合起来一起使用并根据不同的需要选择合适的数据列显示相应的数据下面是本页面的HTML文件以及其代码后置文件的内容

　　WebForm aspx

＜%@ Page language= c# Codebehind= WebForm aspx cs AutoEventWireup= false Inherits= DataGridTemplates WebForm %＞＜!DOCTYPE HTML PUBLIC //W C//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= //schemas microsoft /intellisense/ie ＞＜/HEAD＞＜body MS_POSITIONING= FlowLayout ＞＜form id= Form method= post runat= server ＞＜asp:datagrid id= myDataGrid runat= server ItemStyle Font Size= x *** all HeaderStyle Font Bold= True HeaderStyle Font Size= x *** all AlternatingItemStyle BackColor= #EFEFEF Cellpadding= BorderWidth= AutoGenerateColumns= False BorderStyle= Solid GridLines= Horizontal BorderColor= # Font Names= Verdana Arial sans serif Font Size= px ＞＜AlternatingItemStyle BackColor= #E E E ＞＜/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= Cellpadding= Cellspacing= Width= % style= FONT SIZE: px; FONT FAMILY: Verdana Arial sans serif ＞＜tr＞＜td colspan= ＞＜b＞＜%# DataBinder Eval( Container DataItem CompanyName ) %＞＜/b＞＜/td＞＜/tr＞＜tr＞＜td width= % valign= top ＞＜b＞Contact:＜/b＞＜/td＞＜td width= % valign= top nowrap＞＜%# DataBinder Eval( Container DataItem ContactName ) %＞＜/td＞＜td width= % valign= top ＞＜b＞Phone:＜/b＞＜/td＞＜td width= % valign= top nowrap＞＜%# DataBinder Eval( Container DataItem Phone ) %＞＜/td＞＜/tr＞＜tr＞＜td width= % valign= top ＞＜b＞Title:＜/b＞＜/td＞＜td width= % valign= top ＞＜%# DataBinder Eval( Container DataItem ContactTitle ) %＞＜/td＞＜td width= % valign= top ＞＜b＞Fax:＜/b＞＜/td＞＜td width= % valign= top nowrap＞＜%# DataBinder Eval( Container DataItem Fax ) %＞＜/td＞＜/tr＞＜tr＞＜td width= % valign= top ＞＜b＞Address:＜/b＞＜/td＞＜td width= % valign= top colspan= ＞＜%# 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＞

namespace DataGridTemplates {/// ＜summary＞/// WebForm 的摘要说明 /// ＜/summary＞public class WebForm : 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 ;elsestrSQL = 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 codeoverride protected void OnInit(EventArgs e){//// CODEGEN 该调用是 ASP NET Web 窗体设计器所必需的 //InitializeComponent();base OnInit(e);}

　　新页面创建完毕在浏览器中运行的效果如图所示

图 DataGrid控件中运用TemplateColumn数据列显示数据的效果

　　 五．总结

lishixinzhi/Article/program/net/201311/15737