Web程序设计课堂教学教案(第四章)

洛阳理工学院课堂教学教案教师姓名：课程名称：Web程序设计授课时数：6 第7、8、9次课以下内容属于第7次课：第4章 服务器控件[主要介绍HTML服务器控件、标准服务器控件、验证控件和用户控件]4.1 服务器控件概述在网页上经常看到填写信息用的文本框、单选按钮、复选框、下拉列表等元素，它们都是控件。

控件是可重用的组件或对象，有自己的属性和方法，可以响应事件。

服务器控件是服务器端网页上的对象，当用户通过浏览器请求网页时，这些控件将运行并把生成的标准的HTML文件发送给客户端浏览器来呈现。

在页面上，标准服务器控件表现为一个标记，例如<asp:textbox…/>。

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

在创建.aspx页面时，可以将任意的服务器控件放置到页面上，然而请求服务器上该页面的浏览器将只会接收到HTML和JavaScript脚本代码，如图4-1所示。

Web浏览器无法理解。

Web浏览器只理解HTML，可能也理解JavaScript——但它不能处理代码。

服务器读取代码并进行处理，将所有特有的内容转换为HTML以及(如果浏览器支持的话)一些JavaScript代码，然后将最新生成的HTML发送回浏览器。

服务器控件主要类别有HTML服务器控件、标准服务器控件、验证控件、用户控件、数据控件、导航控件等。

4.2 HTML服务器控件[描述如何使用VWD2008工具箱的“HTML”选项卡上的服务器控件]4.2.1 HTML元素在VWD2008中，从工具箱添加到页面上的HTML服务器控件只是已设置了某些属性的HTML元素，当然也可通过输入HTML标记在“源”视图中创建HTML元素。

默认情况下，文件中的HTML元素作为文本进行处理，并且不能在服务器端代码中引用这些元素，只能在客户端通过javascript和vbscript等脚本语言来控制。

工具箱的“HTML”选项卡上提供了一些基于HTML INPUT元素的控件。

本节通过下列两个控件HTML INPUT元素的使用方法。

4.2.1 HTML元素（1）Input (Button)控件，按钮控件：默认情况下是“INPUT type="button"元素”。

（2）Input (Text) 控件，文本框控件：默认情况下是“INPUT type="text"元素”。

Input(Button)元素的主要功能是创建一个用来触发事件处理程序的按钮，通过使用onclick属性来表明单击按钮可以触发的处理方法。

其主要属性有：ID ：此控件的编程名称；value ：设置按钮中显示的文字。

【例4-1】演示如何使用Input (Text)元素和Input (Button)元素 [结合操作讲解] 参见教材。

4.2.2 HTML服务器控件在VWD2008中，从工具箱添加到页面上的HTML服务器控件只是已设置了某些属性的HTML元素。

默认情况下，这些添加到文件中的HTML元素被视为传递给浏览器的标记，作为文本进行处理，不能在服务器端的代码中引用这些元素。

若要使这些元素能以编程方式进行访问，可以通过添加runat="server"属性表明应将HTML元素作为服务器控件进行处理。

还可设置HTML元素的id属性，这样就可使用基于服务器的代码对其进行编程引用了。

【例4-2】演示如何使用工具箱的Input(Button)服务器控件、Input(Text)服务器控件 [结合操作讲解] 步骤请参见教材。

4.3 标准服务器控件包含大量可在网页上使用的标准服务器控件。

本节重点从服务器控件的工作原理和过程入手，介绍控件的常用功能和用法。

4.3.1 按钮控件可使用 Button服务器控件为用户提供向服务器发送网页的能力。

该控件会在服务器代码中触发一个事件，可以处理该事件来响应回发。

包括三种按钮控件，每种按钮控件在网页上显示的方式都不同，如下表4-1所列：（1）按钮事件：当用户单击任何Button（按钮）服务器控件时，会将该页发送到服务器。

这使得在基于服务器的代码中，网页被处理，任何挂起的事件被引发。

这些按钮还可引发它们自己的Click事件，可以为这些事件编写“事件处理程序”。

（2）按钮回发行为： [重点]当用户单击按钮控件时，该页回发到服务器。

默认情况下，该页回发到其本身，在这里重新生成相同的页面并处理该页上控件的事件处理程序。

可以配置按钮以将当前页面回发到另一页面。

这对于创建多页窗体可能非常有用。

在某些情况下，可能希望Button控件也使用客户端脚本执行回发。

这在希望以编程方式操作回发（如将回发附加到页面上的其他元素）时非常有用。

可以将Button控件的UseSubmitBehavior属性设置为true以使Button控件使用基于客户端脚本的回发。

（3）处理Button控件的客户端事件Button控件既可以引发服务器事件，也可以引发客户端事件。

服务器事件在回发后发生，且这些事件在为页面编写的服务器端代码中处理。

客户端事件在客户端脚本（通常为ECMAScript(JavaScript)）中处理，并在提交页面前引发。

通过向按钮控件添加客户端事件，可以执行一些任务（如在提交页之前显示确认对话框以及可能取消提交）。

【例4-3】演示Button控件、LinkButton控件、ImageButton控件的使用。

步骤请参见教材。

[结合操作讲解]4.3.2 TextBox（文本框）控件TextBox服务器控件是让用户向网页输入文本的控件。

默认情况下，该控件的TextMode属性设置为TextBoxMode.SingleLine，这将显示一个单行文本框。

但可以将TextMode属性设置为TextBoxMode.MultiLine，以显示多行文本框（该文本框将作为textarea元素呈现）。

也可以将TextMode属性更改为TextBoxMode.Password，以显示屏蔽用户输入的文本框。

通过使用Text属性可以获得TextBox控件中显示的文本。

安全说明：将TextMode属性设置为TextBoxMode.Password可有助于确保在输入密码时其他人无法看到。

但是，输入到文本框中的文本没有以任何方式进行加密，为了提高安全性，在发送其中带有密码的页时，可以使用安全套接字层(SSL)和加密。

【例4-4】演示文本框TextBox控件、标签Label控件、按钮Button控件的使用。

[结合操作讲解]步骤请参见教材。

以下内容属于第8次课：4.3.3 ListBox控件和DropDownList控件ListBox服务器控件使用户能够从预定义的列表中选择一项或多项。

DropDownList服务器控件使用户可以从预定义的下拉列表中选择单个项，它与ListBox 服务器控件的不同之处在于，其选项列表在用户单击下拉按钮之前一直保持隐藏状态。

此外，DropDownList控件不支持多重选择模式。

DropDownList控件的某个选项被选中时，该控件将引发SelectedIndexChanged事件。

默认情况下，此事件不会导致向服务器发送页，但可通过将AutoPostBack属性设置为true，强制该控件立即发送。

如果将ListBox控件的属性SelectionMode的值从“Single”改为“Multiple”将允许进行多重选择，用户可以在按住Ctrl或Shift键的同时，单击以选择多个项。

【例4-5】演示ListBox控件和DropDownList控件的使用。

步骤请参见教材。

[结合操作讲解]4.3.4 CheckBox（复选框）和CheckBoxList（复选框列表）控件CheckBox控件和CheckBoxList控件分别用于向用户提供选项和选项列表。

CheckBox控件适合用在选项不多且比较固定的情况，当选项较多或需在运行时动态决定有哪些选项时，使用CheckBoxList控件比较方便。

【例4-6】演示复选框控件CheckBox和复选框列表控件CheckBoxLis使用。

步骤请参见教材。

[结合操作讲解]4.3.5 Image和ImageMap控件 3.5包含两个图形控件，一个Image,一个是ImageMap控件。

（1）Image服务器控件使您可以在网页上显示图像，并用自己的代码管理这些图像。

可以在设计时或运行时以编程方式为Image对象指定图形文件。

还可以将控件的ImageUrl属性绑定到一个数据源，以根据数据库信息显示图形。

与大多数其他服务器控件不同，Image控件不支持任何事件。

例如，Image 控件不响应鼠标单击事件。

实际上，可以通过使用ImageMap或ImageButton控件来创建交互式图像。

（2）Imagemap说白了就是一种图形，包括许多不同部分，将鼠标指针指在图形的各个部分，点一下鼠标左键，就可以进入另一个超级链接的页面。

Imagemap不一定要真的是map，可以是任何图形。

比如一张脸好了，将鼠标点在眼睛上就出现关于眼睛的页面，点在鼻子上就出现鼻子的页面(很适合做成整容外科的网页吧？！)，也是一种ImageMap。

ImageMap控件由两个元素组成。

第一个是图像，它可是任何标准Web 图形格式的图形，如.gif、.jpg或.png文件。

第二个元素是HotSpot（作用点）控件的集合。

每个作用点控件都是一个类型为CircleHotSpot、RectangleHotSpot或PolygonHotSpot的不同项。

对于每个作用点控件，都要定义用于指定该作用点的位置和大小的坐标。

例如，如果创建一个CircleHotSpot控件，则需要定义圆心的x和y坐标以及圆的半径。

响应用户单击：每一个作用点都可以是一个单独的超链接或回发事件。

可以指定用户单击作用点时发生的事件，可以将每个作用点配置为可以转到为该作用点提供的URL的超链接。

或者，也可以将控件配置为在用户单击某个作用点时执行回发，并可为每个作用点提供一个唯一值。

回发会引发ImageMap控件的Click事件。

在事件处理程序中，可以读取分配给每个作用点的唯一值。

【例4-7】演示Image控件和ImageMap控件的使用。

[结合操作讲解]步骤请参见教材。

提示：HotSpots（作用点）的坐标以像素为单位，在Windows的【画图】程序中打开，任选一种画图工具，移动鼠标，在下部状态栏中可看到当前鼠标所在处的像素点的坐标，如图4-11所示。

4.3.6 RadioButton和RadioButtonList 服务器控件在向网页添加单选按钮时，可以使用两种服务器控件：单个RadioButton控件或RadioButtonList控件。