3.4 服务器控件介绍

当观察Visual Web Developer Toolbox时，能够看到几个不同的部分，每一部分都包含一组不同的工具。这些工具很多是服务器端控件，当开发ASP.NET应用程序时会经常使用这些控件。

服务器端控件在ASP.NET的源代码中显示为一个标记；例如，<asp:textbox.../>。这些标记不是标准的HTML元素，因此如果它们出现在页面上浏览器将不能理解它们。但是，当从Web服务器请求ASP.NET页面时，这些标记自动转换成HTML元素，因此浏览器只接收它能理解的HTML内容。

文本框:
图3-16

本节从观察可以使用的一些种类的控件开始，然后讨论它们是如何工作的。

3.4.1 服务器端控件Toolbox

乍一看，Toolbox中的一组服务器端控件是非常强大的。不仅可以从其中选择标准的Web页面元素（例如，单选按钮、超链接和下拉列表），而且也可以使用其他种类的更多控件（如图3-16所示的最基本的控件）。Toolbox根据编辑的是哪一种类型的页面而显示不同的外观，因此图3-16是编写ASP.NET页面时的标准外观。

可以使用的控件种类如下：

● 标准：构成所有页面90%的常见控件。

● 数据：用于连接到数据源（数据库或XML文件）的控件。

● 验证：可以添加到页面中用于验证用户输入的控件（例如，确保某些文本框包含数据或者数据以正确的格式输入）。

● 导航：为了使站点可以导航而能提供简单和快速解决方案的控件（例如，动态的菜单和超链接的路径）。

● 登录：使从完全开放的站点进入到个性化区域变得简单的一组控件。

● WebParts：称为WebParts的使创建具有可拖放部分的Sharepoint样式的站点成为可能的控件，WebParts使用户可以重新布置站点的外观。

● HTML：简单的HTML元素。

在本书其余的各部分，会介绍每个种类的很多控件。稍后在本章中，当为Wrox United站点构建一些菜单时，可以尝试使用一些导航控件。

3.4.2 服务器端控件是什么

让我们从第一个原理开始讲起。当创建一个简单的HTML页面并将其保存在本地的文件系统中时，可以通过双击该文件在浏览器中查看该页面。如果构建静态HTML站点并想测试输出，这是一个好方法，但是开发一个用户必须下载才能查看的Web站点是没有意义的！这就是为什么，当部署一个Web站点时把它上载到Web服务器，所有人都可以通过其URL（统一资源定位符）访问它。

现在站点已经布置到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页面时，可以轻松地创建包含服务器端控件的页面，但是向Web服务器请求该页面的浏览器只接收HTML和JavaScript（如图3-17所示）。这是要理解的一个关键概念，在第6章详细论述处理过程。

图3-17

可以在一个简单示例的帮助下看看这是如何工作的。以下实验是演示ASP.NET代码和HTML代码之间不同之处的一个真正简单的示例。

一、实验在Design View中添加服务器端控件

1．重新打开Chapter03Web站点。

2．右键单击Web站点的根目录，然后选择Add New Item。

3．在出现的对话框中（如图3-18所示），选择Web Form，把页面命名为ServerControls.aspx，从下拉列表中选择喜欢的语言，保持两个复选框的未选中状态。

图3-18

4．如果没有在Design View中，确保切换到该模式，然后在位于左侧的控件工具栏的Standard部位（如图3-19所示）双击TextBox控件，把它添加到页面的主体中。

图3-19

5．现在可以查看该页面，因此右键单击页面，然后选择View in Browser。浏览器应该启动并显示如图3-20所示的页面。

图3-20

注意地址栏中显示的数字（在单词localhost之后）是一个相当随机的数字，每当第一次向项目请求服务器端页面时生成。

二、工作原理

在此示例中，只向ASP.NET页面添加了一个服务器端控件并且在浏览器中查看该页面。它确实不是最令人激动的例子，但主要目的是为了理解如何把服务器端代码转变为客户端代码。

首先，单击浏览器的View菜单，然后选择View Source。像在Notepad中一样，能看到如图3-21所示的代码。

图3-21

此代码是客户端代码——用于呈现页面的输出。把此代码与最初的代码相比较——返回到VWD并单击页面的Source View（如图3-22所示）。

图3-22

注意描述ID为TextBox1的控件的行。下面是这些行，像它们在页面最初的源代码中显示的那样：

<div>

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

</div>

下面是在用于呈现的源代码中的等效的行：

<div>

</div>

注意最初的TextBox1控件已经从ASP.NET控件转换成HTML元素。服务器接收对页面的请求并能从最初的请求中收集到浏览器能理解的HTML，因此服务器生成HTML版本的控件并随同页面的其余部分发送回浏览器。然后浏览器做一些从HTML代码向可视的Web页面转换的工作。

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 View和Source View之间切换）。在出现的代码中，单击紧随在表示前面在示例中添加的TextBox控件的代码之后的一行。

<div>

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

</div>

2．当在Source View中向服务器添加控件时可以有两种选择：既可以键入代码，也可以从Toolbox向页面中拖放控件，与Source View中使用的方法非常相似。首先使用费力的方法来做——从键入以下代码开始：

<asp:Image

在完成输入单词Image前，如图3-23所示，将看到手边弹出一些提示工具，试图猜测将要键入什么。

图3-23

这是VWD和Visual Studio中可以使用的一种称为智能感知（IntelliSense）的功能，它为使作为开发人员的生活变得更轻松而设计。为了接受推荐的单词，可以使用箭头键在列表中滚动，然后按下Tab、Space或Enter键，或者用鼠标单击推荐的单词。如果想要强制显示IntelliSense，按下Ctrl+Space ，弹出菜单将会出现。

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>之前添加一个空行，把鼠标指针定位到此行，然后双击Toolbox中的Hyperlink控件（如图3-25所示），把它添加到页面中。

5．在可以成功运行页面前必须编辑此控件，把鼠标指针定位到Hyperlink定义内的任何位置处，然后把目光投向右侧的Properties窗格。（如果它是隐藏的，如图3-25所示，则需要通过把鼠标悬停在界面右侧边缘的Properties标签上，或者选择View_Properties Window）。注意属性列表底部附近的一个称为的NavigateUrl属性。输入http://www.wroxunited.net作为属性值，然后按下Enter键。看一下图3-26，能看到在页面中出现一个名称为NavigateUrl的新的超链接标记的属性，该属性的值是刚才输入的值。

图3-25

图3-26

6．切换到Design View，看一下它是什么样——注意页面上的3个控件在一行之内。如果想让它们一个出现在另一个之下，只要在Source View中在每个控件后键入<br />以添加一个HTML换行符。也可能想把hyperlink控件的显示文本（在</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="http://www.wroxunited.net">Visit Wrox United Online!

</asp:HyperLink>

</div>

</form>

</body>

注意界面底部Design和Source按钮之后的栏。在当前指针位置下的元素上有一个橙色的加亮显示区（如图3-26所示）。每当在Design View或Source View选择不同的元素时，此元素层次都会变化。

7．再一次运行页面并查看结果，图3-27描绘了运行后的结果。

图3-27

二、工作原理

在此示例中，增加了对页面设计的拖放方法和使用Source View手动编制页面的熟悉程度。也看到VWD有很多功能在不同的时间发挥作用帮助完成此过程。

浏览以下在VWD中生成的代码。页面的主要内容区域用<div>控件包围起来，其内部是向页面添加的3个控件：

<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="http://www.wroxunited.net">Visit Wrox United Online!

</asp:HyperLink>

</div>

下面看一下用于呈现页面的源代码——当页面在浏览器中运行时，从浏览器的主菜单上选择View_Source，查看<div>的内容是如何变化的：

<div>

<a id="HyperLink1" href="http://www.wroxunited.net">Visit Wrox United Online!</a>

</div>

Web浏览器不知道有关ASP.NET服务器端控件的任何情况，所以当页面被请求时，Web服务器上的ASP.NET处理器开始把服务器端元素转换成浏览器更乐于接受的简单的HTML。TextBox控件直接映射为HTML<input>元素。Image控件转换成<img>元素，但是注意如何把ImageUrl属性转换为src属性：

ImageUrl="~/azoreschurch.jpg"

ImageUrl中的文件名称（或图像的URL）转换成src属性。

src="azoreschurch.jpg"

如果文件是项目本地的，在服务器端为文件名称加前缀~/。

HyperLink控件也非常直接地转换为它呈现的等效部分，NavigateUrl可以容易地转换成a标记的href属性。

在这个简单示例中，实际上并没有从使用服务器端控件代替手动编写获得很多好处，但是要记住此页面是完全静态的。如果想对用户输入做出响应、响应事件或者从数据库获取数据，将需要使用服务器端代码。服务器端控件使在服务器上使用可视元素的过程成为可能。

【查看所有评论(0)条】