这篇文章是一系列关于使用 DataGrid Web 控件文章的第三篇。 ASP.Net DataGrid Web 控件可将数据库信息显示在 HTML 表格中,并且功能强大。在第一篇文章中我们讨论了 DataGrid 的基本功能;在第二篇文章中我们讨论了设定 DataGrid 显示属性的信息。本文将研究如何 _将事件与 DataGrid 联系起来。 _
** 导言 **
在第一篇文章中我们研究了 DataGrid 的基本功能 ( 它是一个被设计用于在 HTML 表格标签中显示数据的 ASP.Net Web 控件 ) ,展示了通过 ASP.Net 页面显示数据库内容是如何的简单。在第二篇文章中我们研究了如何自定义 DataGrid 的显示。正如在先前演示 (Demo) 中看到的,通过很少的程序代码我们就能以印象深刻的格式显示数据库信息。
虽然显示数据非常有效,但是真正有用的是能否将某种形式的动作与 DataGrid 联系起来。例如,想象一下你正在为某个电子商务公司工作并被要求通过 DataGrid 显示所有订单信息。每一个订单含有很多相关的数据,包括订购的商品、订购时间、购买者的信息 ( 姓名、地址等 ) 、购买者选择的运货方式等。在一个 DataGrid 中 ( 为每一个订单 ) 显示 所有 这些信息将会导致过度的信息显示。
正如在 DataGrid Web 控件深度历险 (2) 中看到的,我们可以通过将 ** AutoGenerateColumns ** 属性设为 False, 然后通过 ** Columns ** 属性指定需要显示的列。虽然这种做法使得数据易于理解,但是如果用户同时希望能够查看到任意一个订单的复杂细节,那又该怎么做呢?理想地我们希望在 DataGrid 的每一行上有一个标记为 Detail 的按钮,当点击这个按钮后将显示订单的全部信息。
本文的示例将引领读者创建一个非常类似的应用。在前面的演示中我们显示了 ASPFAQs.com 最受欢迎的 10 个常见问题。本文将对该 演示 进行扩充以显示 10 个常见问题的最关键信息,同时每一行包含一个 Detail 按钮。
** 构建基础 **
我们在第二篇文章中提到 DataGrid 控件允许在 DataGrid 的 Columns 标记中放置一些 BoundColumn 标记。回想一下每一个 BoundColumn 标记代表 DataGrid 中的一列。为了将按钮放置在 DataGrid 中,我们可以使用 ButtonColumn 标记,这与 BoundColumn 标记的用法很类似。下面的代码显示如何将按钮放置在 DataGrid 中 :
**
1<form runat="server"> **
2<asp:datagrid autogeneratecolumns="False" backcolor="#eeeeee" cellpadding="4" font-name="Verdana" font-size=" 10pt " horizontalalign="Center" id="dgPopularFAQs" runat="server" width="85%">
3<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
4<alternatingitemstyle backcolor="White"></alternatingitemstyle>
5<columns>
6** <asp:buttoncolumn headertext="FAQ Details" text="Details"></asp:buttoncolumn>
7** <asp:boundcolumn datafield="FAQID" visible="False"></asp:boundcolumn>
8<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
9</columns>
10</asp:datagrid>
11** </form>
**
示例运行结果如下 :
** 包含按钮的 DataGrid **
本示例显示一个包含 Detail 按钮的 DataGrid Web 控件。按钮以链接形式显示;若想使链接成为标准的按钮,需要在 ButtonColumn 标记中输入 ButtonType=”PushButton”.
** FAQ Details **
|
** FAQ ID **
|
** FAQ Description **
---|---|---
Details
|
144
|
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many other free Web site sites)?
Details
|
181
|
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.
…
|
|
源代码 :
1 @Import Namespace="System.Data"
1 @Import Namespace="System.Data.SqlClient"
1<script language="vb" runat="server">
2Sub Page_Load(sender as Object, e as EventArgs)
3BindData()
4End Sub
5
6
7Sub BindData()
8'1. Create a connection
9Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
10
11'2. Create the command object, passing in the SQL string
12Const strSQL as String = "sp_Popularity"
13Dim myCommand as New SqlCommand(strSQL, myConnection)
14
15'Set the datagrid's datasource to the datareader and databind
16myConnection.Open()
17dgPopularFAQs.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
18dgPopularFAQs.DataBind()
19End Sub
20</script>
**
1<form runat="server"> **
2<asp:datagrid autogeneratecolumns="False" backcolor="#eeeeee" cellpadding="4" font-name="Verdana" font-size=" 10pt " horizontalalign="Center" id="dgPopularFAQs" runat="server" width="85%">
3<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
4<alternatingitemstyle backcolor="White"></alternatingitemstyle>
5<columns>
6** <asp:buttoncolumn headertext="FAQ Details" text="Details"></asp:buttoncolumn>
7** <asp:boundcolumn datafield="FAQID" headertext="FAQ ID"></asp:boundcolumn>
8<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
9</columns>
10</asp:datagrid>
11** </form>
**
请注意为了使示例正常运行,需要将 DataGrid 放置在一个服务器端的表单中 ( 如上所示黑体的
1<form runat="”server”">) 。这是因为为了跟踪被点击的按钮和应该发生的关联动作, ASP.Net 页面应能够重新创建页面和 DataGrid 中的一系列按钮。为了做到这一点需要使用页面的状态信息 ( _ViewState_ ) 。对状态信息的讨论超出了本文的范围;为了获取更多信息请阅读 : Form Viewstate 。
2
3注意在示例中创建的按钮是一个文本链接按钮。这是 ButtonColumn 类生成的缺省外观。如果想显示一个标准的按钮,可在 ButtonColumn 标记中指定 ButtonType=”PushButton” 。 ButtonColumn 类包含一些重要的属性。在上面的代码中使用了两个格式方面的属性。 HeaderText 属性指定 DataGrid 中按钮所在列的页眉中的文字。 Text 属性指定了每个按钮的文本显示。与 BoundColumn 标记类似, ButtonColumn 标记可将每个按钮的文本设为 DataGrid 的 DataSource 属性中某一列的值 \- 在 ButtonColumn 类中省略掉 Text 属性并将 DataTextField 属性设为数据库中某个列的名称,该列的值将作为按钮的文本。</form>