DataGrid Web控件深度历险(3) part1

这篇文章是一系列关于使用 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>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus