使用 Dreamweaver MX 进行 ASP.NET 教程






4.78/5 (22投票s)
2002 年 11 月 29 日
16分钟阅读

428275

6151
一篇演示如何使用 Dreamweaver MX 创建简单 ASP.NET 应用程序的文章。
入门
我们将创建 ASP.NET 数据驱动的主/明细页面,以及插入、更新和删除记录的页面。您还将学习如何使用新的 ASP.NET 服务器控件构建表单,如何实现 ASP.NET 客户端字段验证,以及如何开发自定义 ASP.NET 控件。
除了涵盖 DWMX 功能外,Dot NET News 还展示了如何在内容管理页面上实现 ASP.NET 文件夹级别的安全性,并讨论了如何使用 ASP.NET 身份验证服务对全局站点用户进行身份验证。本教程的完整代码可供下载。
本教程假定您熟悉在 MS Access 中创建数据库,了解应用程序开发的基本概念,并且熟悉 Dreamweaver UltraDev。
首先,我们需要设置我们的 Access 数据库。[*] 新闻内容系统数据库很简单。我们只需要两个表:tbl_Admin 和 tbl_New。左侧的图像显示了所有必需的表和字段。字段类型不言自明。
现在我们有了要处理的数据库,我们需要创建一个新的 Web 项目。在该文件夹内,我们将创建 database 文件夹并将新创建的 Access 数据库保存在其中。同时,我们还需要创建 admin、asp、controls、images 和 **bin** 文件夹。Bin 是一个重要文件夹,我们稍后会介绍。
启动 DreamWeaver MX 并选择“站点”下拉菜单 >“新建站点”。您会注意到的第一件事是(除非您已更改设置),一个类似 FrontPage 的向导会弹出。仔细查看,您会看到两个选项卡:“高级”和“基本”。我们想尝试一下,所以我们选择“高级”选项卡。这将打开熟悉的 UD 风格的站点定义窗口。像往常一样设置站点根文件夹。当到达服务器模型下拉菜单时,我们选择 ASP.NET VB。
让我们进入 DWMX 设计环境并四处看看。数据库绑定和服务器行为选项卡现在位于 DWMX 风格 GUI 的“应用程序”部分工具调色板下。但您会注意到,现在您拥有“数据库”和“组件”选项卡,而不仅仅是“绑定”和“服务器行为”。我们将从数据库选项卡开始。
数据库选项卡是您定义 ASP.NET 应用程序数据库连接的地方。在 ASP.NET 中,全局配置文件 web.config 以 XML 格式保存数据库连接和其他设置。不,别担心,您不必编写 XML。DWMX 会为您创建 web.config 文件。
从“数据库”选项卡下拉菜单中选择“OLE DB”或“SQL Server”连接。展开的 ASP.NET 连接界面将打开。您会看到几个新功能:一个“构建”按钮和“模板”。单击“模板”并选择适合您的数据库的驱动程序。将连接命名为 datasource,然后单击“模板”按钮。从模板列表框中选择 Access 2000 的 JET 4.0 驱动程序,然后单击“确定”。您将返回到原始窗口。填写您的连接字符串的空白模板。[†] DWMX 在您单击“确定”并关闭连接界面时编写 web.config 文件。web.config 中的 XML 包含您的数据库连接,并且您在该站点中创建的每个新的 *.aspx 页面都会在您添加数据集或任何其他 SB 时自动链接到您的数据库,就好像连接包含在 asp 文件中一样。
<@Register TagPrefix="MM" Namespace="DreamweaverCtrls"
Assembly="DreamweaverCtrls, version=1.0.0.0,publicKeyToken=836f606ede05d46a,
culture=neutral"%>
不过,您可能需要自定义默认的 MX web.config。我强烈推荐的一个自定义设置是
<system.web> <customErrors mode="Off" /> </system.web>
如果您在网络上工作,则需要此代码。这允许将特定错误消息输出到远程用户。没有它,您必须从服务器计算机的桌面运行页面才能获得详细的错误报告。
前端
当您开始创建 ASP.NET 主/明细页面集时,您会发现“插入”>“主/明细”菜单项是灰色的。这意味着您将不得不手动创建这些页面,而不是由 UltraDev 自动完成。
主页
打开一个新文件。从“动态页面:”列表框中选择 ASP.NET VB。从服务器绑定下拉菜单中选择数据集。这将打开用于定义记录集的熟悉界面。唯一不同的是“失败时,转到:”文本框。此外,数据的集合在 ASP.NET 中称为数据集。将您的数据集命名,或者像我一样使用默认值,并从“tbl_New”表中选择所有项。单击“测试”。将文件保存为 asp/default.aspx。如果您现在查看代码视图,您将看到 DreamWeaverMX ASP.NET 数据集代码。现在,您可以像往常一样将数据集字段拖放到页面上。在页面顶部创建一个具有一行一列的表格。输入“站点新闻”。突出显示文本,然后从服务器行为下拉菜单中选择“显示区域”>“如果数据集不为空”。现在添加“无新闻”,并应用“显示区域”>“如果数据集为空”SB。
创建另一个表格,两行一列。将 N_headline 字段和 N_ID 字段拖到第一行。突出显示 N_headline 值的字段,并创建一个新链接。在新的链接 URL 对话框中键入“news_details.aspx?N_ID=” 然后切换到代码视图。选择并剪切数据集“N_ID”字段,并将其粘贴到等号 (=) 符号和双引号 (") 之间的链接中。完成后它应该看起来像这样:
<a href="news_details.aspx?N_ID=<%# DataSet1.FieldValue("N_ID",
Container)%>">
正如您所猜测的,这会链接到详细信息页面。在表格的第二行键入“发布:”,然后将数据绑定面板中的日期字段拖到冒号后面的位置。选择您的表格,并添加“重复区域”SB。从“插入”>“应用程序对象”子菜单中选择“数据集导航栏”。保存文件,您就快完成了。
在您能够运行页面之前,您还需要为 DWMX ASP.NET VB 站点执行一项操作:部署支持文件。选择“站点”>“部署支持文件…”将出现“部署支持文件”对话框。选择您的 Web 站点的根文件夹,然后单击“部署”。DreamweaverCtrls.dll 将被复制到 bin 文件夹。现在 - 如果您有一个启用了 ASP.NET 的服务器 - 您应该能够运行该页面。
详细信息页面
从“文件”>“新建”对话框中选择一个新的 ASP.NET VB 页面。将页面保存为 news_details.aspx。从绑定下拉菜单中选择“数据集查询”,然后创建一个新的数据集。从 New 中选择所有。在此页面上,我们需要过滤结果,因此从“过滤器”下拉菜单中选择“N_ID”,然后选择“=”号。我们正在使用查询字符串传递我们的 N_ID 值,因此从下一个下拉菜单中选择“URL 参数”,然后在最后一个字段中键入“N_ID”。(如果需要,请在“高级”窗口中删除查询中的引号 - 就像我一样。)单击“确定”并保存页面。再次,您需要创建一个表格 - 三行一列。现在将数据集字段拖到您的表格中:N_headline 放在顶行,N_Date 放在第二行,N_paragraph 放在最后一行。应用您想要的任何格式,保存页面,您就完成了。
后端
后端管理将有一个主页面用于导航新闻项,具有添加、编辑和删除功能,以及一个更新设置页面,可以在其中更改后端访问密码/用户名。我们有很多工作要做,所以让我们开始吧。
主页
创建一个新的 ASP.NET VB 页面并将其保存为“/admin/admin_news.aspx”。这将是我们的主页面。定义一个数据集,选择“tbl_New”表中的所有项。插入一个表格,三列三行。在顶部和底部行输入文本“添加新闻项”。将每个实例制作成指向 add_news.aspx 的超链接。将标题拖到中间行的第一列。移动到第二列。键入“编辑”,并将其制作成一个指向 /admin/edit_news.aspx?N_ID= 的链接,然后像之前一样将数据集 N_ID 字段拖放到页面上并插入到查询字符串中。在最后一列键入“删除”,并制作一个指向 /admin/delete_news.aspx?N_ID= 的链接,再次使用 N_ID 数据集字段值作为我们的查询字符串参数。就是这样。编码在这里完成。
删除页面
打开一个新页面并将其保存为 /admin/delete_news.aspx?N_ID=。从服务器行为下拉菜单中选择“删除记录”。您将看到“删除记录”对话框。从第一个下拉菜单中选择“主键值”。选择您的连接“datasource”。选择“tbl_New”表。从“主键值”下拉菜单中,选择“URL 参数”,并在文本框中输入“N_ID”。最后,单击“浏览”按钮并选择 /admin/admin_news.aspx 作为成功后的重定向。保存页面并关闭它,因为您完成了。当您从管理页面单击“删除”链接时,删除将发生得如此之快,您甚至看不到它,所以要小心。
编辑和添加新闻项页面
添加新闻页面将是我们可以接触到的第一个服务器控件。服务器控件是各种复杂程度的 ASP.NET 对象。我们将使用的第一个服务器控件是表单字段的 ASP.NET 版本:asp:textbox
。幸运的是,当您选择“插入”>“应用程序对象”>“记录插入表单”时,这些服务器控件将自动插入。这将调出“记录插入表单”对话框。(如果您查看,您会看到一个用于“记录更新表单”的姐妹命令。)突出显示“N_ID”行并将其从更新中删除。单击确定。这将返回到设计环境。删除表单中包含日期字段的行,并在表单标记之间的任何位置插入一个隐藏字段。命名它为“N_Date”。它将保存发布日期。在 Classic ASP 中,我们可以简单地在隐藏输入值字段中编写
<%=Date()=%>
。但是,在 ASP.NET 中,这行不通。在 ASP.NET 中,我们使用 DateTime.Today
属性。您的隐藏输入应该看起来像这样:
<input name="N_Date" type="hidden" id="N_Date" value="<%=DateTime.Today %>">
现在我们有了表单,我们需要表单字段验证。根本不要尝试从“行为”菜单应用“验证表单”。不,我们必须动手编写表单字段验证。至少 Microsoft Quick Start 上的信息相当不错。我在这里找到了许多有帮助且易于理解的信息 - 包括表单字段验证:http://asp.net/Tutorials/quickstart.aspx。我们将使用 ASP.NET 客户端表单验证。我们需要两个函数来实现这一点,一个用 VB.NET,另一个用 JavaScript。
VB.NET
<script language="VB" runat="server"> Sub Page_Load If Not IsPostBack ' Validate intially to force *s to appear ' before the first round-trip Validate() End If End Sub </script>
JavaScript
<script language="javascript">
<!--
function ClientOnChange() {
if (typeof(Page_Validators) == "undefined")
return;
document.all["lblOutput"].innerText = Page_IsValid
? "Page is Valid!"
: "Some of the required fields are empty";
}
//-->
</script>
在 ASP.NET 中,我们使用 RequiredFieldValidator
控件来执行简单的字段验证。RequiredFieldValidator 的语法很简单:
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ControlToValidate="N_headline" ErrorMessage="*" Display="Static"> </asp:RequiredFieldValidator>
我们需要对我们的“添加新闻项”页面做的第一件事是添加由在页面加载事件中触发的 VB 脚本子例程引用的 >asp:label
控件。它应该看起来像这样:
<asp:Label ID="lblOutput" Name="lblOutput" Text="Fill in the required fields below" cssclass="errortxt" runat="server" />
现在为 N_headline 和 N_Paragraph asp:textbox
控件添加必需字段验证控件。必需字段使用 ControlToValidate
属性引用 asp:textbox
控件。我们还需要修改 N_headline 和 N_Paragraph asp:textbox
控件以进行动态客户端验证,方法是设置 onchange
事件属性为 ClientOnChange
。结果看起来有点像这样:
<asp:RequiredFieldValidator
id="RequiredFieldValidator1"
runat="server"
ControlToValidate="N_headline"
ErrorMessage="*" Display="Static">
</asp:RequiredFieldValidator>
<asp:textbox
Columns="25"
ID="N_headline"
MaxLength="150"
Rows="1"
runat="server"
TextMode="SingleLine"
onchange="ClientOnChange();" />
假设您已将 RequiredFieldValidator
添加到 N_headline 和 N_paragraph asp:textbox
,您可以保存并关闭。 “更新新闻项”和“更新设置”表单的构建方式与上面为“添加新闻项”页面概述的程序相同 - 除了插入“记录更新表单”而不是“插入记录表单”,但这应该很明显。另一个不同之处在于 Update SB 需要一个隐藏输入在页面上以保存 TableName_ID 值。在使用“插入”>“记录更新表单”时,TableName_ID 值会作为 asp:label
文本添加到表单中。您应该将其更改为隐藏输入,因为此自动编号字段无法更改。
<input name="Admin_ID" type="hidden" id="Admin_ID" value="<%# ds_user.FieldValue("Admin_ID", Container)%>">
安全简报
DWMX 没有内置支持为 ASP.NET 页面添加安全性。但是,ASP.NET 平台内置了表单身份验证来保护网站。这种身份验证在 web.config 的 XML 中定义,如下所示:
<system.web> <customErrors mode="Off" /> <authentication mode="Forms"> <forms name=".ASPXAUTH" loginUrl="admin/login.aspx"> <credentials /> </forms> </authentication> <authorization> <deny users="*" /> </authorization> </system.web>
这种类型的安全性保护整个网站。登录时,访客会被重定向到最初请求的页面或站点的首页。但我们实际上并不想保护整个应用程序。我们只是不想让任何人进入管理部分。我们首先要做的就是在根目录 web.config 中将“deny”一词更改为“allow”。现在我们的访客可以进入网站。接下来创建一个新的 web.config 文件并将其保存到 admin 文件夹,以便我们可以为该文件夹设置单独的安全设置。
在新的 web.config 中输入以下内容:
<configuration> <system.web> <authorization> <allow users="admin" /> <deny users="*" /> </authorization> </system.web> </configuration>
请注意,新的 web.config 仅包含 admin 文件夹的安全设置。所有其他设置都从根 web.config 继承。Web.config 设置具有自上而下的层级结构。您可能认为它们像层叠样式表一样。
打开一个新文件并将其保存为 /admin/login.asp。添加一个表单,两个 asp:text
控件和一个 asp:button
控件。将第一个 asp:text
控件命名为 User_Name,第二个命名为 User_Password。像以前一样添加表单字段验证并保存文件。现在我们需要想办法检查数据库记录以匹配 User_Name/User_Password 组合,并在找到它们时 - 将 Admin 会话变量状态设置为 true。一种方法立即浮现在脑海中。当用户提交登录时,如果找不到匹配的用户名/密码组合,数据集将返回空。如果找到匹配项,记录数将返回一个正数。因此,我们只需要检查查询是否返回记录,如果是,则设置 admin 标志。
我们需要一个具有以下查询的数据集。我们还需要构建参数来收集提交的表单值。基本上,我们正在构建一个搜索页面,因此我们将使用与在 Classic ASP 中构建搜索页面相同的技术。查询将看起来像这样:
SELECT *
FROM tbl_Admin
WHERE tbl_Admin.User_Name = @User_Name
AND tbl_Admin.User_Password = @User_Password
我们需要添加两个参数来将值从登录表单传递到查询。单击参数窗口中的“+”号,将打开“添加参数”对话框。输入“@User_Name”,选择类型为“VarChar”。接下来单击“构建”按钮,将打开“构建值”对话框。“@User_Name”参数将已在“构建值”对话框的“名称”字段中。从“源”下拉菜单中选择“表单变量”,然后在“默认值”文本字段中输入“xyz”。完成后,它应该看起来像下面的图像。单击“确定”。当您返回到第一个窗口时,您将看到格式正确的 request.form 代码。遵循相同的步骤添加“@User_Password”参数。添加参数后,单击两次“确定”以返回到设计环境。
现在我们已经定义了数据集和数据集搜索参数,我们需要测试我们的结果以对用户进行身份验证或拒绝访问。为此,我们需要进行一些手动编码。我们可以使用一个简单的 if
/then
语句来测试从我们的搜索返回的记录数。如果记录数为零,则不向用户进行身份验证。否则,我们将授予对管理部分的访问权限。
<%
if ds_login.RecordCount > 0 then
FormsAuthentication.RedirectFromLoginPage("Admin", true)
else if ((Request.Form("User_Password"))) <> Nothing _
OR ((Request.Form("User_Name"))) <> Nothing
response.Write("Login failed. Please try again.")
end if
%>
如您所见,此代码非常简单。
自定义控件
现在您已经构建了应用程序,添加一些用户控件来导航应用程序可能是不错的选择。如果我们能够为设计元素实现模板,那也很不错。自定义控件是我们的解决方案。ASP.NET 控件被引用为具有属性的对象(开始感受到面向对象的模式了吗?),并且可以包含几乎任何内容:HTML、样式格式、复杂的代码。我们的自定义控件将全部由 HTML 组成。
添加控件
ASP.NET 中的控件类似于 Classic ASP 中的包含。主要区别在于控件被引用为对象,而内容包含被添加到它们出现的页面中。访问控件的语法同样是面向对象的。对象和控件具有属性。为了访问控件,我们需要做的第一件事是在页面顶部添加一个对控件的引用并描述其属性。我们通过在页面顶部添加 Register 标签来实现,如下所示:
<%@ Register TagPrefix="DotNetNews" TagName="yourtagname" Src="path/filename.ascx" %>
现在,我们所要做的就是在需要它的时候声明控件对象的实例。控件使用以下语法声明:
<DotNetNews:Security ID="yourtagname1" runat="server" />
SP.NET 控件比我们预期的要熟悉得多,有点像增强版的包含。在我们结束教程之前,我们将介绍另一种控件的用法:模板。
将自定义控件用作模板
这是到目前为止我发现的在 ASP.NET 站点上实现皮肤或模板的最佳方法。首先要做的是设计您的模板。现在,在您希望显示动态内容的位置输入 XXX。我们将使用 XXX 标记将设计模板分成两半,然后在页面运行时重新组合它们。一旦您的模板如您所愿,将其保存为常规 htm 文件,但不要关闭它。现在打开一个新文件。输入代码视图,选择并删除所有 html。在页面顶部添加 <%@ Control %> 标签,并将其保存为 /controls/front_header.ascx。
切换到我们刚才创建的模板,再次进入代码视图。找到我们之前创建的 XXX 标记。现在选择从页面顶部到底部 XXX 之前的最后一个标签的结束“>”的所有标记。将其粘贴到您刚刚创建的 /controls/front_header.ascx 文件中并保存该文件。重复该过程,并将该文件保存为 /controls/front_footer.ascx。现在,您要做的就是在您想使用这些控件的页面顶部添加注册标签,并在控件出现的地方声明控件。top.ascx、bottom.ascx 和 men_left.ascx 控件控制后端的外观和导航。
就是这样!您已经构建了您的第一个 DWMX ASP.NET 应用程序。正如您所见,用于创建 Classic ASP 应用程序的许多 UD4 功能在 DWMX 中不可用。当然,其中一部分是由于 MM 在此版本中实现 ASP.NET 支持的时间很短。我预计下一个 DreamWeaver 版本将为创建 ASP.NET 页面提供更多支持。随着 ASP.NET 越来越受欢迎,我们可以期待越来越多的 ASP.NET 扩展。目前,DWMX 是创建 ASP.NET 应用程序的优秀工具,并且有望随着时间的推移变得更好。
有用链接
这份简短的链接列表应该可以帮助您开始使用 ASP.NET。MS Web Matrix Project 软件值得下载。它包含一些有用的模板、ASP.NET 文档的链接以及类浏览器 - 对于学习 ASP.NET 类非常有帮助。
http://dnzone.com/
http://asp.net/Tutorials/quickstart.aspx
http://asp.net/webmatrix/default.aspx
http://support.microsoft.com/default.aspx?scid=fh;en-us;aspnet
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconwelcometovisualbasic.asp
[*] :与经典 ASP 不同,ASP.NET 很难通过更改连接字符串来移植到 SQL Server。大多数行为,包括数据集,都需要重新应用。
[†] :web.config 文件需要数据库的完整物理路径,即 d:\web\net news\database\data.mdb。 Server.Mappath
方法在 XML 文件中不起作用。