相关文章
企通互联简单学习网页制作技术之CSS高级语法知识
北京网页设计DIV+CSS标准制作网页表单的select例子
北京网站设计实践DIV＋CSS网页布局入门指南
北京网站建设简单实用的网页表格特效
网站设计CSS入门教程之CSS的语法
北京网页设计Dreamweaver 4 简明教程(五、让你的网页更漂亮之二)
北京网站建设最简单的FLASH动画LOADING制作
网页设计VEGAS 5.0 音频新手入门——录音的硬件操作实例
北京网站设计FLASH MX 2004视频教程:Flash 系列介绍
网站设计Flash视频教程：1.15 部分选取工具
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站设计北京网站制作DreamwaverMX与ASP.NET(四)
北京网站设计北京网站制作DreamwaverMX与ASP.NET(四)
作者： 北京网站建设 日期：2008-03-27 06:03:35 来源： http://www.qitongnet.com
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
，在弹出的对话框中选择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) % > www.qitongnet.com网站设计
北京网站设计
< 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 >北京网页设计
北京网页设计
DataList还有Edit Item的样板，主要用于数据更新。此书会在后面的部分介绍到。
企通互联
网站设计
相关介绍:网站设计
北京网站建设
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
，在弹出的对话框中选择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) % > www.qitongnet.com网站设计
北京网站设计
< 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 >北京网页设计
北京网页设计
DataList还有Edit Item的样板，主要用于数据更新。此书会在后面的部分介绍到。
上一篇：网站设计DreamwaverMX与ASP.NET(五)
下一篇：企通互联DreamweaverMX打造留言本（五）
