ASPNET 20入门经典3.doc

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) 首先，如果已从下载了本章的基础代码，那么这些代码将会有所帮助。确保将该基础代码放置在C:BegASPNet2ChaptersBeginChapter03Samples文件夹下。(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) 接下来，从工具栏中选择LayoutInsert Table向页面添加表格。将表格设置为2行2列，如果喜欢可以设置边框和间距(padding)，如图3-6所示。(7) 在获得表格之后，就可以在每个表格单元中添加内容了。试着在一个单元格中添加一些文本，然后从VWD窗口左边的工具箱的HTML面板中拖放一个图片标记到页面上，如图3-7所示。图 3-6 图 3-7在设计区中添加表格之后，可以单击屏幕底部的按钮单独选中页面上的这个元素(如图3-8所示) 开发人员可以修改屏幕右边Properties窗口中的属性值从而改变表格的间隔和边框等属性。图 3-8 (8) 单击屏幕底部的Source按钮并看到由VWD产生的HTML代码(如图3-9所示)。稍做修改即可为图片添加一些样式和链接。图 3-9(9) 为了完成这个示例，作者添加了一些文本和图片。下面的代码是页面完成后的版本，可以从下载到该代码 注意标记的style属性：This is a simple static web page with an image and some interesting informationabout some places I have been:A church near Faja Grande, a small town on the western-most edgeof Flores - one of the 9 islands in the Azores.A view of old parts of Budapest (Hungary) across the Danube.A castle on the end of a peninsula on the shores of Lake Garda, Italy.Selfridges at the Bullring shopping centre - a truly remarkable piece of architecture in Birmingham, UK.在向页面添加内容完成之后，可以按下Ctal+F5查看该页面。结果页面如图3-10所示(该图与图3-1一样)。图 3-10 操作回顾在学习本章的过程中，您将更加熟悉在设计窗口中添加布局元素的技术，可以在屏幕右边的Properties窗格中修改属性，或者手工修改代码。静态元素，例如本例中使用的这些(标记内的简单文本框、表格以及图片)，在静态和动态页面中都可以使用，而且理解怎样添加和整合这些元素是创建动态Web应用程序的一部分。在这个示例中，练习了怎样使用HTML进行简单的页面布局。例如，将页面上的元素放置在HTML表格中，每个表格单元中都包含了一些文本和图片：A church near Faja Grande, a small town on the western-most edge of Flores - oneof the 9 islands in the Azores.这个页面的标记附带了一些样式，这些样式指定了页面的颜色和文本的字体：这些属性将应用于的开标记和闭标记之间的所有元素上，也就是页面上所有可见的内容。如果不熟悉这些内容，不必担心 下一小节将扼要介绍HTML，以帮助您理解这些内容。如果对HTML不熟悉，那么需要理解下面的几个基本概念： HTML文件是带有一些附加括号的可阅读的文本 在浏览网页的时候，eb浏览器知道怎样将这些括号转换为某些看起来很有趣的格式。 括号内的内容称为元素(element)，但严格地说，元素通常由开标记和闭标记组成，有时在这一对标记之间会包含文本或其他HTML元素。有些元素只有一个标记。 元素带有属性，这些属性会向浏览器提供额外的信息，告诉浏览器在页面上应该怎样显示元素。下面是一个简单的HTML元素：These are my details, my favorite color, and my hobbies在这个例子中，和是描述div元素的两个标记(tag)，id=和style=是属性，这两个标记之间的文本是元素的内容。 呈现是将HTML代码转换为可视元素的过程，因此前面的代码将呈现为图3-11所示的页面。图 3-11表3-1包含了一些可能遇到的HTML元素。表 3-1元 素说 明用 法 示 例 图片标记。这个标记将一个图片放置到页面上类似段落的一块文本。使用标记的各种属性，可以将包含在该标记元素内的文本放置在页面上的任何位置。例如，要将两个元素并排放置，可以为其中一个元素设置float:left样式，而为另一个设置float:right样式Left-hand content here Right-hand content here用于格式化文本中的字符的标记，因此可以用标记包住一句话中的一个词语，并让该标记设置为粗体字以突出该词语Some standard text with a bold word in the middle元素中包含了行()和列()。一般用于在页面上定位其他元素，理想情况下应只用于表格式的数据。根据可访问性原则，元素应用于定位和布局，但很多站点仍然使用表格，因为它比较容易开发 The contents of a cell 锚(anchor)元素。在页面上定义一个超链接，使得开发人员同时可以指定目标内容(在属性href中)和显示给用户的文本Some text with a hyperlink in itHTML页面的两个主要部分是和。是放置元素和元素(附带各种元数据)的区域。包含要显示的元素 Page Title Contents of page 表单元素。在创建带有数据输入表单的站点时，用于将数据传送到服务器的元素必须包含在元素之内。HTML的元素具有多种变体；如果其type属性设置为text，那么该元素在屏幕上显示为一个文本框。如果其type属性设置为submit，它将显示为一个按钮，在单击该按钮时，表单将被提交给服务器 (续表) 元 素说 明用 法 示 例 在页面的区域，元素控制了在页面的标题栏显示的文本。通常用于将一个CSS样式表链接到页面Page Title可以包含客户端脚本(在浏览器中运行的脚本，通常用JavaScript编写，也可以用VBScript编写)，也可以包含服务器端.NET代码 alert(HelloWorld! ); Protected Sub Page_Load( _sender as Object, _e as EventArgs) End Sub 用于辅助页面布局，标记在一串文本中添加一个分隔线， 用于表示不可分割的空格字符串；因此由一个 字符分隔的两个词语(或元素)不能分别放置在两行上。元素显示一条横跨页面的水平线This is a string of text with a line break and a space.Two images sepreated by a space:  在本章的下载代码中，有一个名为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规则的核心内容如下： 总是使用闭标记(因此对每个段落总是同时使用和)或使用自闭标记(例如用代替)。 标记和属性的名称必须小写(因此div id=myDiv是可以接受的，但Div ID=myDiv就不是)，因为XHTML是区分大小写的(因此、和在XHTML中是不同的实体)。 属性值必须包含在双引号内。这只是XHTML的简单总结；如果希望更多地了解这些规则，应该参考W3站点/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中以高亮方式表示的错误表明标记应该只出现在块元素内，例如一个内部。如果将页面的第一部分放置到一个元素中，则这个错误就不存在了，而页面的外观不会发生任何变化：Left-hand content hereRight-hand content hereASP.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页面上，服务器控件表现为一个标记；例如。这些标记不是标准的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。这些代码如下所示，这是它们在页面的源代码中的样子：在呈现的源代码中，对等的代码是：注意最初的TextBox1控件已从ASP.NET控件转换为HTML元素。服务器接收到关于该页面的请求，并从源请求中知道浏览器能够理解HTML，因此服务器将控件转换为HTML版本并与页面的其他部分一起发送回浏览器。浏览器完成剩余的动作，将HTML代码转换成可以浏览的网页。3.4.3 VWD的Source ViewVisual Web Developer在创建和编辑页面的时候主要有两种模式。在前面的示例中刚使用过Design View，在本书中我们也将(在可能的情况下)专注于Design View以减少输入的代码量。然而，Source View在手动编辑页面和修改细微的问题时非常有用，因此现在有必要研究一下这种模式，并熟悉它的功能。在下面的示例中，我们将向页面添加另一个控件；但是这一次是在Source View内完成添加。(1) 回到VWD并确保位于ServerControls.aspx页面的Source View中(单击窗口底部的Design和Source按钮在两种模式之间进行切换)。在代码中，紧接着前一个示例中表示TextBox控件的代码后面单击鼠标。(2) 在Source View中添加服务器控件时有两个选择；可以手动输入代码，或者从工具箱中拖放控件，类似于在Design View中使用的技术。首先以比较难的方式完成 开始输入如下代码：asp:Image其实在单词Image的输入完成之前，就可以看到一些有用的提示信息，如图3-23所示，这个提示会试图猜测开发人员希望输入的是什么。这是VWD和Visual Studio的一个功能，称为IntelliSense，设计它用于减轻开发人员的工作。要接受一个建议，可以使用方向键滚动到所需的内容并按下Tab、Space或者Enter，或用鼠标单击所需的内容。要强制显示任何相关的IntelliSense，按下Ctrl+Space将相应的内容弹出来。图 3-23 (3) 继续输入如下代码：注意当输入ImageUrl属性的时候，VWD将显示一个本地图片列表供开发人员选择(如图3-24所示)。图 3-24(4) 再向页面添加一个控件；这一次，使用双击的技术进行添加。在后面添加一个空行，将光标放置在该行，然后双击工具箱中的Hyperlink控件(如图3-25所示)将其添加到页面。图 3-25 (5) 在页面能够成功运行之前，必须先编辑这个控件，因此将光标放置在Hyperlink定义内的任意位置上，然后将注意力转移到屏幕右边的Properties面板上(如果该面板没有显示出来，如图3-25所示，则需要将鼠标放置到屏幕右边的Properties选项卡上使Properties面板弹出来，或者选择ViewProperties Window弹出该窗口)。注意到在属性列表的底部有一个名为NavigateUrl的属性 输入作为属性值并按下Enter。看一看图3-26，注意到在超链接的标记内出现了一个新属性NavigateUrl以及为它输入的值。(6) 现在，为何不切换到Design View看看页面是什么样子 注意到3个控件位于同一行上。如果希望将它们安排在不同的行上，只需切换到Source View并在每个控件的后面输入，从而添加一个HTML换行符。您还可能希望修改超链接控件显示的内容(在闭标记之前的文本)。Visit Wrox United Online!图 3-26 请注意屏幕底部Design和Source按钮右边的工具条；包含光标当前所在位置的元素将以橙色高亮显示出来(如图3-26所示)。无论何时，只要在Design或Source View中选择了不同的元素，这个工具条上显示的元素层次结构都将发生相应的改变。(7) 现在再次运行该页面并观察结果，如图3-27所示。操作回顾在这个示例中，进一步熟悉了页面设计的拖放方法，同时熟悉了在Source View中手动编写页面的技术。应该已经注意到，VWD在不同的阶段有很多功能帮助开发人员创建页面。下面逐步解释在VWD中创建的代码。页面的主要内容包含在一个控件内，其中是三个添加到该页面的控件：Visit Wrox United Online!图 3-27现在看一看呈现的代码 在浏览器中打开该页面时，选择ViewSource菜单，查看的内容是如何变化的：Visit Wrox United Online!Web浏览器对ASP.NET服务器控件一无所知，因此当有浏览器请求该页面时，ASP.NET处理器将介入进来并将服务器端元素转换为浏览器能接受的简单HTML。TextBox控件直接映射为HTML的元素。Image控件转换为元素，但请注意IamgeUrl属性是怎样转换为src属性的：ImageUrl=/azoreschurch.jpgImageUrl属性中的文件的名称(或者说图片的URL)转换到src属性中。如果该文件是项目的本地文件，那么在服务器端应为文件名加上前缀/。src=azoreschurch.jpgHyperLink控件也转换为对应的HTML元素，同时该控件的NavigateUrl属性转换为标记的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元素；例如，用于超链接的锚标记，或者用于突出显示页面某个部分文本的标记。诸如Table和Div这样的控件是容器，因此在它们的定义内可以包含其他控件。例如，在Table控件中，可以在每个表格单元内嵌入不同的控件。在Div控件内也可以放置很多不同的元素和控件。可以将服务器端控件嵌入到类似这种用于布局页面的静态的、非服务器的HTML元素内。图 3-291. 将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 两个孩子到深林中探险，他们在身后留下一串面包碎屑以便能找到回家的路。当用户单击浏览站点的页面时，可能会移动到不同的区域或子区域，直到经由数个链接深入到应用程序内部。bread