aspnet20入门经典3(编辑修改稿)

aspnet20入门经典3(编辑修改稿)内容摘要：

317 所示 )。 这是一个必须理解的关键概念，服务器所执行的处理过程将在第 6 章详细讨论。 图 317 下面用一个简单的示例帮助您理解这个概念。 这个“试一试”是一个非常简单的示例，它将演示 代码和 HTML 代码的区别。 (1) 再次打开 Chapters03 站点。 (2) 右击站点的根目录并选择 Add New Item。 (3) 在弹出的对话框内 ( 如图 318 所示 ) ，选 择 Web Form ，将页面命名 为，从下拉列表中选择喜欢的语言，同时两个复选框都不要选中。 图 318 (4) 如果没有处于 Design View 中，则确保切换到这个模式并从屏幕左边工具箱的Standard 区域双击 TextBox 控件 (如图 319 所示 )向页面添加文本框。 (5) 这就可以查看这个页面了，单击工具栏上的运行按钮 (绿色的箭头，将鼠标放在该按钮上时会显示提示 Start Debugging)。 浏览器将启动并 显示该页面。 如图 320 所示。 图 319 图 320 注意在地址栏内显示的数字 (在 localhost 后面 )是一个随机数，每回第一次 开始调试时这个数字都会变化。 操作回顾 在这个示例中，仅仅向一个 页面添加了一个服务器控件并在浏览器中查看该页面。 这并不是一个非常有趣的示例，但本例的重点是观测服务器端代码是怎么转换为客户端代码的。 首先，单击浏览器的 View 菜单并选择 View Source—— 应该看到在 Notepad 内显示的代码，如图 321 所示。 这是客户端代码 —— 呈现的页面输出。 将该代码与最初的代码比较；切换回 VWD 并单击 Source View 查看该页面的代码 (如图 322 所示 )。 图 321 图 322 需要注意的代码是描述服务器控件的代码，该控件的 ID 是 TextBox1。 这些代码如下所示，这是它们在页面的源代码中的样子： div asp:TextBox ID=TextBox1 runat=server/asp:TextBox /div 在呈现的源代码中，对等的代码是： div input name=TextBox1 type=text id=TextBox1 / /div 注意最初的 TextBox1 控件已从 控件转换为 HTML 元素。 服务器接收到关于该页面的请求，并从源请求中知道浏览器能够理解 HTML，因此服务器将控件转换为 HTML版本并与页面的其他部分一起发送回浏览器。 浏览 器完成剩余的动作，将 HTML 代码转换成可以浏览的网页。 VWD 的 Source View Visual Web Developer 在创建和编辑页面的时候主要有两种模式。 在前面的示例中刚使用过 Design View，在本书中我们也将 (在可能的情况下 )专注于 Design View 以减少输入的代码量。 然而， Source View 在手动编辑页面和修改细微的问题时非常有用，因此现在有必要研究一下这种模式，并熟悉它的功能。 在下面的示例中，我们将向页面添加另一个控件；但是这一次是在 Source View 内完成 添加。 (1) 回到 VWD 并确保位于 页面的 Source View 中 (单击窗口底部的Design 和 Source 按钮在两种模式之间进行切换 )。 在代码中，紧接着前一个示例中表示TextBox 控件的代码后面单击鼠标。 div asp:TextBox ID=TextBox1 runat=server/asp:TextBox /div (2) 在 Source View 中添加服务器控件时有两个选择；可以手动输入代码，或者从工具箱中拖放控件，类似于在 Design View 中使用的技术。 首先以比较难的方式完成 —— 开始输入如下代码： asp:Image 其实在单词 Image 的输入完成之前，就可以看到一些有用的提示信息，如图 323 所示，这个提示会试图猜测开发人员希望输入的是什么。 这是 VWD和 Visual Studio的一个功能，称为 IntelliSense，设计它用于减轻开发 人员的工作。 要接受一个建议，可以使用方向键滚动到所需的内容并按下 Tab、 Space或者 Enter，或用鼠标单击所需的内容。 要强制显示任何相关的 IntelliSense，按下 Ctrl+Space将相应的内容弹出来。 图 323 (3) 继续输入如下代码： div asp:TextBox ID=TextBox1 runat=server/asp:TextBox asp:Image ID=MyImage runat=server ImageUrl=~/ / /div 注意当输入 ImageUrl 属性的时候， VWD 将显示一个本地图片列表供开发人员选择 (如图 324 所示 )。 图 324 (4) 再向页面添加一个控件；这一次，使用双击的技术进行添加。 在 /div后面添加一个空行，将光标放置在该行，然后双击工具箱中的 Hyperlink 控件 (如图 325 所示 )将其添加到页面。 图 325 (5) 在页面能够成功运行之前，必须先编辑这个控件，因此将光标放置在 Hyperlink 定义内的任意位置 上，然后将注意力转移到屏幕右边的 Properties 面板上 (如果该面板没有显示出来，如图 325 所示，则需要将鼠标放置到屏幕右边的 Properties 选项卡上使 Properties 面板弹出来，或者选择 View→ Properties Window 弹出该窗口 )。 注意到在属性列表的底部有一个名为 NavigateUrl 的属性 —— 输入 作为属性值并按下 Enter。 看一看图 326，注意到在超链接的标记内出现了一个新属性 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:TextBoxbr / asp:Image ID=MyImage runat=server ImageUrl=~/ /br / asp:HyperLink ID=HyperLink1 runat= server NavigateUrl=Visit Wrox United Online! /asp:HyperLink /div /form /body 图 326 请注意屏幕底部 Design 和 Source 按钮右边的工具条；包含光标当前所在位置的元素将以橙色高亮显示出来 (如图 326 所示 )。 无论何时，只要在 Design 或 Source View 中选择了不同的元素，这个工具条上显示的元素层次结构都将发生相应的改变。 (7) 现在再次运行该页面并观察结果，如图 327 所示。 操作回顾 在这个示例中，进一步熟悉了页面 设计的拖放方法，同时熟悉了在 Source View 中手动编写页面的技术。 应该已经注意到， VWD 在不同的阶段有很多功能帮助开发人员创建页面。 下面逐步解释在 VWD 中创建的代码。 页面的主要内容包含在一个 div控件内，其中是三个添加到该页面的控件： div asp:TextBox ID=TextBox1 runat=server/asp:TextBoxbr / asp:Image ID=MyImage runat=server ImageUrl=~/ /br / asp:HyperLink ID=HyperLink1 runat=server NavigateUrl=Visit Wrox United Online! /asp:HyperLink /div 图 327 现在看一看呈现的代码 —— 在浏览器中打开该页面时，选择 View→ Source 菜单，查看div的内容是如何变化的： div input name= TextBox1 type=text id=TextBox1 /br / img id=MyImage src= style=borderwidth:0px。 /br / a id=HyperLink1 href=Visit Wrox United Online!/a /div Web 浏览器对 服务器控件一无所知，因此当有浏览器请求该页面时， 处理器将介入进来并将服务器端元素转换为浏览器能接受的简单 HTML。 TextBox 控件直接映射为 HTML 的 input元素。 Image 控件转换为 img元素，但请注意 IamgeUrl 属性是怎样转换为 src 属性的： ImageUrl=~/ ImageUrl 属性中的文件的名称 (或者说图片的 URL)转换到 src 属性中。 如果该文件是项目的本地文件，那么 在服务器端应为文件名加上前缀 ~/。 src= HyperLink 控件也转换为对应的 HTML 元素，同时该控件的 NavigateUrl 属性转换为 a标记的 href 属性。 在这个简单的示例中，在使用服务器控件代替手动编写的 HTML 代码时并没有深入学习什么内容，但记住这是一个纯粹的静态页面。 如果希望响应用户的输入、对事件做出反应或者从数据库获取数据，那就需要编写服务器端代码。 服务器控件使得在服务器上处理可视的元素成为可能。 很多 服务器控件都对应于 HTML 的元素，所 以就存在文本框、按钮、超链接和下拉列表框等服务器控件。 这些控件和它们的最终显示形式看起来是一样的，但是前者的功能要多得多。 每个控件都有一组通用的属性 (例如，它们都拥有 ID 属性，而诸如文本框、标签等控件都拥有 Text 属性 )，这使得在代码中处理这些控件时比较容易。 本章前面已经列出控件的不同类型，在浏览可以添加到站点的服务器控件时可以专注于其中最常用的控件。 标准控件 这些控件是在使用 Windows 应用程序时遇到的各种工具的 Web 对等物。 包含这些控件的网页和标准应用程序给我们的感觉很相似，所以在页面中 添加这些控件的过程非常容易。 下面是一些最常用的控件： ● TextBox 控件：用于在页面上输入文本，常见于购物站点的订单表格，或站点的登录页面。 ● Button 控件：从提交订单到修改站点的个人设置，单击页面上的按钮通常会促使信息传递到服务器，而服务器会对这些信息做出反应并显示一个结果。 ● Label 控件：用于在页面的特定位置显示简单的文本。 使用 Label 控件可以根据用户的交互容易地修改页面某个部分的文本。 ● Hyperlink 控件：用于在页面上提供超链接 功能，这个功能允许导航到站点的其他页面，或者导航到 Inter 上的其他资源。 ● Image 控件：用于在页面上显示图片。 根据用户的输入，服务器可以修改在控件中显示的具体图片。 ● DropDown List 控件：用于向用户提供一个可选择的选项列表；该列表在没有使用时会折叠起来以节省空间。 ● Listbox 控件：用于提供一个大小固定的选项列表。 ● CheckBox 和 Radio Button 控件：用于选择可选的附加信息，具体形式分别是 yes/no和“多选一 ”。 图 328 显示了 Web Site Administration Tool 画面，在下一章将学习使用该工具管理用户账户。 在这个画面中能够看到很多上面介绍的控件。 图 328 页面上的 Search by：标签。