3.4.3 VWD的Source View
Visual Web Developer在创建和编辑页面的时候主要有两种模式。在前面的示例中刚使用过Design View，在本书中我们也将(在可能的情况下)专注于Design View以减少输入的代码量。然而，Source 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>
<form id="form1" runat="server">
<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>
<input name=" TextBox1" type="text" id="TextBox1" /><br />
<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属性)，这使得在代码中处理这些控件时比较容易。本章前面已经列出控件的不同类型，在浏览可以添加到站点的服务器控件时可以专注于其中最常用的控件。N軆USy? €闟>f:y Nb梽v