中国IT技术联盟

         STEP2 编写代码

Selected Item时需要通过事件来显示的，所以我们需要建立按钮以启动事件。

j添加LinkButton,用以产生事件。将光标移到源代码窗口的< ItemTemplate >与< /ItemTemplate >中，单击more tags

，在弹出的对话框中选择asp:LinkButton控件。

[图2-1 Tag Chooser对话框]

在编辑LinkButton对话框中，设置LinkButton的属性。在ID输入框中输入名称:Detail，

在Command Name中输入”Detail”用于产生事件的命令，在Text对话框中输入Detail(将会显示出来)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

[图 2-2 LinkButton编辑框]

然后再Layout中选择所需的颜色，单击OK，即可生成代码。

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >

为了在交叉显示中也具有这样的效果，我们需要在< AlternatingItemTemplate >与< /AlternatingItemTemplate >中也插入相同的代码。
　　同时为了关闭弹出来的选择后样板，同样需要产生命令，所以要添加多一个Linkbutton。这样就需要在< SelectedItemTemplate >< /SelectedItemTemplate >中插入代码：

< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >

k有了命令，我们还需要使用程序来解释这个命令。其实过程并不复杂，只需要加入一小部分代码。在< head >< /head >中添加如下代码:

< script language="VB" runat="server" >

Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)

If e.CommandSource.CommandName="Detail" Then

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" Then

DataList1.SelectedIndex=-1

End If

DataList1.DataBind()

End sub

< /script >

程序可以取得你点击LinkButton的命令(CommandName)来判断要执行的程序。当DataList的SelectedIndex属性设定为e.Item.ItemIndex，就会打开SelectedItemTemplate页。如果命令为Close则DataList的SelectedIndex属性设定为-1(即没有数据项被选中)，则DataList会用ItemTemplate项样板显示此一项数据。

在< asp:DataList >中还要添加代码段

OnItemCommand="DataList_ItemCommand"

以声明与程序段DataList_ItemCommand的关系。

按”F12”预览，页面就会显示预想的效果。

[图 2-3 最终预览版]

　　附上主要程序段的源代码:

Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)

If e.CommandSource.CommandName="Detail" Then

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" Then

DataList1.SelectedIndex=-1

End If

DataList1.DataBind()

End sub

< form runat="server" >

< asp:DataList id="DataList1"

runat="server"

RepeatColumns="1"

RepeatDirection="Vertical"

RepeatLayout="Flow"

DataSource="< %# DataSet1.DefaultView % >"

OnItemCommand="DataList_ItemCommand" >

< HeaderTemplate >

Location Name < /HeaderTemplate >

< ItemTemplate >

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >

< /ItemTemplate >

< AlternatingItemTemplate >< font color="#0000FF" >

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

< /font >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

< SelectedItemTemplate >Address:

< %# DataSet1.FieldValue("ADDRESS", Container) % >

< BR >

City:

< %# DataSet1.FieldValue("CITY", Container) % >

< BR >

Telephone:

< %# DataSet1.FieldValue("TELEPHONE", Container) % >

< BR >

< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >

< /SelectedItemTemplate >

< /asp:DataList >

< /form >