考察DataGrid控件: Part 3 (上)


在第1部分,我们概述了DataGrid控件的基础知识;第2部分我们考察了如何定制DataGrid的显示界面,就像在演示示例揭示的那样,通过简单的编程我们就可以极大的提升显示效果.

  将数据显示出来固然不错,能对DataGrid添加某些自定义事件就更好了.比如,假设某个电子商务公司要求在DataGrid里列出交易数据的清单,而每笔交易可能包括一大堆数据,诸如商品类型、交易时间、订购者资料(姓名,地址等)、邮递方式等.如果在单个DataGrid 里显示(每笔交易的)信息将太繁杂了.

  正如我们在第2部分看到的那样,我们可以将AutoGenerateColumns属性设置为False,并将Columns属性设置为我们希望显示的信息的列.虽然这便于对数据分类,但如果用户想显示某个特定交易的信息又怎么办呢?理想情况下,我们可以为DataGrid里的每行记录添加一个名为"Details"的按钮,点击它时将对应记录的详细信息显示出来.

  构建基础

  正如我们在Part 2看到的那样,可以在DataGrid控件的Columns部分放置BoundColumn标签,每个BoundColumn标签对应一个列.为了使DataGrid包含一个按钮我们同样可以使用ButtonColumn标签.如下的代码揭示了如何在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>
演示页面为:http://aspnet.4guysfromrolla.com/demos/dgExample5.aspx

  为了能正常运行,我们需要将DataGrid放置在服务器端form(也即<form runat="server"> ),这是由于ASP.NET为了跟踪被点击的按钮及引发的事件,必须对页面以及DataGrid控件中的一系列按钮重新进行整合.为此,我们需要用到视图状态.关于视图状态的深入探讨请参阅文章《Form Viewstate》(http://www.asp101.com/lessons/viewstate.asp).

  请注意演示页面里的按钮显示为带下划线的文本形式,这是ButtonColumn class类默认创建的样式.如果你想将其显示为标准的按钮样式,只需要在ButtonColumn标签里简单的指定:ButtonType="PushButton" . 其实ButtonColumn class类包含了很多的属性,其中2种格式属性已经运用在上面的代码中了,HeaderText——它指定button列的标头信息;而Text属性指定每个按钮显示的文本.跟BoundColumn标签一样,ButtonColumn标签也可以将每个按钮显示的文本显示为从DataGrid的数据源返回的某个列的值——很简单,忽略Text属性,而将DataTextField属性设置为你想显示的某个列的名称.

  当点击按钮时触发事件

  现在DataGrid控件已经包含了一个按钮,我们想为它添加一些服务器端代码,以便当点击按钮时引发相关事件.我们已经知道,无论什么时候,只要点击DataGrid里的ButtonColumn按钮,就会触发ItemCommand事件,因此我们对该事件写服务器端的事件处理器,且必须像下面这样定义:

Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
  ...
End Sub

  一旦你在服务器端script区域(或在后台代码)定义该函数后,为将事件和事件处理器联系起来,你可以在DataGrid标签里添加OnItemCommand属性,像下面这样:
<asp:datagrid runat="server"
   ...
   OnItemCommand="eventHandlerName">
  ...
</asp:datagrid>

  下面的示例代码演示了当点击DataGrid控件里的一个按钮时如何运行事件处理器:

<script language="vb" runat="server">
 Sub Page_Load(sender as Object, e as EventArgs)
  If Not Page.IsPostBack then
   BindData() 'Only bind the data on the first page load
  End If
 End Sub
 
 
 Sub BindData()
  'Make a connection to the database
  'Databind the DataReader results to the DataGrid.
 End Sub
  
 Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
  Response.Write("You clicked one of the details buttons!")
 End Sub
</script>
  
<form runat="server">
 <asp:DataGrid runat="server" ... >
  ...
 </asp:datagrid>
</form>

  演示页面:http://aspnet.4guysfromrolla.com/demos/dgExample6.aspx

  在这里有一点非常重要,我们必须引起重视:我们只是在第一次访问页面的时候才执行数据库查询并对DataGrid实行绑定.在Page_Load事件处理器,我们检查页面是否产生回传,如果结果是not,我们便知道这是首次登录.在这种情况下,我们将数据库查询返回的DataReader绑定到DataGrid的DataSource属性,然后调用DataGrid的DataBind()方法.


  当点击其中任何一个"Details" 按钮时,ASP.NET页面都会产生回传,然后再次触发Page_Load事件处理器,但由于发生了回传,不会执行BindData()方法,而是执行detailsClicked事件处理器.注意,如果我们将数据重新绑定到DataGrid(意思就是说我们忽略对If Not Page.IsPostBack的检查)detailsClicked 事件处理器就不会运行,原因在于对DataGrid重新绑定后就不会触发ItemCommand事件了(再次品读上面的叙述吧——当你处理DataGrid时你很可能犯上面的错误,导致DataGrid不能触发按钮事件,我已经不止一次犯这种错误了!)

  本节我们阐明了如何创建与“点击按钮”相关的事件处理器,在第下半部分我们探讨如何确定究竟是DataGrid的哪条行记录的按钮被点击了


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3