运用ASP.NET开发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= "server">控件的外观变得千变万化、多姿多彩。
自定义DataGrid控件显示数据的方式//WebForm1.aspx:
自定义DataGrid控件显示数据的方式

自定义DataGrid控件显示数据的方式
%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridTemplates.WebForm1" %
自定义DataGrid控件显示数据的方式
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
自定义DataGrid控件显示数据的方式<HTML>
自定义DataGrid控件显示数据的方式<HEAD>
自定义DataGrid控件显示数据的方式<title>WebForm1<
/title>
自定义DataGrid控件显示数据的方式<meta name
="GENERATOR" Content="Microsoft Visual Studio 7.0"
自定义DataGrid控件显示数据的方式<meta name
="CODE_LANGUAGE" Content="C#"
自定义DataGrid控件显示数据的方式<meta name
="vs_defaultClientScript" content="JavaScript"
自定义DataGrid控件显示数据的方式<meta name
="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"
自定义DataGrid控件显示数据的方式
/HEAD>
自定义DataGrid控件显示数据的方式<body>
自定义DataGrid控件显示数据的方式<form id
="Form1" method="post" runat="server"
自定义DataGrid控件显示数据的方式<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"
自定义DataGrid控件显示数据的方式<AlternatingItemStyle BackColor
="#E0E0E0"></AlternatingItemStyle>
自定义DataGrid控件显示数据的方式<HeaderStyle Font
-Bold="True" ForeColor="White" BackColor="Teal"></HeaderStyle>
自定义DataGrid控件显示数据的方式<Columns>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="CustomerID" HeaderText="ID"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="CompanyName" HeaderText="Company Name"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="ContactName" HeaderText="Contact Name"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="Address" HeaderText="Address"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="City" HeaderText="City"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="Region" HeaderText="Region"></asp:BoundColumn>
自定义DataGrid控件显示数据的方式<asp:BoundColumn DataField
="PostalCode" HeaderText="Postal Code"
自定义DataGrid控件显示数据的方式<HeaderStyle Wrap
="False"></HeaderStyle>
自定义DataGrid控件显示数据的方式
/asp:BoundColumn>
自定义DataGrid控件显示数据的方式
/Columns>
自定义DataGrid控件显示数据的方式
/asp:DataGrid>
自定义DataGrid控件显示数据的方式
/form>
自定义DataGrid控件显示数据的方式
/body>
自定义DataGrid控件显示数据的方式
/HTML>
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式
//WebForm1.aspx.cs:
自定义DataGrid控件显示数据的方式
using System;
自定义DataGrid控件显示数据的方式
using System.Collections;
自定义DataGrid控件显示数据的方式
using System.ComponentModel;
自定义DataGrid控件显示数据的方式
using System.Data;
自定义DataGrid控件显示数据的方式
using System.Data.SqlClient;
自定义DataGrid控件显示数据的方式
using System.Drawing;
自定义DataGrid控件显示数据的方式
using System.Web;
自定义DataGrid控件显示数据的方式
using System.Web.SessionState;
自定义DataGrid控件显示数据的方式
using System.Web.UI;
自定义DataGrid控件显示数据的方式
using System.Web.UI.WebControls;
自定义DataGrid控件显示数据的方式
using System.Web.UI.HtmlControls;
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式
namespace DataGridTemplates
二、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数据列。下面是部分代码:
自定义DataGrid控件显示数据的方式<asp:HyperLinkColumn DataNavigateUrlField="Url" DataTextField="CompanyName" HeaderText="Comapny Name"></asp:HyperLinkColumn>
自定义DataGrid控件显示数据的方式<asp:ButtonColumn Text
="Get Details" ButtonType="PushButton" CommandName="GetDetails"></asp:ButtonColumn>
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式
private void InitializeComponent()

三、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控件中你可以将多种类型的数据列结合起来一起使用,并根据不同的需要选择合适的数据列显示相应的数据。下面是部分代码

自定义DataGrid控件显示数据的方式<Columns>
自定义DataGrid控件显示数据的方式<asp:TemplateColumn>
自定义DataGrid控件显示数据的方式<HeaderTemplate>
自定义DataGrid控件显示数据的方式<b>Company Detail<
/b>
自定义DataGrid控件显示数据的方式
/HeaderTemplate>
自定义DataGrid控件显示数据的方式<ItemTemplate>
自定义DataGrid控件显示数据的方式<table border
="0" Cellpadding="4" Cellspacing="0" Width="100%" style="FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif"
自定义DataGrid控件显示数据的方式<tr>
自定义DataGrid控件显示数据的方式<td colspan
="4"
自定义DataGrid控件显示数据的方式<b>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "CompanyName" ) %
自定义DataGrid控件显示数据的方式
/b>
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式
/tr>
自定义DataGrid控件显示数据的方式<tr>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"><b>Contact:</b></td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top" nowrap>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "ContactName" ) %
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"><b>Phone:</b></td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top" nowrap>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "Phone" ) %
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式
/tr>
自定义DataGrid控件显示数据的方式<tr>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"><b>Title:</b></td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "ContactTitle" ) %
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"><b>Fax:</b></td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top" nowrap>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "Fax" ) %
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式
/tr>
自定义DataGrid控件显示数据的方式<tr>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top"><b>Address:</b></td>
自定义DataGrid控件显示数据的方式<td width
="25%" valign="top" colspan="3"
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "Address" ) %
自定义DataGrid控件显示数据的方式<br>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "City" ) %
自定义DataGrid控件显示数据的方式,
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "Region" ) %
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "PostalCode" ) %
自定义DataGrid控件显示数据的方式<br>
自定义DataGrid控件显示数据的方式
%# DataBinder.Eval( Container.DataItem, "Country" ) %
自定义DataGrid控件显示数据的方式
/td>
自定义DataGrid控件显示数据的方式
/tr>
自定义DataGrid控件显示数据的方式
/table>
自定义DataGrid控件显示数据的方式
/ItemTemplate>
自定义DataGrid控件显示数据的方式
/asp:TemplateColumn>
自定义DataGrid控件显示数据的方式
/Columns>
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式
自定义DataGrid控件显示数据的方式


 

相关文章:

  • 2021-07-26
  • 2021-09-23
  • 2022-12-23
  • 2022-01-08
  • 2021-10-01
  • 2022-02-02
  • 2021-09-28
猜你喜欢
  • 2021-11-05
  • 2022-12-23
  • 2022-02-19
  • 2022-12-23
  • 2021-07-31
  • 2022-01-21
  • 2022-12-23
相关资源
相似解决方案