HTML和WEB控件区别

运行后初始的界面见图5.14。当鼠标移动到Button2上面的时候，其效果如图5.15所示。

图5.14 HtmlButton控件运行初始界面

图5.15 鼠标移动到HtmlButton控件上时运行界面

点击Button2后的效果如图5.16所示。

第5章 HTML控件和Web服务器控件

135

图5.16 点击HtmlButton控件时运行界面

5.1.4.5 HtmlSelect控件

使用HtmlSelect控件创建选择框，在控件工具箱中图标为：。通过将 HTML 元素放置在开始和结束标记之间来指定控件中的项列表。若要为控件中的各项指定所显示的文本，可以设置项的属性，或直接将文本放置在开始和结束标记之间。通过设置项的属性，可以将一个不同于文本的值与该项关联。若要在默认情况下选择列表中的某一项，可将该项的ed属性设置为true。

通过设置Size和Multiple属性，可以控制HtmlSelect控件的外观和行为。Size属性指定控件的高度(以行为单位)。Multiple 属性指定在HtmlSelect控件中是否可以同时选择多个项。

在默认情况下，HtmlSelect控件显示为下拉列表框。如果允许多重选择(通过将Multiple属性设置为true)或指定的高度大于一行(通过将Size属性设置为大于1的值)，控件将显示为列表框。

若要确定单一选择HtmlSelect控件中的选定项，可使用SelectedIndex属性获取选定项的索引。然后就可以使用该值从Items集合中检索该项。要确定允许多重选择的HtmlSelect控件中的选定项，可循环访问Items集合并测试各项的ed属性。HtmlSelect控件可以将该控件绑定到一个数据源。使用DataSource属性指定要绑定到的数据源，还可以通过分别设置DataTextField和DataValueField属性来指定将数据源中哪个字段绑定到该控件中的项的和属性。如果该数据源包含多个数据的源，可使用DataMember属性指定要绑定到该控件的特定的源。以下代码为HtmlSeIect控件使用示例。

[例5.11]

<%@Page language="c#"Codebehind=""AutoEventWireup="true"%>

136

程序设计教程

请选择城市

-城市列表-

北京

上海

南京

杭州

server>

您的选择是：

server>

运行结果如图5.17所示。

图5.17 HtmlSelect控件运行界面

5.1.4.6 HtmlForm控件

HtmlForm(窗体)控件是设计动态网页一个相当重要的组件，它可以将Client端的数据传送至Server端作处理。在窗体内的确认按钮被按下去后，只要被Form控件所包起来的数据输入控件都会被一并送到Server端，这个动作称为回贴(Post Back)。这时Server端收到这些数据及OnServerClick事件后会执行指定的事件程序，并且将执行结果重新下载到Client端浏览器。

第5章 HTML控件和Web服务器控件

137

其主要的属性和方法如下：

Action：设定或获取Form提交的接收程序，默认值是当前程序。

EncType：设定或获取form提交内容的编码类型，默认值是text/html。

Method：设定或获取form请求的方式，默认值是POST，而普通

运行结果如图5.18所示。

138

程序设计教程

图5.18 HtmIForm控件运行初始界面

点击按钮后的运行效果如图5.19所示。

图5.19 HtmIForm控件运行结果界面

我们看到Page_Load事件先发生后才触发Button1_Click事件。倘若Action所指到的地址是其他的网页或档案，则呼叫其他网页；此时原网页的Button1_Click事件程序便不触发，直接会将所指定的网页加载。

5.1.4.7 HtmlInput控件

HtmlInput控件会因为Type属性的设定而产生不同种类的控件，见表5.3。

表5.3中的种类都是使用者输入数据的基本元素，另外要注意HtmlInput控件不需要相对应的结束结构，也就是只需要撰写即可，不需要相对应的或是以的方式来写作。

1) HtmlInputButton控件。HtmlInputButton控件创建一个服务器端控件，该控件映射到

type=button>、和HTML元素，并允许分别创建命令按钮、提交按钮或重置按钮。用户单击HtmlInputButton控件时，来自嵌有该控件的窗体的输入被发送到服务器并得到处理。然后，将响应发送回请求浏览器，这两个控件在工具箱里的图标如是：。

表5.3 HtmlInput控件的Type属性

Input type

主要的属性和事件

和

第5章 HTML控件和Web服务器控件

button

submit

reset

checkbox

text

password

radio

hidden

cked：是否被选取

ue：获取或设置与HtmlInputControl相关联的值

ue：输入框内的文字

xlength：可输入的最大字符数

cked：是否被选取

ue：获取或设置与HtmlInputRadio相关联的值

ue：获取或设置与HtmlInputHidden相关联的值

139

erverclick

ue：钮所显示的文字

通过为ServerClick事件提供自定义事件处理程序，可以在单击控件时执行特定的指令集。注意，“重置”按钮不支持ServerClick事件。单击“重置”按钮时，未必清除页上的所有输入控件。相反，在加载页时，它们返回到它们的原始状态。

2) HtmlInputCheckBox控件。HtmlInputCheckBox控件创建服务器端控件，该控件映射到

type=checkbox>HTML元素并允许创建使用户可以选择true或false状态的复选框控件，此控件在工具箱中的图标为：。单击HtmlInputCheckBox控件时，该控件不会向服务器回送。当使用回送服务器的控件(如HtmlInputButton控件)时，复选框的状态被发送到服务器进行处理。若要确定是否选择了复选框，可测试控件的Checked属性。

[例5.13] 创建HtmlInputCheckBox控件来允许用户选择true或false状态。当用户单击页上包含的输入按钮时，Button1_Click事件处理程序确定是否选中了HtmlInput CheckBox控件。然后，它在控件中显示一个消息。请注意，即使此例中在默认情况下将选中的值设置为true，用户仍然需要单击Button1以显示该文本。

<%@ Page language="c#" Codebehind="" AutoEventWireup="false"

Inherits="ox" %>

140

程序设计教程

HtmlInputCheckBox示例

当选择了checkbox并点击“进入”按钮后，运行结果如图5.20所示。

图5.20 HtmlInputCheckBox控件运行结果

3) HtmlInputText控件。HtmlInputText控件创建一个服务器端控件，该控件映射到和HTML元素，并允许创建单行文本框以接收用户输入，此控件在工具箱中的图标为：。与标准HTML一样，这些控件可用于在HTML窗体中输入用户名和密码。注意：当Type属性的设置为password时，文本框中的输入将受到屏蔽。

通过使用MaxLength、Size和Value属性，可以分别控制可输入的字符数、控件宽度和控件内容。

[例5.14] 利用文本输入框取得使用者的身分验证信息，使用者可以按下Button或是Submit来确定资料的输入，Reset则可以重设文本输入框的内容：

<%@ Page language="c#" Codebehind="" AutoEventWireup="true"

Inherits="rd" %>

使用者在文字输入盒中所输入的数据会被存在Value属性里面，使用者输入完数据后，按下Button或是Submit则会触发相对应的OnServerClick事件程序。我们在事件程序中呼叫了检查使用者名称及密码是否正确的子程序PWDchk()，如果使用者输入正确的使用者名称及密码，则会出现输入正确的信息，如图5.21所示。

142

程序设计教程

图5.21 HtmlInputText控件运行初始界面

倘若输入错误的使用者名称或密码，则会显示输入错误，并将使用者所输入的使用者名称及密码清除，如图5.22所示。

图5.22 HtmlInputText控件运行结果

4) HtmlInputHidden控件。使用HtmlInputHidden控件对 HTML元素进行编程。尽管此控件是窗体的一部分，但它永远不在窗体上显示。由于在HTML中不保持状态，此控件通常与HtmlInputButton和HtmlInputText控件一起使用，以在对服务器的发送之间存储信息。

[例5.15] 使用HtmlInputHidden控件跨请求保存视图状态信息。控件显示存储在与当前请求紧邻的前一个Web请求的隐藏字段中的文本。有两个事件处理程序。第一个事件在页被回送到服务器时发生。该事件处理程序获取存储在前一个发送请求的隐藏字段中的文本，并将其显示在控件中。第二个事件在单击“提交”按钮时发生。该事件处理程序获取文本框的内容，并将它存储在Web页上的隐藏字段中。

<%@ Page language="c#" Codebehind="" AutoEventWireup="true"

Inherits="idden" %>

HtmlInputHidden示例

初始运行结果如图5.23所示。当点击“进入”按钮以后的效果如图5.24所示。

图5.23 HtmlInputHidden控件运行初始界面

144

程序设计教程

图5.24 HtmlInputHidden控件运行结果

5) HtmlInputRadioButton控件。使用HtmlInputRadioButton控件对HTML 元素进行编程，此控件在工具箱中的图标为：排斥；一次只能选择该组中的一个单选按钮。

HtmlRadioButton控件不会自动向服务器回送。必须依赖于使用某个按钮控件(如HtmlInputButton、HtmlInputImage或HtmlButton)来回送到服务器。可通过为ServerChange事件编写处理程序来对HtmlRadioButton控件进行编程。注意：只为更改成选中状态的单选按钮引发ServerChange事件。

[例5.16] 为HtmlRadioButton控件的ServerChange事件创建事件处理程序。此事件处理程序确定选择哪个单选按钮并将选定内容显示在消息中。

<%@ Page language="c#" Codebehind="" AutoEventWireup

="true" Inherits="adioButton" %>

运行结果如图5.25所示。

图5.25 HtmlInputRadioButton控件运行初始界面

5.2 Web服务器控件

可以使用服务器控件来取代使用<% %>代码块编写动态内容，实现Web页面编程。在.aspx文件中使用包含runat=”server”属性值的自定义标记来声明服务器控件。

Web控件中包括传统的表单控件，如TextBox和Button，以及其他更高抽象级别的控件，如Calendar和DataGrid控件。它们提供了一些能够简化开发工作的特性，其中包括：

1) 丰富而一致的对象模型：WebControl 基类实现了对所有控件通用的大量属性，这些属性包括ForeColor、BackColor、Font、Enabled等。属性和方法的名称是经过精心挑选的，以提高在整个框架和

146

程序设计教程

该组控件中的一致性。通过这些组件实现的具有明确类型的对象模型将有助于减少编程错误。

2) 对浏览器的自动检测：Web控件能够自动检测客户机浏览器的功能，并相应地调整它们所提交的HTML，从而充分发挥浏览器的功能。

3) 数据绑定：在Web窗体页面中，可以对控件的任何属性进行数据绑定。此外，还有几种Web控件可以用来提交数据源的内容。

在HTML标记中，Web控件会表示为具有命名空间的标记，即带有前缀的标记。前缀用于将标记映射到运行时组件的命名空间。标记的其余部分是运行时类自身的名称。与HTML控件相似，这些标记也必须包含runat="server"属性。下面是一个声明的示例：

＜asp:TextBox id="textBox1" runat="server" Text="示例"＞

＜/asp:TextBox＞

在上例中，"asp"是标记前缀，会映射到trols命名空间。

Web服务器控件在集成开发环境Visual 的控件工具箱中也有对应图标，如图5.26所示，同样，使用时可直接拖放到Web页面上。页面中已经拖放几个Web控件。

下面介绍基本的Web服务器控件。

图5.26 Visual 控件工具箱中对应的一些Web服务器控件

5.2.1 文本输入控件

TextBox服务器控件是让用户输入文本的输入控件，在控件工具箱中的图标为：。默认情况下，TextMode属性设置为SingleLine，它创建只包含一行的文本框。然而，通过将TextMode属

第5章 HTML控件和Web服务器控件

147

性值分别改为ine或rd，TextBox控件也可以显示多行文本框或显示屏蔽用户输入的文本框。使用Text属性，可以指定或确定TextBox控件中显示的文本。

TextBox控件包含多个属性，用于控制该控件的外观。文本框的显示宽度(以字符为单位)由它的Columns属性确定。如果TextBox控件是多行文本框，则它显示的行数由Rows属性确定。要在TextBox控件中显示换行文本，可将Wrap属性设置为true。

还可以设置一些属性来指定如何将数据输入到TextBox控件中。要防止控件中显示的文本被修改，可将ReadOnly属性设置为true。如果想限定用户只能输入指定数目的字符，可设置MaxLength属性。通过设置MaxLength属性，可以限制可输入到此控件中的字符数。将Wrap属性设置为true 来指定当到达文本框的结尾时，单元格内容应自动在下一行继续。

[例5.17] 使用TextBox控件来获取用户输入。当用户单击Add按钮时，将显示文本框中输入值之和。

<%@Page language="c#"Codebehind=""AutoEventWireup=

"True"%>

运行结果如图5.27所示。

图5.27 TextBox控件运行结果

5.2.2 选择控件

5.2.2.1

复选控件

在日常信息输入中，我们会遇到这样的情况，输入的信息只有两种可能性(例如：性别、婚否之类)，如果采用文本输入的话，一是输入繁琐，二是无法对输入信息的有效性进行控制，这时如果采用复选控件(CheckBox)，就会大大减轻数据输入人员的负担，同时输入数据的规范性得到了保证，此控件在控件工具箱中的图标为：。

CheckBox的使用比较简单，主要使用id属性和text属性。Id属性指定对复选控件实例的命名，Text属性主要用于描述选择的条件。另外当复选控件被选择以后，通常根据其Checked属性是否为真来判断用户选择与否。

CheckBox控件在Web窗体页上创建复选框，该复选框允许用户在true或false状态之间切换。通过设置Text属性可以指定要在控件中显示的标题。标题可显示在复选框的右侧或左侧。设置TextAlign属性以指定标题显示在哪一侧。

150

程序设计教程

注意：由于元素没有内容，因此可用/>结束该标记，而不必使用单独的结束标记。

若要确定是否已选中CheckBox控件，请测试Checked属性。当CheckBox控件的状态在向服务器的各次发送过程间更改时，将引发CheckedChanged事件。可以为CheckedChanged事件提供事件处理程序，以便当CheckBox控件的状态在向服务器的各次发送过程间更改时执行特定的任务。

注意：当创建多个CheckBox控件时，还可以使用CheckBoxList控件。对于使用数据绑定创建一组复选框而言，CheckBoxList控件更易于使用，而各个CheckBox控件则可以更好地控制布局。

默认情况下，CheckBox控件在被单击时不会自动向服务器发送窗体。若要启用自动发送，请将AutoPostBack属性设置为true。下例显示了如何使用CheckBox：

[例5.18]

<%@ Page Language="C#" AutoEventWireup="True" %>

初始界面如图5.28所示。

图5.28 CheckBox控件运行初始界面

当选择“与帐单地址一样后”，运行的结果如图5.29所示。

图5.29 CheckBox控件运行结果界面

5.2.2.2

单选控件

使用单选控件的情况跟使用复选控件的条件差不多，区别的在于：单选控件的选择可能性不一定是两种，只要是有限种可能性，并且只能从中选择一种结果，原则上都可以用单选控件(RadioButton)来实现，此控件在控件工具箱中图标为：。

单选控件主要的属性跟复选控件也很类似，也有id属性、text属性，同样也依靠Checked属性来

152

程序设计教程

判断是否选中，但是与多个复选控件之间互不相关的情况不同，多个单选控件之间存在着联系，要么是同一选择中的条件，要么不是。所以单选控件多了一个GroupName属性，它用来指明多个单选控件是否为同一条件下的选择项，GroupName相同的多个单选控件之间只能有一个被选中。

通过设置Text属性指定要在控件中显示的文本。该文本可显示在单选按钮的左侧或右侧。设置TextAlign属性来控制该文本显示在哪一侧。如果为每一个RadioButton控件指定了相同的GroupName，则可以将多个单选按钮分为一组。将单选按钮分为一组将只允许从该组中进行互相排斥的选择。

注意：还可以使用RadioButtonList控件。对于使用数据绑定创建一组单选按钮而言，RadioButtonList控件更易于使用，而单个RadioButton控件则能够更好地控制布局。

若要确定RadioButton控件是否已选中，请测试Checked属性。以下示例说明如何使用RadioButton

控件为用户提供一组互相排斥的选项。

[例5.19]

<%@ Page Language="C#" AutoEventWireup="True" %>

第5章 HTML控件和Web服务器控件

153

运行结果如图5.30所示。

图5.30 RadioButton控件运行界面

5.2.3 列表控件

列表框(ListBox)是在一个文本框内提供多个选项供用户选择的控件，它比较类似于下拉列表，但是没有显示结果的文本框，此控件在控件工具箱中的图标为：。实际中列表框很少使用，大多数情况下都使用列表控件DropDownList来代替ListBox加文本框的情况。

列表框的属性SelectionMode，选择方式主要是决定控件是否允许多项选择。当其值为时，表明只允许用户从列表框中选择一个选项；当值为ion 时，用户可以用Ctrl键或者是Shift键结合鼠标，从列表框中选择多个选项。

DataSource：说明数据的来源可以为数组、列表、数据表。

AutoPostBack：设定是否要致能OnSelectedIndexChanged事件。

Items：传回ListBox Web控件中ListItem的参考。

Rows：设定ListBox Web控件一次要显示的列数。

SelectedIndex：传回被选取到ListItem的Index值。

SelectedItem：传回被选取到ListItem参考，也就是ListItem本身。

SelectedItems：由于ListBox Web控件可以复选，被选取的项目会被加入ListItems集合中；本属性可以传回ListItems集合，只读。

SelectionMode：设定ListBox Web控件是否可以按住“Shift”或“Control”按钮进行复选，默认值为“Single”。

方法DataBind：把来自数据源的数据载入列表框的items集合。

154

程序设计教程

[例5.20] 基本的ListBox 控件用法：

<%@ Page language="c#" Codebehind="" AutoEventWireup="true"

Inherits="x" %>

ListBox控件示例

请选择城市

运行的结果如图5.31所示。

图5.31 ListBox控件运行界面

这里将ListBox的SelecttionMode属性设为“Multiple”，是为了可以进行多项选择。

5.2.4 其他Web控件

另有三个使用较多的Web控件：重复列表控件Repeater、数据列表控件Datalist和数据表格控件DataGrid将在本书第9章中结合数据库的使用时详述，在此不再讲述。

【本章小结】

本章首先介绍了服务器端的html控件，虽然它们的功能都可以以简单的html语言来实现，但是在中依然提供了对它们的实现。以html语言书写和以服务器端控件的实现在思维方式上已经有了很大的不同，对于html语言而言，只是一种标识；而对服务器端html控件而言，却已演变成为一段程序，一个对象。两者的区别不仅仅是，一个后缀名为.html，另一个为.aspx。html文件依赖于服务器端对标识的解释执行，html控件却可以被编译执行，两者在效率上的差异不言而喻。

第二节主要讲述了几个服务器端的控件、它们的校验、取值方法等，从中我们可以看到中各种控件功能是非常强大的。

【习题】

1) 简述HTML控件和WEB服务器控件的区别。

2) 简述HTML控件和的工作原理。

3) 简述HTML控件常用属性及用法。

4) 简述基本的HTML控件及其用法。

156

程序设计教程

5) 简述基本的WEB服务器控件及用法。

【上机操作题】

利用本章学习的HTML控件和WEB服务器控件的知识，编写一个简单的科学计数器程序。