<b>DreamwaverMX与ASP.NET(四)</b>[DW设计]

　4.操纵DataList组件显示集

相关介绍:

DataList是功效强化的Repeater控件,除了有Repeater原有的功效外,还可以设订单行显示的笔数(RepeatColumn),被选项样板(SelectedItemTemple),编辑项样板(EditTemplate).但是DataList会将输出的安置在表格中输出,而Repeater则更忠于样板的定义,不会增添任何HTML标志.(注意:为了能显示代码,以下全部代码都在“<”之后和“>”之前加了空格,不便之处请多谅解!)

STEP 1成立页面

我们要成立的页面就以下图所示.当我们点击Detail的超级链接时就会弹出具体资料,正如第一项中所示.点击Close时,具体资料就会关闭,恢答复来的模样.


[图 1-1 页面演示]

先挑选要显示的.为了显示欧洲的(即Region_ID=3),我们可以在Dataset设定中选定挑选Region_ID=3的.


[图 1-2数据挑选]

用Datalist控件做一个扼要显示的页面.我们先成立一个无的页面.然后挑选Application面板中的Server behavior.单击”+”,挑选DataList.


[图1-3 DataList挑选页面]

在弹出来的对话框中,我们可以按照需求对应的地方加入页面.

u Header: 表头

u Item: 项

u Alternating Item: 穿插显示

u Edit Item: 改正((默许是没有显示出来的,必须通过事件呼应才可以显示)

u Selected Item: 选中后的显示的(一样须通过事件呼应才可以显示)

u Separator: 脱离

u Footer: 表底


[图 1-4 编辑DataList对话框]
我们可以通过往Contents中增添HTML代码制作所需的,同时也可以通过单击 按钮来增添项.单击次按钮后,就会弹出项对话框让你挑选所需的.并在Contents输入框中加入

< %# DataBinder.Eval(Container.DataItem, "项") % >

的代码用于显示.


[图1-5 增添项]

为了到达预览的效果,首先在Header中加入代码:Location Name.用以显示标题.在Item中加入代码:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >,用Location_name来做每一项的标题.

在Alternating Item中加入代码

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >

以差别的颜色来显示.

固然Selected Item并不能即刻显示,但是我们还应写下代码,以备今后调用.以下:

Address:

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

< BR >

City:

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

< BR >

Telephone:

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

< BR >

单击OK,接着预览页面,下图就是以上代码的效果了.我们等一下会去实现显示出Selected Item项的效果的.


[图1-6 最初预览]
DataList辨别Repeater的一个差别点就是可以设置单行显示多笔,在DataList编辑窗口中可以举行设置.


[图 1-7 设置单行显示多笔]

挑选Use Line Breaks项就只是有一个< BR >标志举行脱离.挑选Use a Table则是以表格的情势输出,并且可以通过设置Table Columns来确订单行显示的笔数.

STEP2 编写代码

Selected Item时需求通过事件来显示的,所以我们需求成立按钮以启动事件.

j增添LinkButton,用以产闹事件.将光标移到源代码窗口的< ItemTemplate >与< /ItemTemplate >中,单击more tags ,在弹出的对话框中挑选:LinkButton控件.


[图2-1 Tag Chooser对话框]

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

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


[图 2-2 LinkButton编辑框]

然后再Layout中挑选所需的颜色,单击OK,便可生成代码.

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

为了在穿插显示中也具有这样的效果,我们需求在< AlternatingItemTemplate >与< /AlternatingItemTemplate >中也插入相同的代码.
同时为了关闭弹出来的挑选后样板,一样需求产生号令,所以要增添多一个Linkbutton.这样就需求在< SelectedItemTemplate >< /SelectedItemTemplate >中插入代码:

< :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项样板显示此一项.

在< :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" >

< :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) % >

< :linkbutton BackColor="#FFFFFF" CommandName="Detail" F