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数据列来自定义数据的显示方式 下面是本项目的主要文件以及其代码后置文件的内容
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><form id= Form method= post runat= server ><asp:DataGrid runat= server id= myDataGrid AutoGenerateColumns= False BorderWidth= px Font Names= Verdana Arial sans serif Font Size= px BorderColor= # GridLines= Horizontal CellPadding= ><AlternatingItemStyle BackColor= #E E E ></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>
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
<%@ 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 HeaderStyle Font Bold= True Cellpadding= BorderWidth= px AutoGenerateColumns= False GridLines= Horizontal Font Names= Verdana Arial sans serif Font Size= px 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>
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;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>
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(){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);}
/// <summary>/// 设计器支持所需的方法 不要使用代码编辑器修改/// 此方法的内容 /// </summary>private void InitializeComponent(){ this Load += new System EventHandler(this Page_Load);}#endregion}}
新页面创建完毕 在浏览器中运行的效果如图 所示
图 DataGrid控件中运用TemplateColumn数据列显示数据的效果
五.总结
lishixinzhi/Article/program/net/201311/15737