当前位置导航:炫浪网>>网络学院>>网页制作>>Dreamweaver教程

DreamwaverMX与ASP.NET

  自从微软提出.NET战略之后,编程爱好者对其趋之若鹜。不过,.NET也的确令人惊讶,新的语言C#,新的web服务----web service,当然少不了广大编网爱好者的挚爱---ASP的下一代------ASP.net。然而,ASP.NET并未普及,只是因为没有一个好的编辑器。人们经历了手写板,VisualStudio.NET等编辑器,直到Dreamwaver MX的出现才真正达到了不用手写代码的程度了。

  DreamweaverMX将数据库和网页完美的结合在一起,对新的网页编程的支持更是没话说,他支持ASP.NET(C#),ASP.NET(VB),ColdFusion,JSP,ASP,XML,PHP,HTML,简直是无所不能。下面就是小编在试用Dreamwaver MX中的体验,供大家研究研究

机器的软件要求

  操作系统:Windows 2000或Windows XP professional(98是时候淘汰了^_^)

  需装软件:.NET Framework Redistributable(下载地址:http://asp.net/download.aspx) Dreamwaver MX(下载地址:http://www.macromedia.com/software/trial_download/)

  装好后就让我们开始我们的ASP.NET之旅。

1.建立ASP.NET站点

STEP 1 准备:

  运行ASP.net页面,计算机必须安装服务器程序(IIS),以提供对ASP.net的支持。所以我们必须安装IIS,在添加删除程序中的添加windows组件可以进行安装。

  用Internet管理器(控制面板│管理工具│Internet管理器)新建一个web站点指向你想摆所生成的页面的文件夹。



[图1-1 Internet管理器设置]
  将Dreamwaver MX安装目录下的Sample\GettingStarted\Tutorial和\Samples\Database下的所有文件copy到刚刚所设置的文件夹当中



[图1-2 页面内容]

  这个例子是一个出租汽车的服务中心,其中一部分需要将各个地区出租车公司的联系电话,FAX等信息在网页上发布。下面的工作就是用Dreamwaver MX来完成了。

STEP 2 建立web site:

  打开Dreamwaver MX,点击Site,选择New Site.



[图1-3 新建site]

  Dreamwaver MX支持两种新建站点模式:

(1)Basic:利用向导建立,方便简单,首选。

(2)Advanced:比较麻烦但设置的选项比较多,小编推荐先用Basic模式建立,再用Advanced模式来修改

下面用Basic模式来新建站点:

  第一步填写站点名,而后单击next



[图1-4 新建站点 basic step1]

  第二步 选择站点类型。确定是否用服务器端技术。由于本实例用到ASP.NET所以要选择第二个选项,并在下拉框中选择ASP.NET 。



[图1-5 选择是否采用服务器端技术]

第三步 设置测试站点的属性。选择测试的方式以及放文件的目录, 单击next。



[图1-6 测试站点属性设置]

  第四步 设定站点的URL, 单击next。



[图1-7 站点的URL设定]

  第五步设定共享文件,由于本实例在本级调试,选择第二项,单击next。



[图1-8 共享文件设定]

  剩下的就是站点总结了,单击Done.



[图1-9 站点总结]

 

      2.利用ASP.NET组件DataGrid显示数据

相关内容介绍:

  ASP.NET自带了很多web组件,加速编网页的速度。让我们用Dreamwaver MX自带的一个教程--global的例子,来演示一下如何利用此组件将数据库里的数据显示出来.

1.数据库链接和用DataGrid显示数据

  在web页面目录里的assets中有本实例的数据库global.mdb,我们的目的就是将此数据库中的location表中的数据根据Region_id的值来输出不同地区的资料。(可利用Access打开此数据库)

  我们可以将location3.htm文件重命名为location3.aspx(ASP.NET的web窗口文件的后缀为aspx),而后对其编辑。



[图2-1 需要更改的页面]

  让我们来删除中间简单的静态部分,来用ASP.NET的DataGrid来实现其功能。



[图2-2 删除静态部分的页面]

  3.利用Repeater组件显示数据集

相关介绍

  ASP.NET中数据的显示多种多样,其中Repeater是另外一个已有的组件。DataGrid总是会以”表格”来展示数据,当我们想用更自由的方式来展示数据着一定会用到Repeater控件,

  它以Template(样板)的方式来定义数据输出格式。

STEP 1. 建立页面
  我们可以通过更改原有的页面来建立用Repeater组件显示数据。将Location1.htm重命名为Location1.aspx。删除页面中原有的部分,并像上一章一样建立Dataset,其中筛选Region_IDEnterValue=1。下面让我们用Repeater控件来做动态页面。

  j为了利用样板定义输出格式,先建立表格。我们可以通过ApplicationàDatabases页面看

  数据库的结构。



[图3-1 数据库结构]

  根据数据库的结构,设计下列的表格。



[图3-2 模版图]

  k下面需要将数据绑定到表格中。将Application面板中Bindings中的数据项拖到其位置中。



[图3-3 Binding对话框]

  数据绑定后得到如下页面:



[图3-4数据绑定后的页面]

  是否有点似曾相识的感觉,因为Dreamwaver MX继承了UltraDev的传统以高亮显示数据。 ③ 其中Binding对话框中也可以选择数据表示的形式,点选页面的数据项后可在Binding中相应的数据选择数据表示的形式。



[图3-5 数据表示的形式]

  若要以此表格为样板显示所有数据项,则需全选此表格。单击Application面板中的Server Behaviors项中的”+”,选择Repeat Region项



[图3-6选择Repeat Region] [图 3-7 选择重复的方式]

  在Repeat Region中确定想重复的方式,单击OK。现在就可以按”F12”预览页面了。

  STEP 2   分析代码(注意:为了能显示代码,以下所有代码都在“<”之后和“>”之前加了空格,不便之处请多原谅!)

< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >

< ItemTemplate >

< table width="75%" border="0" >

< tr >

< td width="18%" >Location Name< /td >

< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > < /td >

< /tr >

< tr >

< td >City< /td >

< td width="35%" > < %# DataSet1.FieldValue("CITY", Container) % > < /td >

< td width="19%" >Address< /td >

< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > < /td >

< /tr >

< tr >

< td >State< /td >

< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >

< td >Code< /td >

< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >

< /tr >

< tr >

< td >Telephone< /td >

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

< td >Fax< /td >

< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >

< /tr >

< /table >

< /ItemTemplate >

< /ASP:Repeater >

  ASP.net是通过建立一个ItemTemple的模板来重复显示所有数据的,所以若要设置Repeater的样式,可以通过设置模板来实现。

我们还可以通过添加其他样板来达到我们要的效果。

AlternatingItemTemplate : 实现交叉显示数据。与原ItemTemplate的模板交叉显示数 据

SepartorTemplate: 分隔符样板。可用于分隔数据行。

HeaderTemplate: 标题样板。显示与所有数据的最上方。

FooterTemplate: 结尾样板。显示与所有数据的最下方。

其设计形式同ItemTemplate一样。只需将你想要做模板的部分用标记符包围即可。

  通过Dreamwaver MX来插入代码可以有快捷方式。点击Insert面板的ASP.NET标签,然后点击标志,就会弹出标记符添加对话框。选择ASP.NET Tags中的Templates项目。你就可以从中选择你想要添加的代码。Dreamwaver MX会在你原来输入光标在的位置上添加代码。



[图 2-1 添加标记符对话框]

 

 

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

< 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 >

 

5.创建留言页面----数据验证控件及添加数据

相关介绍:

  数据正确性是网站所必需的。为了更容易的检验使用者输入的数据是否正确,ASP.NET为编程人员提供了数据验证控件。ASP.NET提供的数据验证控件包括。(注意:为了能显示代码,以下所有代码都在“<”之后和“>”之前加了空格,不便之处请多原谅!):

控件

功能

RequiredFieldValidator

检验某一输入栏是否有数据输入

RangeValidator

检验某一输入栏所输入的数据是否在特定的范围内

CompareValidator

检验某一输入栏是否等于,不等于,大于,不小于,小于

ValidationSummary

列出所有未通过检验的控件

RegularExpressionValidator

检验某一栏是否符合正则表达式规则

CustomValidator

自定验证规则



STEP 1 设计页面
  我们先用表格设计出大概的框架。由于数据库中的COMMENTS表中有



[图5-1 数据库框架]

  COMMENT_ID(自动编号),FIRST_NAME(文本),LAST_NAME(文本),TELEPHONE(文本),EMAIL(文本),SUBMIT_DATE(日期/时间),COMMENTS(备注),ANSWERED(布尔值)等字段。根据需要我们在站点中设计了如下图的页面,命名为reg.aspx。



[图5-2 最初页面]

  其中COMMENT_ID,是可以由ACCESS自动添加的,ANSWERED不需要用户自己添加。在SUBMIT_DATE的默认值设置为Now(),则会由ACCESS自动写入添加纪录的日期。

  以前的ASP页面中,我们可以通过来设置输入框来输入数据。ASP.NET中带有textbox控件来接受数据,语法如下:

< asp:textbox id=”…” runat=”server” 其他属性/ >

  在DreamweaverMX中可以通过单击 快捷按钮来添加textbox控件。在弹出的对话框中通过设置ID,text mode(对话框类型),tool tip(即鼠标悬于控件上的提示),以及Layout(样式设计),Style Information(用于设置输入文字格式以及textbox边框格式),来设置控件。下图是textbox的设置对话框。



[图5-3 textbox设置对话框1]



[图5-4 textbox设置对话框2]



[图5-5 textbox设置对话框3]

由于数据项COMMENT需要输入大量的文字,所以需要用到多输入行的textbox。只需设置text mode为MultiLine并输入所需的行数(Rows)即可。

为了产生添加的事件,还需要一个按钮。单击Forms标签,单击”button”按钮添加。

STEP2 数据验证的使用

由于First_name,Last_name,telephone,email是必须输入的,所以为了防止用户忘记输入,则可以添加RequiredFieldValidator控件来验证控件。由于控件会在出现验证有误的情况下在其所在的位置显示验证不通过的内容,故应在适当的位置放入数据验证控件。

RequiredFieldValidator数据验证的控件语法如下:

< asp:RequiredFieldValidato其他属性 runat=”server” >出错信息< / asp:RequiredFieldValidator >



< asp:RequiredFieldValidator ErrorMessage="出错信息" 其他属性 runat=”server”/ >

在单击More Tags后,选择ASP.NET Tags的Validation Server可以看到有不同类型的数据验证控件选择。我们需要在First_name的输入框后面添加验证控件asp:RequiredFieldValidator。

在RequiredfieldValidator控件设置窗口中,Control to Validate是为与此数据验证控件相关联的输入控件的ID,而Error Message就是数据验证失败的时候显示的信息。同时我们可以通过设置layout,style Information来选择所需的样式。



[图5-6 验证控件选择]



[图5-7 RequiredfieldValidator控件设置对话框]

同时在Last_Name输入框后面用相同的方法添加另一个RequiredFieldValidato数据验证控件。现在我们可以保存,并预览页面。当没有在First_name和Last_name输入框中输入数据而且单击Submit按钮的时候,就会出现验证失败消息。如图5-8所示。

但是很多时候我们需要验证有效的数据,比如邮政编码一定为6位,输入的Email地址需要有特定的形式。这里就需要用到RegularExpressionValidator来验证数据的有效性。在本注册页面中,telephone和Email都可以用到此控件来验证。



[图5-8 RequiredfieldValidator对话框]



[图5-9 Email设置属性]

同RequiredfieldValidator验证控件添加的方法类似,单击”More tags..”选择添加数据验证控件。不同的地方就是设置Validation Expression。由于telephone需要输入7-10位的数字,需设置如下:

[0-9]{7,10}

其语法如下:

[]:用来定义可接受的字符,如a-z表示小写的’a’-‘z’都是可接受的字符,a-zA-Z表示可接受所有字母,而0-9就表示可以接受所有数字。

{}:用来定义必须输入的字符数,{7,10}表示可以输入7-10个字符,{0,}表示可以接受0-无限多个字符。

‘.’:表示输入任意字符。.{0,}表示可接受0-无限多个任意字符。

| :表示OR(或),例如[A-Za-z]{3}|[0-9]{3}表示可以接受3个英文字母或是3个数字

():为了方便阅读,含有|符号的字符串通常会被()之中。例如([A-Za-z]{3}|[0-9]{3})。

\:如果含有[],{},(),|等特殊符号必须在这些字符串之前加上\.。

下列是一些比较常用的例子:

Email: .{1,}@.{1,}/..{1}

电话(包括区号): \([0-9]{3,4})\)[0-9]{7,8}

虽然不可以保证用户输入是其真正的资料,但是检验控件可以保证格式是对的。



[图5-10 预览页面]

至于CompareValidator控件,其各属性设置方法如下:

Control to Compare

设置与其相比较的控件

Control to Validate

设置与其相关联的控件

Value to Compare

设置相比较的值

Operator

设置比较的关系(等于,不等于,大于,大于等于,小于,小于等于)

Type

比较的数据类型

Error Message

显示信息



[图5-11 CompareValidator设置对话框]

CustomValitor设置方法与其他控件类似,但是需要手写函数OnServerValidate(在Events中)来验证数据。



[图5-12CustomValitor设置对话框]

例如

< asp:CustomValidator id=”CusValid” runat=”server” ControlToValidate=控件名 OnServerValidate=”TheFunction” >报错信息< / asp:CustomValidator >

< script language=”vb” runat=”server” >

Function TheFunction(sender as object,,value as string) as Boolean

……..

return …

End function

< /script >

此控件会调用TheFuncion函数,如果返回false则会有报错信息

 

RangeValidator控件



[图5-12 RangeValidatorr设置对话框]

可以通过Mininum Value(最小值),Maxinum Value(最大值)来设置值的范围。同时可以通过Type来设置比较的类型,例如”string”,”Integer”等。其他设置类似于其他组件的设置。

还有一个组件:ValidationSummary。其中HeaderText设置抬头文字,DisplayMode设置显示模式,其具体属性如下:

属性值

意义

List

BulletList

SingleParagraph

ErrorMessage分行显示

ErrorMessage分项显示

ErrorMessage显示成同一行



[图5-13 ValidationSummary属性设置对话框]

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

< table width="75%" height="594" border="1" cellpadding="1" cellspacing="0" bordercolor="#999999" >

< tr >

< td width="22%" height="22" >First Name< /td >

< td width="38%" >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="first" runat="server" TextMode="SingleLine" ToolTip="Please input the first name" MaxLength="40" BorderWidth="1" width="200"/ >< /td >

< td width="40%" >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="first" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="validname" runat="server" / > < /td >

< /tr >

< tr >

< td height="22" >Last Name< /td >

< td >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="Lastname" runat="server" TextMode="SingleLine" Width="200" ToolTip="Please input the last name" BorderWidth="1"/ >< /td >

< td >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="Lastname" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailLast" runat="server" / > < /td >

< /tr >

< tr >

< td height="22" >Telephone< /td >

< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0066FF" ID="telephone" runat="server" TextMode="SingleLine" ToolTip="Please input your telephone" Width="200" / >< /td >

< td > < asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="7-10 numbers required" ForeColor="#FF0000" ID="vailtel" runat="server" ValidationExpression="[0-9]{7,10}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailtel2" runat="server" / >< /td >

< /tr >

< tr >

< td height="22" >Email< /td >

< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="email" runat="server" TextMode="SingleLine" ToolTip="Please input your E-mail" width="200"/ >< /td >

< td >< asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Invaliate Email address" ForeColor="#FF0000" ID="valiemail" runat="server" ValidationExpression=".{1,}@.{3,}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Required Field" ForeColor="#FF0000" ID="valiemail2" runat="server" / > < /td >

< /tr >

< tr >

< td height="22" colspan="3" >< div align="center" >Comments< /div >< /td >

< /tr >

< tr >

< td height="188" colspan="3" >< div align="center" >

< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="Comments" Rows="16" runat="server" TextMode="MultiLine" ToolTip="Please input the Comments" width="400"/ >

< /div >

< div align="center" > < br >

< /div >< /td >

< /tr >

< tr >

< td height="71" colspan="3" >< div align="center" >

< asp:validationsummary BackColor="#CCCCCC" DisplayMode="BulletList" ForeColor="#FF0000" HeaderText="有误的内容包括:" ID="valSum" runat="server" ToolTip="Error" / >

< /div >< /td >

< /tr >

< tr >

< td height="22" colspan="3" >< input type="submit" name="Submit" value="Submit" >

< /td >

< /tr >

< /table >

样式如下:



[图5-14 预览]

STEP 3 数据添加

  至于实现添加数据的功能就比较简单,我们可以通过向导来设置添加数据的功能,并让DreamweaverMX自动添加代码。单击Application中的Server Behaviors标签,而后单击+按钮从中选择Insert Record(如图5-15)。

  在弹出的对话框中首先要确定相连的数据源。如果在列表中没有找到,可以单击Define按钮设置数据源(如图5-16)。Insert into table用于设置需要添加数据的表,Columns中可以将文本框和对应的数据源相对应,并设置数据类型。On success,Go To中是设置如果添加数据成功跳转到的页面。On Failure,Go To中可以设置添加数据失败跳转到到的页面,同时我们也可以选择Display Debugging Information On Failure设置在添加数据失败显示报错信息。


让我们看看添加的代码:

< MM:Insert

runat="server"

CommandText='< %# "INSERT INTO COMMENTS (COMMENTS, EMAIL, FIRST_NAME, LAST_NAME, TELEPHONE) VALUES (?, ?, ?, ?, ?)" % >'

ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'

DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'

Expression='< %# Request.Form("MM_insert") = "form1" % >'

CreateDataSet="false"

SuccessURL='< %# "index.htm" % >'

FailureURL='< %# "reg.aspx" % >'

Debug="true"

>

< Parameters >

< Parameter Name="@COMMENTS" Value='< %# IIf((Request.Form("Comments") < > Nothing), Request.Form("Comments"), "") % >' Type="WChar" / >

< Parameter Name="@EMAIL" Value='< %# IIf((Request.Form("email") < > Nothing), Request.Form("email"), "") % >' Type="WChar" / >

< Parameter Name="@FIRST_NAME" Value='< %# IIf((Request.Form("first") < > Nothing), Request.Form("first"), "") % >' Type="WChar" / >

< Parameter Name="@LAST_NAME" Value='< %# IIf((Request.Form("Lastname") < > Nothing), Request.Form("Lastname"), "") % >' Type="WChar" / >

< Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("telephone") < > Nothing), Request.Form("telephone"), "") % >' Type="WChar" / >

< /Parameters >

< /MM:Insert >

MM:Insert是Dreamweaver用于添加数据库的标签,Parameter就是用于指定参数的数值。

  前面的代码就是用于指定数据库链接以及添加成功后跳转到的页面,添加失败显示错误信息,还有相关联的表格。

  这些都是MacroMedia自己开发的,需要Macromedia的一些组件支持,与现在网上很多ASP.net的标准代码格式不同。请大家参照代码的时候不要根据此代码而错误理解ASP.net的标准代码格式。标准代码格式大家可以参看www.gotdotnet.com。如果大家想写标准的代码,可以使用WebMatrix。

6.创建记录修改页面

  相关介绍(注意:为了能显示代码,以下所有代码都在“<”之后和“>”之前加了空格,不便之处请多原谅!):

  对数据的添加,修改,删除是对数据库的三个基本操作。本节介绍修改记录部分。

STEP 1 设计修改流程

  一般来说,只需要对指定的记录进行更新,所以需要建立搜索页面进行查询,并将查询结果显示在结果页中,并让用户对其进行修改。最后通过提交操作完成更新任务。

  首先,建立查询页面。在建立dataset的过程中,我们可以通过数据过滤器Filter选择所需的数据。由于我们将会点击DataList中的链接来到达此页面,所以选择URL Parameter并利用关键字CODE来筛选出所需的页面。



[图 6-1筛选数据]

  为此,在站点中新建modify.aspx文件,并添加DataSet如上图。

Step2 建立细节页面

  为了产生链接,首先应建立导航页面。可以对在第3节中建立的DataGrid页面修改达到这样的导航效果。DataGrid的样式是修改的,数据项同样可以设置为显示有链接的文字。同样在DataList和Repeater中也可以实现同样的功能,都是设置一个超级链接到细节页面。

  打开原来的location2.aspx文件,修改原来的DataList样式。选择DataListm单击Edit Columns(如图6-2)。在弹出的DataGrid样式设计对话框(图6-3)中,可以将Location_name的类型设置为Hyperlink。选中Location_name,单击Change Column Type按钮更改为Hyperlink。



[图 6-2 Edit Columns..]



[图 6-3 设置hyperlink]

对于Hyperlink设置如下图,


[图 6-4 设置链接关键字]

显示的数据域Location_name,连接关键字为code,需要跳转到的页面就是modify.aspx页面。点击链接后具体的网址链接将会为

http://yoursite/modify.aspx?CODE=所点击的纪录的code的值

而modify.aspx页面也将会通过传来的code的值从数据库中查询所需的纪录。

为了在modify.aspx页面中更新数据,就需要用到表单。这就需要将数据记录和输入框绑定。在Dreamweaver MX中绑定数据的方式和Dreamweaver UltraDev中类似。将页面设置如图6-5。新建6个Text Field,1个hiddenField,1个submit按钮,放到适当的位置。其中hiddernField用于保存此记录的CODE值。因为code值为关键字,所以不需改变。


[图 6-5 modify.aspx页面]

单击Binding标签,将具体数据项拖到与之对应的text field。同时在Format中可以设置数据的显示类型。而同样可以将text field的所有属性和数据源绑定。选择记录的第一个下拉
 

[图6-6 Binding] [图 6-7 数据类型选择] [图6-8 绑定属性]

列表,设置被数据源绑定的text Field属性。


 STEP 3数据更新

至于数据更新可以点击Application面板中的Server Behaviors中的”+”按钮,选择Update Record。


[图 6-9 选择Update Record]



[图6-10 设置关联]

在弹出的对话框中,需将输入框和相对应更新的数据源关联起来,并设置数据类型。其中CODE应为关键字即Primary Key。类似于Insert Record的页面,还要设置成功添加和添加失败跳转到的页面。

现在可以预览一下做好的页面。输入网址http://yoursite/location3.aspx,可以看到如图6-11的页面。



[图6-11 location3.aspx页面浏览]

Location_name的一项是可以点击的,并将跳到细节页面modify.aspx。



[图6-12 更新页面预览]

  通过modify.aspx页面就可以修改现有数据,并可以通过表单提交事件来更新数据。

其更新的主要代码如下:

< MM:Update

runat="server"

CommandText='< %# "UPDATE LOCATIONS SET CITY=?, STATE_COUNTRY=?, FAX=?, TELEPHONE=?, ADDRESS=? WHERE CODE=?" % >'

ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'

DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'

Expression='< %# Request.Form("MM_update") = "form1" % >'

CreateDataSet="false"

SuccessURL='< %# "location3.aspx" % >'

Debug="true"

>

< Parameters >

< Parameter Name="@CITY" Value='< %# IIf((Request.Form("city") < > Nothing), Request.Form("city"), "") % >' Type="WChar" / >

< Parameter Name="@STATE_COUNTRY" Value='< %# IIf((Request.Form("state") < > Nothing), Request.Form("state"), "") % >' Type="WChar" / >

< Parameter Name="@FAX" Value='< %# IIf((Request.Form("fax") < > Nothing), Request.Form("fax"), "") % >' Type="WChar" / >

< Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("tele") < > Nothing), Request.Form("tele"), "") % >' Type="WChar" / >

< Parameter Name="@ADDRESS" Value='< %# IIf((Request.Form("address") < > Nothing), Request.Form("address"), "") % >' Type="WChar" / >

< Parameter Name="@CODE" Value='< %# IIf((Request.Form("hiddenField") < > Nothing), Request.Form("hiddenField"), "") % >' Type="WChar" / >

< /Parameters >

< /MM:Update >

Dreamweaver MX是通过mm:update来表识更新的代码的。其格式和MM:Insert类似。

相关内容
赞助商链接