DataGrid Web控件深度历险(3) part1
2024-07-21 02:24:23
供稿：网友
这篇文章是一系列关于使用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中:
<form runat="server">
<asp:datagrid runat="server" id="dgpopularfaqs"
backcolor="#eeeeee" width="85%"
horizontalalign="center"
font-name="verdana" cellpadding="4"
font-size="10pt" autogeneratecolumns="false">
<headerstyle backcolor="black" forecolor="white" font-bold="true"
horizontalalign="center" />
<alternatingitemstyle backcolor="white" />
<columns>
<asp:buttoncolumn text="details" headertext="faq details" />
<asp:boundcolumn datafield="faqid" visible="false" />
<asp:boundcolumn datafield="description" headertext="faq description" />
</columns>
</asp:datagrid>
</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.
…
源代码:
<% @import namespace="system.data" %>
<% @import namespace="system.data.sqlclient" %>
<script language="vb" runat="server">
sub page_load(sender as object, e as eventargs)
binddata()
end sub
sub binddata()
'1. create a connection
dim myconnection as new sqlconnection(configurationsettings.appsettings("connectionstring"))
'2. create the command object, passing in the sql string
const strsql as string = "sp_popularity"
dim mycommand as new sqlcommand(strsql, myconnection)
'set the datagrid's datasource to the datareader and databind
myconnection.open()
dgpopularfaqs.datasource = mycommand.executereader(commandbehavior.closeconnection)
dgpopularfaqs.databind()
end sub
</script>
<form runat="server">
<asp:datagrid runat="server" id="dgpopularfaqs"
backcolor="#eeeeee" width="85%"
horizontalalign="center"
font-name="verdana" cellpadding="4"
font-size="10pt" autogeneratecolumns="false">
<headerstyle backcolor="black" forecolor="white" font-bold="true" horizontalalign="center" />
<alternatingitemstyle backcolor="white" />
<columns>
<asp:buttoncolumn text="details" headertext="faq details" />
<asp:boundcolumn datafield="faqid" headertext="faq id" />
<asp:boundcolumn datafield="description" headertext="faq description" />
</columns>
</asp:datagrid>
</form>
请注意为了使示例正常运行，需要将datagrid放置在一个服务器端的表单中(如上所示黑体的<form runat=”server”>)。这是因为为了跟踪被点击的按钮和应该发生的关联动作，asp.net页面应能够重新创建页面和datagrid中的一系列按钮。为了做到这一点需要使用页面的状态信息(viewstate)。对状态信息的讨论超出了本文的范围；为了获取更多信息请阅读: form viewstate。
注意在示例中创建的按钮是一个文本链接按钮。这是buttoncolumn类生成的缺省外观。如果想显示一个标准的按钮，可在buttoncolumn标记中指定buttontype=”pushbutton”。buttoncolumn类包含一些重要的属性。在上面的代码中使用了两个格式方面的属性。headertext属性指定datagrid中按钮所在列的页眉中的文字。text属性指定了每个按钮的文本显示。与boundcolumn标记类似，buttoncolumn标记可将每个按钮的文本设为datagrid的datasource属性中某一列的值-在buttoncolumn类中省略掉text属性并将datatextfield属性设为数据库中某个列的名称，该列的值将作为按钮的文本。
