asp.net2.0讲解3

最新推荐文章于 2024-09-15 14:30:03 发布

布丁88

最新推荐文章于 2024-09-15 14:30:03 发布

阅读量738

点赞数

文章标签： asp.net 服务器 textbox html hyperlink xhtml

本文链接：https://blog.csdn.net/qyweiyy88/article/details/2060734

版权

3.1 静态页面设计（1）

一个设计成功的网站应该易于使用、直观而且表示清晰。开发人员的工作是确保所开发的站点不仅仅在功能上是正确的，而且以一种有意义的方式表现出来。在设计好站点的基本结构之后，就需要决定怎样呈现信息和用户界面元素。

在VWD的协助下，ASP.NET具有一些用于设计和布局页面的强大工具。回忆一下，您已经通过从VWD的工具箱中拖放控件的方式创建了一些内容很简单的页面。设计一个站点显然会涉及到多得多的拖放操作，但有些方法可以简化这个过程。

本章讨论如下内容：

● 创建和布局静态页面

● HTML和VWD中的HTML查看器

● 服务器控件和动态内容

● Design View下的配置控件

● Web控件库中可用的控件

● 向页面添加动态导航控件，让这些控件运行而无需编写任何代码

如果曾经编写过HTML代码，那么对本章中的某些内容会比较熟悉，但VWD提供的用于编写HTML的工具集相当复杂，所以还是有必要学习并体验这些工具带来的新鲜感。

3.1 静态页面设计

术语静态表示页面只是用于查看的，图3-1显示了一个示例，Internet上有很多这样的页面(想像一下只有文本、或者只有一系列图片的HTML页面)—— 开发人员并不总是需要让站点的每个页面上都包含一个用于提交信息的表单、或者响应用户的输入。依据定义，静态页面包含不会发生改变(或者至少不会频繁发生改变)的内容。假设有一个私人站点，其中有一个“About Me”页面—— 可能有时会修改这个页面的内容(例如搬家、换工作或者结婚)，但总体而言，每年最多只会修改几次。

图 3-1

静态页面让作者想起了1995年前后的Web—— 那个时候我浏览过的大多数站点都很简单、普通，为不同的布局编写HTML表格足以占用我数个下午的时间。下面是一个简单的练习—— 创建一个非常简单的页面并在HTML视图中研究这个页面的代码，查看HTML元素是怎样组织的。

启动VWD！这个练习不需要什么思考—— 只要按照每个步骤操作，同时好好体验这项技术就可以了。

(1) 首先，如果已从www.wrox.com下载了本章的基础代码，那么这些代码将会有所帮助。确保将该基础代码放置在C:/BegASPNet2/Chapters/Begin/Chapter03/Samples文件夹下。

(2) 打开VWD并从主菜单中选择Open Web Site。在弹出的对话框中，选择Chapter03文件夹并单击Open(如图3-2)所示。

图 3-2

(3) 在右边的Solution Explorer中(如图3-3所示)，右击Chapter03 site并选择Add New Item。

图 3-3

(4) 在弹出的Add New Item对话框中，选择一个名为StaticHTMLPage.htm的新HTML页面，并单击Add(如图3-4所示)。

图 3-4

(5) 切换到Design View并输入一些文本，如图3-5所示。

图 3-5

不用在意具体的文本—— 这只是一个简单的示例，没有必要将该页面在Web上发布。

(6) 接下来，从工具栏中选择Layout→Insert Table向页面添加表格。将表格设置为2行2列，如果喜欢可以设置边框和间距(padding)，如图3-6所示。

(7) 在获得表格之后，就可以在每个表格单元中添加内容了。试着在一个单元格中添加一些文本，然后从VWD窗口左边的工具箱的HTML面板中拖放一个图片标记到页面上，如图3-7所示。

图 3-6

图 3-7

在设计区中添加表格之后，可以单击屏幕底部的<table>按钮单独选中页面上的这个元素(如图3-8所示)—— 开发人员可以修改屏幕右边Properties窗口中的属性值从而改变表格的间隔和边框等属性。

图 3-8

(8) 单击屏幕底部的Source按钮并看到由VWD产生的HTML代码(如图3-9所示)。稍做修改即可为图片添加一些样式和链接。

图 3-9

(9) 为了完成这个示例，作者添加了一些文本和图片。下面的代码是页面完成后的版本，可以从www.worx.com下载到该代码—— 注意<body>标记的style属性：

This is a simple static web page with an image and some interesting

information

about some places I have been:<br />

<br />

<tr>

<td>

A church near Faja Grande, a small town on the western-most edge

of Flores - one of the 9 islands in the Azores.</td>

<td>

A view of old parts of Budapest ( Hungary ) across the Danube.</td>

</tr>

<tr>

A castle on the end of a peninsula on the shores of Lake Garda ,

Italy.</td>

Selfridges at the Bullring shopping centre - a truly remarkable piece

of architecture in Birmingham , UK.<br /></td>

</tr>

</table>

</body>

在向页面添加内容完成之后，可以按下Ctal+F5查看该页面。结果页面如图3-10所示(该图与图3-1一样)。

图 3-10

操作回顾

在学习本章的过程中，您将更加熟悉在设计窗口中添加布局元素的技术，可以在屏幕右边的Properties窗格中修改属性，或者手工修改代码。静态元素，例如本例中使用的这些(<body>标记内的简单文本框、表格以及图片)，在静态和动态页面中都可以使用，而且理解怎样添加和整合这些元素是创建动态Web应用程序的一部分。

在这个示例中，练习了怎样使用HTML进行简单的页面布局。例如，将页面上的元素放置在HTML表格中，每个表格单元中都包含了一些文本和图片：

<td>

A church near Faja Grande, a small town on the western-most edge of Flores

- one

of the 9 islands in the Azores .

</td>

这个页面的<body>标记附带了一些样式，这些样式指定了页面的颜色和文本的字体：

这些属性将应用于<body>的开标记和闭标记之间的所有元素上，也就是页面上所有可见的内容。

如果不熟悉这些内容，不必担心—— 下一小节将扼要介绍HTML，以帮助您理解这些内容。

如果对HTML不熟悉，那么需要理解下面的几个基本概念：

● HTML文件是带有一些附加括号的可阅读的文本—— 在浏览网页的时候，Ｗeb浏览器知道怎样将这些括号转换为某些看起来很有趣的格式。

● 括号内的内容称为元素(element)，但严格地说，元素通常由开标记和闭标记组成，有时在这一对标记之间会包含文本或其他HTML元素。有些元素只有一个标记。

● 元素带有属性，这些属性会向浏览器提供额外的信息，告诉浏览器在页面上应该怎样显示元素。

下面是一个简单的HTML元素：

<div id="divUserDetails"

style="

width:300px;height:100px;float:left;background:darkred;color:white">

These are my details, my favorite color, and my hobbies

</div>

在这个例子中，<div…>和</div>是描述div元素的两个标记(tag)，id=""和style=""是属性，这两个标记之间的文本是元素的内容。

● 呈现是将HTML代码转换为可视元素的过程，因此前面的代码将呈现为图3-11所示的页面。

图 3-11

表3-1包含了一些可能遇到的HTML元素。

表 3-1

元素	说明	用法示例
<img>	图片标记。这个标记将一个图片放置到页面上	<img src="myimage.gif" />
<div>	类似段落的一块文本。使用<div>标记的各种属性，可以将包含在该标记元素内的文本放置在页面上的任何位置。例如，要将两个<div>元素并排放置，可以为其中一个元素设置float:left样式，而为另一个设置float:right样式	<div style="float:left">Left-hand content here</div> <div style="float:right" >Right-hand content here</div>
<span>	用于格式化文本中的字符的标记，因此可以用<span>标记包住一句话中的一个词语，并让该标记设置为粗体字以突出该词语	<div>Some standard text with a <span style="font-weight:bold">bold</span> word in the middle</div>
<table> <tr> <td>	<table>元素中包含了行(<tr>)和列(<td>)。一般用于在页面上定位其他元素，理想情况下应只用于表格式的数据。根据可访问性原则，<div>元素应用于定位和布局，但很多站点仍然使用表格，因为它比较容易开发	<table border="1"> <tr> <td>The contents of a cell</td> </tr> </table>
<a>	锚(anchor)元素。在页面上定义一个超链接，使得开发人员同时可以指定目标内容(在属性href中)和显示给用户的文本	Some text with a <a href="page.htm"> hyperlink in it
<head> <body>	HTML页面的两个主要部分是<head>和<body>。<head>是放置<title>元素和<link>元素(附带各种元数据)的区域。<body>包含要显示的元素	<html> <head> <title>Page Title</title> </head> <body> Contents of page </body> </html>
<form> <input>	表单元素。在创建带有数据输入表单的站点时，用于将数据传送到服务器的元素必须包含在<form>元素之内。HTML的<input>元素具有多种变体；如果其type属性设置为text，那么该元素在屏幕上显示为一个文本框。如果其type属性设置为submit，它将显示为一个按钮，在单击该按钮时，表单将被提交给服务器	<form id="form1" runat="server"> <input id="Text1" type="text"/> <input id="Submit1" type="submit" value="submit"/> </form>

(续表)

元素	说明	用法示例
<title> <link>	在页面的<head>区域，<title>元素控制了在页面的标题栏显示的文本。<link>通常用于将一个CSS样式表链接到页面	<head> <title>Page Title</title> <link rel="Stylesheet" type="text/css" href="MyCss.css"/> </head>
<script>	可以包含客户端脚本(在浏览器中运行的脚本，通常用JavaScript编写，也可以用VBScript编写)，也可以包含服务器端.NET代码	<script language=" JavaScript"> alert('HelloWorld! '); </script> <script runat="server"> Protected Sub Page_Load( _ sender as Object, _ e as EventArgs) … End Sub </script>
<br/> <hr/> &nbsp	用于辅助页面布局，<br/>标记在一串文本中添加一个分隔线，&nbsp用于表示不可分割的空格字符串；因此由一个&nbsp字符分隔的两个词语(或元素)不能分别放置在两行上。<hr/>元素显示一条横跨页面的水平线	This is a string of text with a line<br/> break and a&nbspspace. <hr/> Two images sepreated by a space:<br/> <img src="1.gif"> <img src= "2.gif">

在本章的下载代码中，有一个名为SampleHTMLElements.htm的HTML示例页面，该页面包含了表3-1中的所有简单示例，如图3-12所示。

熟悉这些HTML元素对所有ASP.NET开发人员都是很必要的，不但要理解怎样使用这些元素，还要知道如何按照标准恰当地使用它们，并确保所开发的站点能让尽可能多的人访问。

编写HTML代码很容易形成无法维护的局面，因为到处都是标记和样式。很多较老的用于创建HTML页面的工具都会将开发人员精心编排的HTML代码结构打乱，按照其既定的原则修改代码。任何使用过旧版FrontPage的用户都会非常厌恶该工具的这种功能，只要在FrontPage中打开一个HTML页面再关闭，该页面的代码就会被永久地修改！幸运的是，VWD是作者使用过的HTML编辑器中最好的一个。

也许保持代码整齐和易于维护的最佳方法是坚持一个普遍的标准。在介绍XHTML时将引入Web开发中的更多原则，遵守这些规则是提高技术的一种非常好的方法。

图 3-12

从HTML到XHTML代码

虽然大多数人都谈论HTML代码，事实上如果编写出色的HTML代码，其实就是在编写XHTML。XHTML是一组规则，如果按照这些规则编写HTML代码，那么所编写的代码将能够更好地与各种标准兼容，从而使得页面可以在多种不同的客户端浏览器上显示。

XHTML规则的核心内容如下：

● 总是使用闭标记(因此对每个段落总是同时使用<p>和</p>)或使用自闭标记(例如用<br/>代替<br>)。

● 标记和属性的名称必须小写(因此<div id="myDiv"是可以接受的，但<Div ID="myDiv"就不是)，因为XHTML是区分大小写的(因此<div>、<Div>和<DIV>在XHTML中是不同的实体)。

● 属性值必须包含在双引号内。

这只是XHTML的简单总结；如果希望更多地了解这些规则，应该参考W3站点www.w3.org/TR/xhtml1/，这里介绍了XHTML的所有标准。该页面的第4部分专门介绍了XHTML与标准HTML之间的差异。

实质上，XHTML的目标是同时为Web开发人员和浏览器开发人员提供一组普遍的规则。随着类似Firefox这样更新的Ｗeb浏览器开始抢占Microsoft Internet Explorer的生存空间，很重要的一点就是所有开发商在未来的产品开发计划中都要遵循XHTML规则，从而避免开发出来的站点在Internet Explorer上工作得很好，而在Netscape上看起来却非常丑陋这种老问题的出现。

将XHTML作为Web标准语言的转变过程是逐步完成的，而且很可能永远不能完全实现转变(很多浏览器在未来很长一段时间内都会支持较老的标记，以便保持向后兼容性)，但如果现在按照XHTML的规则编写站点，那么以后的维护工作将会简单得多。在Internet Explorer或Firefox的下一个版本出现的时候，这样的站点出现问题的机会最小。

Visual Web Developer有一个强大的功能可帮助开发与各种标准兼容的网站。如果在VWD中打开SampleHTMLElements.htm，将注意到在页面的上方有一个工具栏(如图3-13所示)，该工具栏上将Internet Explorer 6.0设置为网页的目标浏览器。

图 3-13

如果修改选择，使页面以XHTML1.1标准为目标，则将看到很多代码都会被加上红色的波浪式下划线，如图3-14所示。

图 3-14

在图3-14中以高亮方式表示的错误表明<br / >标记应该只出现在块元素内，例如一个<div>内部。如果将页面的第一部分放置到一个<div>元素中，则这个错误就不存在了，而页面的外观不会发生任何变化：

<div>

<div style="float:left">Left-hand content here</div>

<div style="float:right">Right-hand content here</div>

<br />

</div>

ASP.NET自动产生的所有代码都遵循XHTML的规则。到目前为止您还没有创建过动态内容，那就让我们看看如何创建更令人兴奋的页面吧。

为了从HTML的静态世界转移到ASP.NET的动态世界，很重要的一点是要知道动态内容是什么意思。

在单击网页表单中的按钮时，用户希望能发生一定的动作—— 大多数时候(如果页面的代码编写正确)，确实会有动作发生。用户可能会通过单击一个按钮提交订单购买一些CD。用户还可能从页面的菜单中选择某项内容—— 例如，单击Wrox United站点中的某个菜单项。单击该菜单将使其内容弹出来(如图3-15所示)，可以选择这些内容，就像单击Windows的开始(Start)按钮一样。

可以注意到，单击这个菜单和单击另一个不同的菜单之间没有延迟—— 页面的反应就像自己的系统一样。浏览器在显示这些菜单的内容时确实执行了一些本地代码。单击页面表单上的按钮或链接可能会需要更长的时间才能响应。单击页面上的按钮、超链接或其他类似的元素都将使得浏览器开始和服务器进行通信、请求某些内容或发送一些数据。

图 3-15

动态客户端代码和动态服务器代码

将鼠标放在Wrox United站点的菜单上会运行一些代码，这些代码很可能是用JavaScript编写的，大多数浏览器都能理解和运行这种编程语言，它用于向用户输入提供快速的响应。页面不会闪动和刷新(与单击超链接不同)，因为当用户将鼠标停留在菜单上时，浏览器已经知道要显示的是什么内容了。这是一个动态客户端代码的例子。

如果请求一个复杂得多的响应(例如，在购物站点上提交一份订单或者在购物站点上搜索某个特定的商品)，页面会将信息提交回Web服务器处理。在服务器上完成处理的代码就是动态服务器代码，也是您在阅读本书的过程中将要学习编写的代码。

可以使用多种不同的语言编写服务器端代码，而不仅仅是ASP.NET中的VB.NET、C#或其他.NET语言。您可能已经听说过PHP和JSP(Java Server Pages)—— 开发人员也使用这两种语言编写服务器端代码。每种语言都有它的优点和不足，但要找到一种和ASP.NET一样易于使用和功能强大的服务器端技术是非常困难的。

当说到在ASP.NET中创建动态页面时，最快的方法就是将服务器端控件拖放到页面上、设置这些控件的属性、最后编写代码定制它们的功能。ASP.NET的最新版本对拖放结构进行了很大的改善，使得可以不用编写任何代码就可以创建整个站点的结构性架构。

在查看Visual Web Developer的工具箱时，可以看到几个不同的区域，每个区域都包含了一组不同的工具。其中很多工具都是服务器控件，在开发ASP.NET应用程序时，会用到这些控件。

在ASP.NET页面上，服务器控件表现为一个标记；例如<asp:textbox…/>。这些标记不是标准的HTML元素，因此如果它们出现在网页上，浏览器将无法理解它们，然而，当从Web服务器上请求一个ASP.NET页面时，这些标记都将动态地转换为HTML元素，因此浏览器只会接收到它能理解的HTML内容。

这一节首先查看一些可以使用的控件的类型，然后讨论它们如何工作。

3.4.1 服务器控件工具箱

工具箱中的服务器控件分组多得让人难以区分。开发人员不仅可以选择标准的网页元素(例如单选按钮、超链接和下拉列表框等)，还可以选择其他类型的控件(如图3-16所示)，这些类型包含了更多可用的控件。根据所编辑的页面类型，工具箱的外观将发生变化，图3-16是在创建ASP.NET页面时的标准外观。

图 3-16

可用的控件类型包括：

● Standard：常用控件，网页上90%的元素都来自于这个类型。

● Data：用于连接数据源(数据库或XML文件)的控件。

● Validation：可添加到网页上验证用户输入的控件(例如，确保特定的文本框中包含了数据，或者输入的数据格式必须正确)。

● Navigation：为站点提供简单而快速的导航方案的控件(例如，超链接的动态菜单和breadcrumb)。

● Login：一组控件，用于简化从一个完全开放的站点转移到具有个人特色的站点。

● WebParts：用于简化创建Sharepoint风格的站点，这种站点带有可以拖放的区域，称为Web Part，使得用户可以重新安排站点的外观。

● HTML：简单的HTML元素。

在本书的后续章节中，将了解到每种类型的多个控件。在本章的后面，您可以在为Wrox United站点创建菜单时用到一些导航控件。

3.4.2 服务器控件

让我们从第一条规则开始—— 在创建一个简单的HTML页面并将其保存到本地文件系统中时，双击该文件就可以在浏览器中查看它。如果只是搭建一个静态的HTML站点并希望测试输出，这样做是可以的，但是在开发网站时，无法要求用户先下载网页然后再查看！这就是为什么网站在部署之后，必须上载到Web服务器的原因，每个人都可以通过它的URL(Uniform Resource Locator，统一资源定位符)进行访问。

既然站点部署到Web服务器上，人们就可以从其他机器访问这个站点，浏览各个HTML页面。然而，如果服务器上安装了所需的软件，那么就可以提供更多的功能，而不仅仅是静态HTML页面。在请求HTML页面时，服务器找到对应的文件并将其发送给用户；而在请求ASP.NET页面时(扩展名为.aspx的页面)，服务器将在文件系统中找到并读取对应的页面，然后执行某些处理，再将结果页面发送给用户。“执行某些处理”就是ASP.NET的功能所在。

服务器执行的额外处理包括读取ASP.NET页面并将页面上的服务器控件转换为浏览器可以理解的HTML。记住，浏览器无法理解ASP.NET。Web浏览器只理解HTML，可能也理解JavaScript—— 但它不能处理ASP.NET代码。服务器读取ASP.NET代码并进行处理，将所有ASP.NET特有的内容转换为HTML以及(如果浏览器支持的话)一些JavaScript代码，然后将最新生成的HTML发送回浏览器。

将ASP.NET代码转换为HTML的过程就是服务器控件怎样工作的过程；在开发源.aspx页面时，可以将任意的服务器控件放置到页面上，然而从服务器请求该页面的浏览器将只会接收到HTML和JavaScript(如图3-17所示)。这是一个必须理解的关键概念，服务器所执行的处理过程将在第6章详细讨论。

图 3-17

下面用一个简单的示例帮助您理解这个概念。这个“试一试”是一个非常简单的示例，它将演示ASP.NET代码和HTML代码的区别。

(1) 再次打开Chapters03站点。

(2) 右击站点的根目录并选择Add New Item。

(3) 在弹出的对话框内(如图3-18所示)，选择Web Form，将页面命名为ServerControls.aspx，从下拉列表中选择喜欢的语言，同时两个复选框都不要选中。

图 3-18

(4) 如果没有处于Design View中，则确保切换到这个模式并从屏幕左边工具箱的Standard区域双击TextBox控件(如图3-19所示)向页面添加文本框。

(5) 这就可以查看这个页面了，单击工具栏上的运行按钮(绿色的箭头，将鼠标放在该按钮上时会显示提示Start Debugging)。

浏览器将启动并显示该页面。如图3-20所示。

图 3-19

图 3-20

注意在地址栏内显示的数字(在localhost后面)是一个随机数，每回第一次开始调试时这个数字都会变化。

操作回顾

在这个示例中，仅仅向一个ASP.NET页面添加了一个服务器控件并在浏览器中查看该页面。这并不是一个非常有趣的示例，但本例的重点是观测服务器端代码是怎么转换为客户端代码的。

首先，单击浏览器的View菜单并选择View Source—— 应该看到在Notepad内显示的代码，如图3-21所示。

这是客户端代码—— 呈现的页面输出。将该代码与最初的代码比较；切换回VWD并单击Source View查看该页面的代码(如图3-22所示)。

图 3-21

图 3-22

需要注意的代码是描述服务器控件的代码，该控件的ID是TextBox1。这些代码如下所示，这是它们在页面的源代码中的样子：

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</div>

在呈现的源代码中，对等的代码是：

<div>

</div>

注意最初的TextBox1控件已从ASP.NET控件转换为HTML元素。服务器接收到关于该页面的请求，并从源请求中知道浏览器能够理解HTML，因此服务器将控件转换为HTML版本并与页面的其他部分一起发送回浏览器。浏览器完成剩余的动作，将HTML代码转换成可以浏览的网页。

3.4.3 VWD的Source View

Visual Web Developer在创建和编辑页面的时候主要有两种模式。在前面的示例中刚使用过Design View，在本书中我们也将(在可能的情况下)专注于Design View以减少输入的代码量。然而，Source View在手动编辑页面和修改细微的问题时非常有用，因此现在有必要研究一下这种模式，并熟悉它的功能。在下面的示例中，我们将向页面添加另一个控件；但是这一次是在Source View内完成添加。

(1) 回到VWD并确保位于ServerControls.aspx页面的Source View中(单击窗口底部的Design和Source按钮在两种模式之间进行切换)。在代码中，紧接着前一个示例中表示TextBox控件的代码后面单击鼠标。

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</div>

(2) 在Source View中添加服务器控件时有两个选择；可以手动输入代码，或者从工具箱中拖放控件，类似于在Design View中使用的技术。首先以比较难的方式完成—— 开始输入如下代码：

<asp:Image

其实在单词Image的输入完成之前，就可以看到一些有用的提示信息，如图3-23所示，这个提示会试图猜测开发人员希望输入的是什么。

这是VWD和Visual Studio的一个功能，称为IntelliSense，设计它用于减轻开发人员的工作。要接受一个建议，可以使用方向键滚动到所需的内容并按下Tab、Space或者Enter，或用鼠标单击所需的内容。要强制显示任何相关的IntelliSense，按下Ctrl+Space将相应的内容弹出来。

图 3-23

(3) 继续输入如下代码：

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Image ID="MyImage" runat="server" ImageUrl="~/azoreschurch.jpg"

</div>

注意当输入ImageUrl属性的时候，VWD将显示一个本地图片列表供开发人员选择(如图3-24所示)。

图 3-24

(4) 再向页面添加一个控件；这一次，使用双击的技术进行添加。在</div>后面添加一个空行，将光标放置在该行，然后双击工具箱中的Hyperlink控件(如图3-25所示)将其添加到页面。

图 3-25

(5) 在页面能够成功运行之前，必须先编辑这个控件，因此将光标放置在Hyperlink定义内的任意位置上，然后将注意力转移到屏幕右边的Properties面板上(如果该面板没有显示出来，如图3-25所示，则需要将鼠标放置到屏幕右边的Properties选项卡上使Properties面板弹出来，或者选择View→Properties Window弹出该窗口)。注意到在属性列表的底部有一个名为NavigateUrl的属性—— 输入http://www.wroxunited.net作为属性值并按下Enter。看一看图3-26，注意到在超链接的标记内出现了一个新属性NavigateUrl以及为它输入的值。

(6) 现在，为何不切换到Design View看看页面是什么样子—— 注意到3个控件位于同一行上。如果希望将它们安排在不同的行上，只需切换到Source View并在每个控件的后面输入<br / >，从而添加一个HTML换行符。您还可能希望修改超链接控件显示的内容(在</asp:HyperLink>闭标记之前的文本)。

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

<asp:Image ID="MyImage" runat="server" ImageUrl="~/azoreschurch.jpg"

/><br />

<asp:HyperLink ID="HyperLink1" runat= "server"

NavigateUrl="www.wroxunited.net">Visit Wrox United Online!

</asp:HyperLink>

</div>

</form>

</body>

图 3-26

请注意屏幕底部Design和Source按钮右边的工具条；包含光标当前所在位置的元素将以橙色高亮显示出来(如图3-26所示)。无论何时，只要在Design或Source View中选择了不同的元素，这个工具条上显示的元素层次结构都将发生相应的改变。

(7) 现在再次运行该页面并观察结果，如图3-27所示。

操作回顾

在这个示例中，进一步熟悉了页面设计的拖放方法，同时熟悉了在Source View中手动编写页面的技术。应该已经注意到，VWD在不同的阶段有很多功能帮助开发人员创建页面。

下面逐步解释在VWD中创建的代码。页面的主要内容包含在一个<div>控件内，其中是三个添加到该页面的控件：

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

<asp:Image ID="MyImage" runat="server" ImageUrl="~/azoreschurch.jpg"

/><br />

<asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl="www.wroxunited.net">Visit Wrox United Online!

</asp:HyperLink>

</div>

图 3-27

现在看一看呈现的代码—— 在浏览器中打开该页面时，选择View→Source菜单，查看<div>的内容是如何变化的：

<div>

<img id="MyImage" src="azoreschurch.jpg" style="border-width:0px; " /><br

<a id="HyperLink1" href="www.wroxunited.net">Visit Wrox United

Online!</a>

</div>

Web浏览器对ASP.NET服务器控件一无所知，因此当有浏览器请求该页面时，ASP.NET处理器将介入进来并将服务器端元素转换为浏览器能接受的简单HTML。TextBox控件直接映射为HTML的<input>元素。Image控件转换为<img>元素，但请注意IamgeUrl属性是怎样转换为src属性的：

ImageUrl="~/azoreschurch.jpg"

ImageUrl属性中的文件的名称(或者说图片的URL)转换到src属性中。如果该文件是项目的本地文件，那么在服务器端应为文件名加上前缀~/。

src="azoreschurch.jpg"

HyperLink控件也转换为对应的HTML元素，同时该控件的NavigateUrl属性转换为<a>标记的href属性。

在这个简单的示例中，在使用服务器控件代替手动编写的HTML代码时并没有深入学习什么内容，但记住这是一个纯粹的静态页面。如果希望响应用户的输入、对事件做出反应或者从数据库获取数据，那就需要编写服务器端代码。服务器控件使得在服务器上处理可视的元素成为可能。

很多ASP.NET服务器控件都对应于HTML的元素，所以就存在文本框、按钮、超链接和下拉列表框等服务器控件。这些控件和它们的最终显示形式看起来是一样的，但是前者的功能要多得多。每个控件都有一组通用的属性(例如，它们都拥有ID属性，而诸如文本框、标签等控件都拥有Text属性)，这使得在代码中处理这些控件时比较容易。本章前面已经列出控件的不同类型，在浏览可以添加到站点的服务器控件时可以专注于其中最常用的控件。

3.5.1 标准控件

这些控件是在使用Windows应用程序时遇到的各种工具的Web对等物。包含这些控件的网页和标准应用程序给我们的感觉很相似，所以在页面中添加这些控件的过程非常容易。下面是一些最常用的控件：

● TextBox控件：用于在页面上输入文本，常见于购物站点的订单表格，或站点的登录页面。

● Button控件：从提交订单到修改站点的个人设置，单击页面上的按钮通常会促使信息传递到服务器，而服务器会对这些信息做出反应并显示一个结果。

● Label控件：用于在页面的特定位置显示简单的文本。使用Label控件可以根据用户的交互容易地修改页面某个部分的文本。

● Hyperlink控件：用于在页面上提供超链接功能，这个功能允许导航到站点的其他页面，或者导航到Internet上的其他资源。

● Image控件：用于在页面上显示图片。根据用户的输入，服务器可以修改在控件中显示的具体图片。

● DropDown List控件：用于向用户提供一个可选择的选项列表；该列表在没有使用时会折叠起来以节省空间。

● Listbox控件：用于提供一个大小固定的选项列表。

● CheckBox和Radio Button控件：用于选择可选的附加信息，具体形式分别是yes/no和“多选一”。

图3-28显示了ASP.NET Web Site Administration Tool画面，在下一章将学习使用该工具管理用户账户。在这个画面中能够看到很多上面介绍的控件。

图 3-28

页面上的Search by：标签很可能是一个Label控件，接下来是一个DropDownList控件。for：标签后面是一个TextBox控件，再后面是一个Button控件。在每个用户名的前面都有一个CheckBox控件，用于选择用户，还有一些HyperLink控件用于管理用户账户。在下一章中，您对这个配置应用程序将会非常熟悉，它是在一个页面上有多种控件的经典示例。

3.5.2 HTML控件

在创建站点时，有时对某个控件在服务器端不需要做任何处理。在这种情况下，开发人员可能只想在页面上添加静态的HTML控件；例如，仅仅在页面上放置一些元素以便为元素的分组提供容器。工具箱的HTML面板上包含了大多数最常用的HTML元素的拖放版本。如果浏览工具箱上的这个区域(如图3-29所示)，将看到诸如Input(Text)文本框、Table控件以及Div等客户端的HTML元素。

工具栏中的这些控件只是向页面添加HTML元素的一种简便的方法，可以使用的控件并不局限于这些元素。在Source View中，开发人员可以添加任意合法的HTML元素；例如，用于超链接的锚标记<a>，或者用于突出显示页面某个部分文本的<span>标记。

诸如Table和Div这样的控件是容器，因此在它们的定义内可以包含其他控件。例如，在Table控件中，可以在每个表格单元内嵌入不同的控件。在Div控件内也可以放置很多不同的元素和控件。可以将服务器端控件嵌入到类似这种用于布局页面的静态的、非服务器的HTML元素内。

图 3-29

1. 将HTML控件用作Server控件

可以将任何HTML元素转换为服务器控件，只要为该元素添加runat=“server”属性即可。如将在第6章看到的那样，当页面提交到服务器的时候，可以使用代码动态地处理任何服务器控件(由HTML元素转换而来的或ASP.NET的)。例如，在向页面添加了一个ASP.NET TextBox控件之后，可以使用在服务器上运行的代码设置该控件文本区显示的值。然而，一旦为某个元素添加了runat=“server”属性(并为其指定一个惟一的ID)，例如一个div元素，接下来就可以使用运行在服务器上的代码动态地指定这个div要显示什么、以及应将它放置在什么位置。

另外，因为可以向任意HTML元素添加runat=“server”属性，所以如果喜欢，可以使用Input type=“text”控件代替ASP.NET的TextBox控件—— 其他HTML元素只要在ASP.NET工具箱中有对应的控件都可以这样使用。

2. 应该使用HTML控件还是ASP.NET服务器控件

这个问题实际上只与页面上简单的元素有关，例如文本框、按钮和表格等。复杂的服务器控件，例如Calendar控件，用户加速站点的开发速度，因此这种情况下不用考虑具体使用哪种控件。在选择向页面添加哪种类型的控件时，绝大多数开发人员的方法是在页面上主要使用ASP.NET的Standard Server Control，而在布局时使用静态HTML元素。

虽然在大多数情况下都可以这样做(而且确实在有些情况下需要使用服务器控件才能获得HTML控件无法提供的功能)，但也有例外的情况。例如，向HTML div和table元素添加runat=“server”是作者通常使用的一种技术，如果我知道我希望根据用户的输入显示或隐藏页面的某部分，就可以把需要在服务器上处理的元素转换为服务器控件，然后动态地控制它们的可视性。虽然使用标准的服务器控件也很容易创建具有相同功能的站点，但我所在的工作小组只使用简单的HTML元素进行布局，因此有时将某些HTML元素转换为服务器控件比重写代码使用ASP.NET内建的服务器控件要容易一些。在这个问题上没有真正的对与错，所以应该根据自己的判断进行选择，但应该注意到，可能会遇到使用其他方法编写的代码，这些方法仍然是有效可行的。

3.5.3 导航控件

有三个创意新颖的控件用于站点的导航，使用它们只需要很少的工作就可以实现丰富的功能。与使用旧版ASP.NET开发人员的情况相比，这是一个非常大的改进—— 以前在任务列表中每一项都需要耗费开发人员数小时的工作现在只需要数秒钟的时间！Menu、TreeBiew和SiteMapPath控件是ASP.NET 2.0的新控件，它们的使用快捷而简单。下面将逐个查看这些控件；在本节后面将向Wrox United站点添加这些控件。

1. SiteMapPath控件

这个控件用于为站点添加breadcrumb功能，帮助用户查看位于站点中的什么层次结构。Wrox United站点演示了这个功能，如图3-30所示。

图 3-30

术语breadcrumb很可能来源于一个古老的童话Hansel and Gretel—— 两个孩子到深林中探险，他们在身后留下一串面包碎屑以便能找到回家的路。当用户单击浏览站点的页面时，可能会移动到不同的区域或子区域，直到经由数个链接深入到应用程序内部。breadcrumb可以帮助用户返回到浏览路径上的某个点，而不用依赖于浏览器的返回按钮。您可能遇到过这样的情况，使用返回按钮无法返回某个链接—— 相当于乌鸦吃掉了留在地上的面包屑。有些页面以一种独特的方式向服务器提交信息，如果不再次提交信息将无法返回这个页面。

Internet上的很多站点都提供breadcrumb功能。Wrox United就是一个，如图3-30所示。然而，为了向站点添加其中某个控件，必须首先创建Web.SiteMap文件。已经有这个文件啦？是的！(如果没有，需要返回到第2章学习怎样创建该文件！)

在创建Web.SiteMap文件之后，添加SiteMapPath控件并查看结果就很容易了—— 所需做的就是在页面上添加该控件。要在Wrox United站点中添加这个控件，最好是把它添加到Master页面，这样所有的Content页面都同时获得了导航的功能！

在下一个“试一试”中，需要使用Wrox United应用程序的Chapter03版本(保存在下载代码的Chapter03文件夹内，名称是WroxUnited)。作者已经修改了这个版本，从而使您可以完成这些练习。

如果打开第3章的WroxUnited应用程序，将会看到如图3-31所示的画面。如果所看到的画面与该图不同，不用担心—— VWD在显示使用CSS的页面时有些问题，所以不用滚动就可以看到大部分网页。

虽然这个站点看起来很正常，但缺少两样东西：页面左边的链接和页面底部的breadcrumb。在下面的试一试中，将为站点添加这两项内容，并查看添加导航功能是多么简单。

图 3-31

(1) 打开第3章的Wrox United应用程序(C:/BegASPNET2/Chapters/Begin/ Chapter03/WroxUnited)并打开site.master文件。确保位于Design View中。

(2) 将光标放置在页面底部的Breadcrumbs div内部—— 它是页面右下方的红色物体。当在窗口右下方看到<div#breadcrumbs>以高亮显示时，表示找到了正确的控件，如图3-32所示。

图 3-32

(3) 现在从工具箱的Navigation区将SiteMapPath控件拖放到Breadcrumbs div内(如图3-33)所示。

图 3-33

(4) 忽略该控件的Common Task菜单—— 这里只需要修改控件的名称。确保选中SiteMapPath控件并在Properties面板中将其ID修改为crumbs。注意在图3-34中鼠标光标高亮显示该控件的ID属性。

(5) 现在再次启动Default.aspx页面运行站点并查看位于页面底部的工作结果，如图3-35所示。注意作者浏览器中的URL是http://localhost:1621/WroxUnited/default.aspx。您的端口号(冒号后面的数字)可能会与此不同。

(6) 将URL的Default.aspx部分修改为History.aspx以浏览History页面。图3-36显示了页面底部呈现的SiteMapPath控件是如何变化的。

图 3-34

图 3-35

图 3-36

操作回顾

在这个例子中，将向一个修改过的Wrox United站点中添加了一个SiteMapPath控件，从而可以向用户反馈正在查看的是哪个页面，以及这个页面在站点中位于哪个层次结构。只要向页面添加这个控件就可以获得该功能，因为在应用程序文件中已经包含了一个Web.SiteMap文件。

SiteMapPath控件会挂钩到Web.SiteMap文件(如果存在的话)并通过计算用户正在查看的页面、以及该页面在站点地图中所处的节点顺序动态解释这个文件的内容。下面是与您查看的节点相关的Web.SiteMap代码。

<siteMapNode title="Home" url="Default.aspx"

description="Wrox United Home Page">

...

<siteMapNode title="About" description="About the club" url="

about.aspx">

<siteMapNode title="History" url="History.aspx"

description="The history of the club" />

注意History节点位于About节点的内部，而About节点又位于Home节点的内部，所以当用户查看History页面的时候，可以看到该页面位于About页面的后面，而根节点是Home节点—— 这就是在SiteMapPath控件上看到的具体内容：

Home > About > History

如果导航到层次结构的其他部分(到Match Fixtures、Future Fixtures或Past Fixtures页面)，SiteMapPath控件上显示的内容将相应地发生变化。因此，导航到Fixtures.aspx?type=future页面时该控件上显示的内容是：

Home > Fixtures > Future Fixtures

下面的代码显示了SiteMapPath控件是怎样添加到页面的：

<asp:SiteMapPath ID="crumbs" runat="server">

</asp:SiteMapPath>

</div>

不用对控件进行任何定制(不需要设置任何特定的属性)，就可以显示Web.SiteMap中的节点。该控件所使用的样式完全由页面的样式表控制(第5章讨论页面的样式)。

2. SiteMapPath控件的属性

在前面的“试一试”练习中，添加了一个SiteMapPath控件，没有进行任何修改该控件就可以显示Web.SiteMap文件中列出的节点。如果希望修改它以限制显示的层次数，就可以以不同的方式使用该控件；例如，可以将当前页面的名称显示为一个标题：

<asp:SiteMapPath ID="PageTitle" Runat="server" ParentLevelsDisplayed="

0">

</asp:SiteMapPath>

因此，在进行以上修改之后，站点地图节点将只显示当前页面的名称；以History.aspx页面为例，SiteMapNode控件将只显示History。

另一个可以修改的内容是修改路径分隔符字符，例如：

<asp:SiteMapPath ID="crumbs" runat="server" PathSeparator=" : ">

</asp:SiteMapPath>

如果再次导航到History.aspx页面，用户将看到以下内容：

Home : About : History

除了这两个属性之外，开发人员还可以设置其他很多属性以定制这个控件。表3-2列出了其中一些属性。

表 3-2

属性	说明	选项(粗体表示默认值)
RenderCurrentNodeAsLink	指定是否可以单击活动节点，或者是否以普通文本显示当前节点	True/False
PathDirection	设置节点出现的顺序是由根节点到当前节点(从左到右)还是反过来	RootToCurrent/CurrentToRoot
PathSeparator	设置所使用的节点之间的分隔符	>，任意ASCII字符

在学习了SiteMapPath控件的工作原理之后，我们将继续学习其他两个导航控件：Menu控件和TreeView控件。然而，要在页面上使用这两个控件，需要添加一个不同类型的控件为它们提供数据；该控件是SiteMapDataSource。

3. SiteMapDataSource控件

这个控件是非可视的控件，它用于以一种Menu和TreeView控件能够理解的方式处理定义在Web.SiteMap文件中的节点，从而可以修改这些控件将要显示的内容。

要在站点中添加这个控件，只需拖动一个副本到页面上。这就是所有的操作。VWD产生的代码在Source View中如下所示：

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

在下一个“试一试”练习中，将自行添加这个控件以便可以使用Menu控件。Menu控件用于为Wrox United站点提供导航的功能，从而不必输入链接；让我们看一看这是怎样和SiteMapDataSource控件联系在一起的。

4. Menu控件

Menu控件提供静态和动态混合的菜单功能。在向页面添加这个控件的时候，开发人员可以选择将它设置为一个完全动态的菜单，以便整个站点的导航结构都可以显示在菜单中，类似于Windows的Start菜单。另一种选择是，可以采取一种更传统的方法，可使用固定菜单，或者使用混合这两种功能的方法。动态菜单使用由ASP.NET产生的客户端JavaScript代码(同样，不需要开发人员输入任何代码)。

为了向站点添加Menu控件，首先必须添加SiteMapDataSource控件，这个控件指定了菜单可以显示的链接以及这些链接出现的顺序。在下面的“试一试”中，将在一个基于WroxUnited应用程序的示例中添加这两个控件。

(1) 打开Site.Master文件并切换到Design View。将光标放在页面左边的nav div中，如图3-37所示。

(2) 在将一个SiteMapDataSource控件(图3-38和3-39都高亮显示这个控件)拖放到nav div内的页面上(该控件位于工具箱的Data面板上)，并在属性窗口中将该控件命名为siteData。

所有的铺垫工作已经完成—— 接下来，将添加Menu控件本身。

图 3-37

图 3-38

(3) 将Menu控件拖放到紧靠SiteMapDataSource控件右边缘的地方。您将看到一个弹出的对话框，如图3-39所示—— 这是Smart Tasks窗口。

在这个对话框中，选择在第3步中创建的siteData数据源。在完成该设置之后，菜单将变为如图3-40所示。

图 3-39

图 3-40

(4) 单击菜单右上角的小箭头关闭该菜单。现在，选中Menu控件并在属性窗口中将它的StaticDisplayLevels属性设置为2。您将会立即看到变化，如图3-41所示。

(5) 在该控件能以在完整版本的Wrox United站点中的方式工作之前，需要设置它的一些属性值。切换到Source View并在代码中添加如下属性：

<asp:Menu ID="Menu1" runat="server" DataSourceID="siteData"

StaticDisplayLevels="2"

orientation="Vertical"

StaticSubMenuIndent="0"

disappearafter="200"

AccessKey="m"

EnableViewState="false">

</asp:Menu>

图 3-41

(6) 现在再次运行站点(按下Ctrl+F5不带调试功能启动站点)，将看到如图3-42所示的画面。

图 3-42

注意可以将鼠标光标停留在About链接上，片刻之后一个包括History页面的子菜单将显示出来。这就是动态菜单的最佳形式—— 很不错吧！

操作回顾

添加到Master页面的Menu控件将读取SiteMapDataSource控件(siteData)的内容并根据保存在该数据源中的数据显示一组链接。SiteMapDataSource控件本身不需要任何修改(除了重新命名以外)—— 默认情况下，SiteMapDataSource将读取Web.SiteMap文件并扮演Menu控件的中间人，以使它能够根据Web.SiteMap文件的内容显示链接。

如果需要，可以使用表3-3所示的属性定制SiteMapDataSource。

表 3-3

属性	值	结果
EnableViewSatae	True/False	指定SiteMapDataSource控件在回传(postback)的时候是否保留数据
ShowStartingNode	True/False	指定在依赖于该数据源的控件上是否显示根节点
SiteMapProvider	任何合法的提供程序	可用于指定一个自定义数据提供程序(例如，如果站点地图数据存储在一个完全不同的结构之中，如.csv文件或数据库，而不是Web.SiteMap文件中，那么就必须设置这个属性)
StartFromCurrentNode	True/False	如果设置为true，那么只有当前节点(活动页面)的子链接而不是整个层次结构会显示出来
StartingNodeOffset	整数值	用于指定从哪个层次结构开始显示。如果希望Menu控件只显示子链接，而不是整个站点的完整结构，那么这个属性会有用。如果在Wrox United站点中将该属性的值设置为1，那么菜单将忽略第一级菜单项，而只显示下面的一个层次结构，因此，在Wrox United的层次结构中，这将显示Future and Past Fixtures、History、News以及类似的链接
StartingNodeUrl	在Web.SiteMap文件中定义的表示页面URL的字符串	用于指定一个启动层次结构的不同位置。

将菜单绑定到SiteMapDataSource控件是从Web.SiteMap数据文件创建链接层次结构的一种简便方法，但使用这个控件还可以完成更多的事情，包括绑定到完全不同的数据源，将控件(除Menu控件以外)与数据相结合。如果必须经常处理以完全不同的格式(Web.SiteMap以外的格式)存储的站点地图数据，那么为了利用SiteMapDataSource控件，必须对SiteMapProvider类进行自定义。创建自定义的数据提供程序是一个相当复杂的过程(这已超出本章的讨论范围)，要获得关于该过程的更多信息，可以参考由Bill Evjen编写、Wrox出版社出版的Professional ASP.NET 2.0。