第 3 章 asp.net 服务器端控件

第 3 章 ASP.NET 服务器端控件

本章要点了解 Web Form 的基本概念了解控件基本概念了解 HTML 普通控件了解 HTML 服务器端控件掌握 Web 控件的使用方法

3.1 Web Form 的基本概念

在 ASP.NET 中，一个网页或窗口被看成是一个 Web Form( 网页表单 ) 。 Web Form 把 Web 应用程序的用户界面分割成两部分：可视化用户组件界面 (Visual Component) 部分和接口逻辑 (User Interface Logic) 部分。其中，前者指包含 HTML 标记及服务器端控件声明的部分（也就是浏览器中看到的部分），这部分就好像是一个大容器，开发者可以在其中放入各种 ASP.NET 控件。而后者是指由开发者编写的用于与网页表单交互的代码。正如第一章所介绍的那样：如果使用普通的文本编辑器进行设计，则上述两个部分放在同一个文件中，并以 ASPX 作为后缀。如果使用的是 Visual Studio.NET 进行设计，则可视化组件与接口逻辑将分处于不同的文件中。

3.2 控件概述

控件 : 普通 HTML 控件、 HTML 服务器控件、 Web 服务器控件、自定义控件

在 ASP 中使用的 HTML 普通控件有 input 类型( 具体有： button checkbox file hidden image password radio reset submit text) ， select 和 textarea 类型， ( 严格地说，以上所列 12 种控件仅是 HTML 标记，还谈不上是控件，在不和 Script 脚本配合的情况下，仅有属性，不具有对象以及事件和方法的处理 ) 。在 ASP.NET 中仍然兼容这些控件，同样可以使用原先的这些标注及相应的各种属性，按照语法规则，编写客户端的页面文档

3.2.1 HTML普通控件

脚本代码如下：<HTML><HEAD><TITLE>biaodan</TITLE>

<meta content='text/html; charset=gb2312' http-equiv='Content-Type'>

<style type=“text/css”>

body {font-family: 宋体 ; font-size:20px}

</style>

<script language=“JavaScript”>

function fCheck()

{ alert(“ 您输入的姓名：” + document.form1._xm.value);

}

</script></HEAD>

<BODY bgColor=#D9DCFF>

<P align=center><B><FONT color=#8000ff face= 华文彩云 ><big><big><big>

欢迎您进入紫莎调查网 </big></big></big></FONT></B></P>

<FORM action='http://stu.jxyd.net/099/Debug.aspx' method=post name=form1>

<P align=center><B> 请输入您的姓名 :</B> <INPUT name=_xm type=text size=12></P>

<P align=center><B> 请输入通行密码 :</B> <INPUT name=2mm type=password size=12></P>转下页

【例【例 3-13-1 】】 1212 种种 HTMLHTML 普通控件应用普通控件应用

<P align=center><B> 性别 :</B>

<INPUT name=3r type=radio value=' 男 ' checked> 男<INPUT name=3r type=radio value=' 女 '> 女 </P>

<P align=center><B> 请选择您喜欢的颜色 :</B>

<INPUT name=4c type=checkbox value=' 红 ' checked> 红 <INPUT name=4c type=checkbox value=' 黄 '> 黄 <INPUT name=4c type=checkbox value=' 绿 '> 绿 <INPUT name=4c type=checkbox value=' 蓝 ' checked>

蓝 </P>

<P align=center><B> 请选择您喜欢的饰物 :</B> <SELECT name=5s>

<OPTION selected value=' 毛绒玩具 '> 毛绒玩具 </OPTION>

<OPTION value=' 八音盒 '> 八音盒 </OPTION>

<OPTION value=' 神奇书包 '> 神奇书包 </OPTION></SELECT> </P>

<P align=center><B> 请传入文件 : <INPUT name=6f type=file size=30></B></P>

<P align=center><B> 请输入您的要求和意见 : </B>

<BR><TEXTAREA name=7t cols=56 rows=4></TEXTAREA><BR>

<INPUT name=8h type=hidden value=' 祝老师身体健康，工作顺利 !'>

<P align=center>

<INPUT name=ok type=submit value=' 提交 '>

<INPUT name=re-input type=reset value=' 重选 '>

<INPUT name=img type=image src='img\submit.gif'>

<INPUT name=b type=button value=' 检查姓名输入 ' onclick='fCheck();'>

</P>

</FORM></BODY></HTML>

3.2.2 HTML 服务器端控件

ASP.NET 改进了 HTML ，将 HTML 普通控件封装为服务器控件。在Server 端，控件被解释成 HTML 代码，然后再发送到客户端。服务器控件，是在普通控件的标注中加上 runat=server 的属性项，在客户端形成的页面上多了一些内部的代码。 HTML 服务器控件是在 HTML普通控件和 Web 服务器控件之间的折衷，它们使用熟悉的 HTML 元素，提供有限的对象。

虽然 HTML 服务器控件和 HTML 普通控件在显示的形式上互相对应，但在基于事件的驱动和基于控件的编程方面都有了更大的改变。

1、概述

2、 HTML 服务器端控件与 HTML 标记的关系

HTML 服务器端控件由标准的 HTML 标记衍生而来，几乎与 HTML 标记有一一对应的关系，因此二者的属性也基本相同。 HTML 服务器端控件与 HTML 标记的区别在于： HTML Server 控件的功能更为强大且在服务器端运行。将 HTML 标记转化为 HTML Server 控件的方法为：在需要转换为 HTML 服务器端控件的 HTML 标记中加入 runat=“server” 及 id=“XXX” 属性即可。有些还需要在 HTML标记结尾处添加上一个“ /” 作为结束标记。表 3-2 列出一 HTML Server 控件与 HTML 标记的对应关系。由于 <Body> 、<Font> 、 <Div> 、 <Span> 、 <HR> 等标记难以归类，故ASP.NET 将它们之统称为 HtmlGenericControl 控件。


课堂实训 1

将 HTML 标记转换为 HTML Server 控件。用户输入值，提交后显示输入值。操作分析：将 HTML 中的文本框、提交按钮转换为 HTML 服务器端控件后，由 ASP.NET 程

序处理这些控件。

3 、使用 HTML 服务器端控件的原因 1 、用于将页面显示代码和页面控制代码分离，更便于页面的编写和维护

2 、具有”回送”功能3 、既支持服务器端事件，又支持客户端事件


3.2.3 HTML 服务器端控件的通用属性

1 、 Attributes 属性——获取或设置 HTML Server控件的所有属性值

语法格式：对象名称 . Attributes(“ 属性名称” )= 值

使用说明：属性名称是指控件所支持的属性名称而定。对于不同控件可能含有不同的属性名称。


2 、 Style 属性——获取或设置 HTML Server 控件的 CSS 样式属性设定值

语法格式：对象名称 . Style(“CSS 属性” )=值

使用说明： CSS 属性是指控件所支持的 CSS属性名称而定。对于不同控件可能含有不同的属性名称。 CSS 样式所支持的属性的确非常多，但是具有一定的规律。用户可以参考 CSS 样式表手册（如在 VS.NET 中以“使用 CSS 样式”为名的联机帮助）。

3 、 Parent 属性——引用在执行期间的父对象来源，也可以指向父对象

在 Web Form 网页中设计 HTML 控件时，采用容器（ Container ）架构来创建对象，所以在 HTML Server 控件的引用过程中可以引用父对象。这样既可扩展程序的处理能力，又可在执行期间删除对象。

语法格式：引用父对象：对象名称 . Parent获得父对象引用的类的来源：对象名称 . Parent.Tostring()产生父对象的实例： Dim 对象名称 as Object= 对象名称 .

Parent

课堂实训 2

通过 HTML Server 控件的 Parent 属性引用其父对象。当用户单击“显示父对象所在的类”按钮时，在标签中显示出按钮的父对象（即层myDIV ）所在的类名；当用户单击“删除我自己”按钮时，此按钮被删除；当用户单击“添加一个新按钮”按钮时，会在层myDIV 中添加一个新按钮。

3.2.3 HTML 服务器端控件的通用属性4 、 Controls 属性——引用指定的 HTML Server 控件在执行期间的子对象集合语法格式：引用某个子对象：对象名称 . Controls(i)获得子对象引用的类的来源：对象名称 . Controls(i).Tostring() 5 、 Disabled—— 用于启用或停用 HTML Server 控件语法格式：对象名称 . Disabled =True | False 使用说明： Disabled属性设为 True 时，将指定的 HTML Server 控件设定

为停用状态。6 、 Visible—— 用于是否显示一个 HTML Server 控件语法格式：对象名称 . Visible =True | False 使用说明： Visible 属性设为 True 时， HTML Server 处于可见状态。 7 、 HTML Server 输入控件的共有属性HTML Server 控件可分为两类：一类是基于 HTML Input 标记的输入控件，其余

是容器控件。输入控件所共有的属性主要有： Value 与 Type 属性。（ 1 ） Value——获取或设置与输入控件关联的值。（ 2 ） type——获取输入控件的类型。


8、 HTML Server 容器控件的共有属性HTML Server 容器控件的共有属性为 InnerHtml 和InnerText 属性。这两个属性用于设置 <标记 >和 </标记 >之间的 HTML内容或纯文本。

语法格式：对象名称 .InnerHtml=字符串对象名称 .InnerText= 字符串使用说明： InnerHtml 是用 HTML 格式来显

示标记间的内容 , InnerText 是用纯文本来显示标记间的内容 ( 包括 HTML 标记 ) 。

3.2.4 HTML 服务器端控件的主要事件

两类主要事件： 1 、 ServerClick事件——单击控件时引发； 2 、 ServerChange 事件——值改变时引发；

3.2.5 AutoPostBack的传回事件机理

ASP.NET 的一个最大的变革：是改变到事件驱动和基于控件的编程。这一改变允许采用 Windows 应用程序相同的结构样式创建 Internet 程序。增加了一个__doPosyBack 的客户端 Script函数：

<script language="javascript">

function __doPostBack(eventTarget, eventArgument) {

var theform = document.MyForm;

theform.__EVENTTARGET.value

= eventTarget.split("$").join(":");

theform.__EVENTARGUMENT

.value = eventArgument;

theform.submit();

} </script>

Web页面请求

返回 HTML输出

页面传回

返回 HTML输出

客

户

端

ASP.NET从.aspx代码中创建页面对象

ASP.NET运行 Page.Load事件处理程序

显示最终页面

ASP.NET从.aspx代码中创建页面对象

ASP.NET运行 Page.Load事件处理程序

ASP.NET运行已触发的事件处理程序

显示最终页面

表 3-2 HTML 服务器控件与 HTML 标记的对应表示

返回

类名 HTML标识表示

Html Anchor <a>

Html Button <button>

Html Form <form>

Html Generi cControl <di v| span| others>

Html I mage <i mg>

Html I mageButton <i nput type=i mage>

Html I nputButton <i nput type=button><i nput type=submi t><i nput type=reset>

Html I nputCheckBox <i nput type=checkbox>

Html I nputFi l e <i nput type=fi l e>

Html I nputHi dden <i nput type=hi dden>

Html I nputRadi oButton <i nput type=radi o>

Html I nputText <i nput type=text> <i nput type=password>

Html Sel ect <sel ect>

Html Tabl e <tabl e> <tr> <th> <td>

Html TextArea <textarea>

3.2.6 HtmlAnchor

HtmlAnchor( 如表 3-3 所列 )表示 HTML<a> 标记的服务器端对应物。这个标记创建到另一个页面的链接或者一个书签。格式如下：

<a id=“MyAnchor” href=“http://www.jxyd.net”name=“bookmarkname”

target=“_blank” title=“My Site” runat=“server”>链接教学园地网站</a>

成员说明

Href 当单击超链接时浏览器要去的目的 URL

Name 书签名，可以被用来标识页面中一个特定的位置。可以通过添加

#book-markname到请求中 URL页面的末尾链接到这个位置

Target 目的页面将被打开的目标窗口或框架。这可以命名一个特殊的框架

或使用一个特殊的常量如_bl ank（新窗口）、_parent（包含的框架

集）、_sel f（当前窗口）或_top（顶级窗口）

Ti t l e 鼠标移上后的提示显示

表 3-3 HtmlAnchor 成员返回

http://www.jxyd.net/

http://www.jxyd.net/

3.2.7 HtmlButton

HtmlButton( 如表 3-4 所列 )表示 <button> 标记的服务器端对应物，它在 Internet Explorer 4.0 或更高版本中得到支持。它创建一个可包含任何 HTML 内容、包括图像的标准按钮。在下面的例子中，这个按钮的表面有两个图像、一些粗体文本和两条水平线：

<button id=“MyButton” runat=“server” type=“button”>

<img src=“img/jxyd8831.gif”><hr><b>带横线的按钮 </b>

</button>

成员说明

Src 将被显示的图像的路径和文件名。这可以是一个绝对、相对或虚拟路径

的链接

表 3-4 HtmlButton 成员

返回

3.2.8 HtmlForm

HtmlForm( 如表 3-5 所列 )表示 <form> 标记的服务器端对应物。所有的 ASP.NET 控件必须包含在一个服务器端 HtmlForm 控件中，以便代码能够访问它们。然而，很少需要和 HtmlForm 本身直接交互。在写代码时不要遗忘， HtmlInputControl 类控件一定要嵌入在 HtmlForm 中。格式如下：

<form id=“MyForm” method=“POST” runat=“server”>

[其他 HtmlInputControl 类控件或内容布置在这儿 .]</form>

成员说明

Method 指示浏览器如何把数据发送到服务器

Enctype 指定当把数据发送到服务器时浏览器将使用的编码类型的一个字符串。

如果是上传文件,应写为mul ti part/ form-data 。

表 3-5 HtmlForm 成员

返回

3.2.9 HtmlGenericControl

HtmlGenericControl( 如表 3-6 所列 )表示其他专用类，如 <div> ， <span>等所表示的 HTML 服务器控件。例如：

< div|span|others

id=“MyControl” runat=“server”>

[其他内容布置在这儿 .]

</div|span|others>

成员说明

TagName 类似于由所有 HTML控件所显示的基本 TagName属性，如基于服务

器的<di v>或基于服务器的<span>标记。

表 3-6 HtmlGenericControl 成员

返回

3.2.10 HtmlImage

HtmlImage( 如表 3-7 所列 )表示 HTML<img> 标记的服务器端对应物，它显示一个图片（典型情况为一个 GIF ， JPG 或 PNG 文件）。例如：

<img id=“MyImage” alt=“jxydSite” align=“top” border=“3”

src=“img/jxyd8831.gif” runat=“server” />

单独的 / 控件闭结束符如果省略，系统会自动补上。

成员说明

Al t 当用户用鼠标掠过图片时将在浏览器中显示的文本，如浏览器不支持图

片，以及在 I nternet Expl orer 中显示的弹出 Tool Ti p文本

Al i gn 相对于页面中图像的对齐方式（左、上或右）或相对于页面中内容的对

齐方式（顶、中、下）

Border 设置边框的宽度，以像素计

Hei ght 和Wi dth 以像素为单位设置图像的比例。要避免变形，通常不指定这些属性，让

图像自动使用它的固有尺寸更为容易


的链接

表 3-7 HtmlImage 成员返回

3.2.11 HtmlInputImage

HtmlInputImage( 如表 3-8 所列 )表示 HTML<input type=“Image”> 标记的服务器端对应物。例如：<input type="Image" id="MyImageButton" src="img/submit.gif"

runat="server" onServerClick=“i_Click” />

成员说明


的链接

表 3-8 HtmlInputImage 成员

返回

3.2.12 HtmlInputButton

HtmlInputButton( 如表 3-9 所列 )表示 HTML<input type=“button”> ， <input type=“submit”> 和 <input type=“reset”> 标记的服务器端对应物。例如：<input type=“button” id=“MyInputButton” value=“ 提交” runat=“server”

onServerClick=“b_Click” />

成员说明

Type 标识按钮标记的类型（按钮、提交或重置）

表 3-9 HtmlInputButton 成员

返回

3.2.13 HtmlInputCheckBox

HtmlInputCheckBox( 如表 3-10 所列 )表示 HTML<input type = “checkbox”> 标记的服务器端对应物，它创建一个可被选中或不被选中的复选框。这个控件没有任何相关联的标题文本，相反，需要把内容添加到此控件标记旁。格式如下：<input type=“checkbox” id=“MyCheckBox1” checked runat=“server” />复选框 1 的内容。

成员说明

Checked 控件是否被勾选，为 True或 Fal se。

表 3-10 HtmlInputCheckBox 成员

返回

3.2.14 HtmlInputFile

HtmlInputFile( 如表 3-11 所列 )表示 HTML<input type = “file”> 标记的服务器端对应物，它允许用户上传一个文件。格式如下：<input type=“file” id=“MyFileUploader” accept=“image/*” size=“30” runat = “server” />

成员说明

Accept 一个用逗号分隔的MI ME编码列表，用于限制用户选择的文件类型。MI ME

编码技术在应用程序表示一类应用程序（如视频、图像或文本）、类型

表示一个独特的MI ME（或全部为星号），采用应用程序/类型的格式

Si ze 设置在字符列中文件－路径选择文本框的宽度

MaxLength 设置路径允许的最大字符数

PostedFi l e 允许你把要传的文件作为 HttpPostedFi l e 对象访问。使用

PostedFi l e. SaveAs方法把文件保存到服务器上的一个位置。如果用户

没有选择文件，这个属性将被设置为 Nothi ng

表 3-11 HtmlInputFile 成员返回

3.2.15 HtmlInputHidden

HtmlInputHidden( 如表 3-12 所列 )表示 HTML<input type=”hidden”> 标记的服务器端对应物，它允许你在传回之间存储信息。在 ASP.NET 编码中，使用 page.ViewState 集合来存储任何需要保留的信息通常是更容易的。格式如下：<input type=“hidden” id=“MyHiddenInfo” value=“[隐藏的数据 ]” runat=“server” />

成员说明

Val ue 包含隐藏的信息（作为一个字符串）

表 3-12 HtmlInputHidden 成员

返回

3.2.16 HtmlInputRadioButton

HtmlInputRadioButton( 如表 3-13 所列 )表示 HTML<input type=”radio”> 标记的服务器端对应物。通常，你将添加一组单选按钮一遍一次仅允许选中一项。下面的例子显示了称为 GenderGroup 的一组中的两个单选按钮。注意，这个控件没有任何相关联的标题文本，相反，需要把内容添加到控件标记的旁边。格式如下：<input type=“radio” id=“MyRadio1” name=“GenderGroup” runat=“server” checked=”True” />Male<input type=“radio” id=“MyRadio2” name=“GenderGroup” runat=“server” />Female

成员说明

Name 标识单选按钮组。仅可以选择组中的一个单选按钮

Checked 控件是否被点选，为 True或 Fal se。

表 3-13 HtmlInputRadioButton 成员

返回

3.2.17 HtmlInputText

HtmlInputText( 如表 3-14 所列 )表示 HTML<input type=“text“> 标记的服务器端对应物，它允许单行文本框输入。格式如下：<input type=“text” id=“MyText” maxlength=“20” size=“40” value=“默认文本”runat=“server” />

成员说明

Type 可以是标准“文本“，或“密码“，它使用星号*来屏蔽用户输入

Maxl ength 用户可以键入到文本框中的最大字符数

Si ze 设置文本框的字符宽度

表 3-14 HtmlInputText 成员

返回

3.2.18 HtmlSelect

HtmlSelect( 如表 3-15 所列 )表示 HTML<select> 标记的服务器端对应物，它被用于创建一个项目列表。这可以是一个一次显示一项的下拉列表或一个多行列表框。它也可以被设置来允许单个或多个选择。格式如下：<select id=“MyList” size=“1” runat=“server”>

<option value=“1”>Option 1</option><option value=“2”>Option 2</option><option value=“3”>Option 3</option></select>

成员说明

DataSource，

DataTextFi el d

和 DataVal ueFi el d

允许把列表绑定到任何数据源上。如果正在绑定到一个具有一个以上字

段的数据源上，可以把一个字段绑定到选项文本，另一个字段绑定到每

个选项的隐藏值属性中

Si ze 显示的项目数。当设置为 1时，Html Sel ect 控件将变成一个下拉列表

Mul ti pl e 为 True时，用户一次可以选择一个以上的列表项。要在控件声明中指

“定这一点，应包括属性 mul ti pl e” 。一个多选择列表控件将自动成为

一个列表框而不是一个下拉列表

Sel ectedI ndex 以 0开始的索引数，指示或设置当前选定的项目

Sel ectedI ndi ces 一组选定的索引数，当启用多项选择时，可以使用它

Sel ectedVal ue 返回当前选定项的文本

I tems 提供描述列表中所有项的System. Web. UI . WebControl s. Li stI te对象的

一个集合。可以检查每项的 Sel ected属性以弄清楚它当前是否被选中。

可以使用 Text 和 Val ue项来获取或设置在所选项的文本或它的值属性

中的信息

表3-15 Htm

lSelect

成

员

返回

3.2.19 HtmlTable

格式如下：<table id=“programmaticID” align=“left | center | right”

bgcolor=“bgcolor” border=“borderwidth”

bordercolor=“bordercolor”

cellpadding=“spacing_within_cells”

cellspacing=“spacing_between_cells”

height=“tableheight”

width=“tablewidth” runat=“server”>

<tr>

<td></td>

</tr>

</table>

成员说明

Al i gn 相对于页面的一个表的对齐特性（左、顶部或右）或者相对于页面内容

的一个表的对齐特性（顶部、中间、底部）

BgCol or 表中所有单元格的背景颜色

Border 以像素计的边框宽度（默认值－1意味着没有边框）

BorderCol or 作为一个彩色代码或名称（例如” 红色” ）的边框颜色

Cel l paddi ng 在单元格和它的内容之间的空白，以像素计

Cel l Spaci ng 表中单元格之间的空白，以像素计

Hei ght 和Wi dth 表的高度和宽度，以像素计。也可以指定一个百分数，方法是给控件标

记中的数追加一个百分号。百分数以浏览器窗口的高度或宽度相关

Rows 提供描述表中各个<tr>元素的 Html Tabl eRow对象的一个集合。可以使

用方法，例如 Add，I nsert 和 Remove来动态地配置一个表

表 3-16 HtmlTable 成员

返回

3.2.20 HtmlTextArea

HtmlTextArea( 如表 3-19 所列 ) 类表示一个多行文本框，它是 HTML<textarea>标记的服务器端对应物。格式如下：<textarea id=“MyTextArea“ cols=“40“ rows=“5“ runat=“server“>初始文本</textarea>

成员说明

Col s 文本区的字符行宽度。如未设置，浏览器将应用一个默认尺寸

Rows 文本区的显示行数。如未设置，浏览器将应用一个默认尺寸

Val ue 可以被用来得到或设置文本区中的文本。

也可以在开始和结束标记之间插入初始文本

表 3-19 HtmlTextArea 成员

返回

【例 3-2】 HTML 服务器控件应用

3.3 Web 服务器控件

ASP.NET 的服务器端控件也称为Web 控件，是基于更加抽象的、具有更强的面向对象特征的设计模型，它提供了比 HTML 服务器控件种类更多、功能更强大的控件集合。它位于 System.Web.UI.WebControls名称空间中，是从WebControl 基类中直接或间接派生出来的。包括传统的表单控件（如： TextBox、 Button）以及其他更为抽象更高级的控件（如： Calendar 、 DataGrid等）。微软官方文件指出：就 ASP.NET 网页应用而言， HTML 服务器控件足以满足要求；但也强调 web 服务器控件提供了更为强大的功能，拥有类似 XML 的语法，且其使用规则与 VB控件使用规则类似。


1 、Web 服务器控件的特点•对象模型更丰富，提供了类型安全的编程能力。对象模型更丰富，提供了类型安全的编程能力。•能够自动检查浏览器，根据浏览器类型创建适于浏览器的能够自动检查浏览器，根据浏览器类型创建适于浏览器的输出。输出。•通过使用模板（如数据列表控件），可以由开发者自定义通过使用模板（如数据列表控件），可以由开发者自定义一些控件的外观。一些控件的外观。•一些控件具有两种事件处理方式：一种是立即传到服务器一些控件具有两种事件处理方式：一种是立即传到服务器进行处理（消息回送）；另一种是将信息缓存，等到提交进行处理（消息回送）；另一种是将信息缓存，等到提交表单时再处理。表单时再处理。•嵌套控件的事件能够传递到包含它的容器控件。嵌套控件的事件能够传递到包含它的容器控件。

WebControl

Web Forms 增强控件

Button

CheckBox

HyperLink

Image

ImageButton

Label

LinkButton、Literal

Panel、PlaceHolder

RadioButton

Table、TableCell

TableRow

TextBox

Calendar

AdRotator

XML

ListenItem

DropDownList

ListBox

CheckBoxList

RadioButtonList

BaseValidator

CompareValidator

CustomValidator

RangeValidator

RegularExpressionValidator

RequireFieldValidator

ValidationSummary

BaseDataList

DataCntrol

LisbControl

Repeater

DataGrid

DataList


2 、Web 服务器控件的基本使用形式 <asp: 控件类型名属性名 1= 属性值 1 属性名 2= 属性值

2 … runat=“server“ />

注：结束标志也可为 </asp: 控件类型名 >

asp: 控件类型名要连写，中间不能有空格。3 、Web 服务器控件的分类

Web Forms 基本控件ListControl 列表控件BaseDataList 数据列表控件增强控件（多信息控件） BaseValidator 验证控件


4、Web 服务器控件的基本属性属性说明

AccessKey “定义控件的加速键。比如，假如指定控件的 AccessKey” “属性值之 W”，用户就可以通过按【ALT+W】键来访问该控件。不是所有的浏览器都支持这个属性

Attributes 控件属性集合。只能用于编程时，而不能在声明一个控件时指定这个属性

BackColor “控件的背景色。取值可以用颜色的英文名字，如 yellow”，也可以用 16

进制数表示，如“ ffffff”

BorderWidth “控件边界的宽度，单位为 pixel”。一些较早的浏览器不支持此属性

BorderStyle “控件边界的样式。可能的取值有：NotSet” “、None” “、Dotted” “、Dashed”、“ Solid” “、 Double” “、 Groove” “、 Ridge” “、 Inset” “和 OutSet”

CSSClass 控件使用的风格纸类

CSSStyle 控件使用的风格纸类型的属性的集合。这个属性只能用于编程时，而不能在声明一个控件时指定这个属性。如果在控件中已经使用了定义外观样式

“的属性（如 BackColor”），那么在 CSSStyle中的相应属性就会被覆盖

Enabled “指定控件能否被用户访问。取值为 Boolean” 型

Font-Bold “指定控件上的文本是否为加粗显示。取值为 Boolean” “型，默认值为 false”

Font-Italic “指定控件上的文本是否为斜体显示。取值为 Boolean” “型，默认值为 false”

Font-Name 指定控件上的文本的字体。一些浏览器不支持为单个的控件设置字体

Font-Names 控件上文本的字体的一个列表，用于浏览器作优先选择。如果浏览器不能识别指定的字体，则选择列表中的下一个字体

Font-Overline “指定控件上文本的上方是否有一根线段。取值为 Boolean” 型，默认值“为 false”

Font-size 字体的大小。取值从 1到 7

Font-Strikeout “指定控件上文本的中间是否有一根线段穿过。取值为 Boolean” 型，默“认值为 false”

Font-Underline “指定控件上文本的下方是否有一根线段。取值为 Boolean” 型，默认值“为 false”

Forecolor 指定控件上文本的颜色。一些较早的浏览器不支持此属性

Height “控件的高度，单位为 pixel”。只要 IE4.0及以上版本支持这个属性

TabIndex “指定用户按 Tab” 键时经过控件的顺序。默认值为 0。如果多个控件的这个属性具有相同值，则顺序为声明这些控件时的顺序

ToolTip 指定当用户鼠标停留在控件上时显示的提示文字。不是所有的浏览器都支持这个属性

Width “控件的绝对高度。默认的单位为字符数，也可使用 pixel”（如 100px）或者百分比形式（如 40％）。


5、Web 服务器控件的通用事件

事件对应的Web控件

Cl i ck，Command Button I mageButton

TextChange TextBox

CheckChanged CheckBox Radi oButton

Sel ectI ndexChanged DropDownLi st Li stBox CheckBoxLi st Radi oButtonLi st

3.3.1 标签控件 Label 与 Literal 控件标签控件用于显示文本，用户不能直接对这些文本进行编辑。1 、 Label 控件语法声明：<ASP:Label Runat="Server" Id="…" Text="…" /> 2 、 Literal 控件该控件也是用于显示文本的，其作用主要有：动态填入字符串显示；结合数据字段，将数据字段内容转换成网页字符串直接显示。但与 Label 控件不同的是： Literal 控件不能使用一般 Web Server 控件的共同属性 Style ，即不支持 CSS 。

语法声明：<ASP:Literal Runat="Server" Id="…" Text="…" />

3.3.2 控钮控件 Button、 LinkButton、 ImageButton1 、 Button控件语法声明：<ASP:Button Runat="Server" Id="…" text="…" CausesValidation="True | Fal

se" CommandName="…" CommandArgument="…" OnMouseOver="…" OnMouseOut="…" Onclick="…" /> 属性说明：CausesValidation：给出或设置按钮被单击时，是否启动验证控件进行验证。默认情况下，单击Button控件时会执行页的验证操作。

Text ：给出或设置显示在按钮上的文本。CommandName ：给出或设置Button控件的命令名称。CommandArgument ：给出或设置Button控件的命令参数。事件说明： Onclick：设置按钮被单击后所触发的服务器端事件过程的名称，处理常量接收到 Eventargs 。有时需要对 CommandName 或 CommandArgument 属性进行处理。

OnMouseOver 、 OnMouseOut事件中可通过 style 属性对 onmouseover="this.style.backgroundColor='lightgreen'" onmouseout="this.style.backgroundColor='lightblue'"

3.3.2 控钮控件 Button、 LinkButton、 ImageButton2 、 LinkButton控件在功能上， LinkButton控件与 Button控件完全相同，定义方法也相同。两者之间唯一的区别是， LinkButton控件在外观上显示为超链接。

语法声明：<ASP:LinkButton Runat="Server" Id="…" text="…" CausesValidation="True | False"

CommandName="…" CommandArgument="…" OnMouseOver="…" OnMouseOut="…" OnClick="…"… />

3、 ImageButton控件主要用于动态显示图片，同时可设置其 Click 事件，单击图片可将Web 表单回传至服务器，触发相应的事件处理程序。

语法声明：<ASP:ImageButton Runat="Server" Id="…" ImageUrl="…" CommandName

="…" CommandArgument="…" CausesValidation="True| False“ OnMouseOver="…" OnMouseOut="…" OnClick="…"/>

使用说明：在 VS.NET 的控件工具箱“Web 窗体”选项卡中的“ ImageButton” 控

件默认为提交按钮，也就是说它被单击后，会触发表单的客户端事件“ OnSubmit” 。

课堂实训 3控钮控件 Button、 LinkButton与 ImageButton控件的使用。单击按钮后，会弹出对话框表明表单被提交，同时标签中的字体改为“隶书”。单击图像按钮后，也会会弹出对话框表明表单被提交，同时图像按钮中所显示的图片交替变换。在单击两个链接按钮后，可以显示出单击它们的顺序。

操作分析：识别对两个链接按钮的单击次序是通过设置链接按钮的 CommandName 属性实现

的。在设计阶段，设置两个链接按钮的 CommandName 属性均为“ first” 。当单击第一个按钮时，设置另一个按钮的 CommandName 属性为“ second” 。

3.3.3 文本框控件 TextBox 语法声明：<ASP:TextBox Runat="Server" Id="…" Text="…" AutoPostBack="True | False" Columns="…" maxLength="…" ReadOnly="…" Rows="…"TextMode="Single | Multiline | Password" Wrap="True | False" OnTextChanged="…" />

属性说明：Text ：给出或设置控件中的文本。TextMode ：给出或设置控件的类型，其中 Single 为单行文本框， Multiline 为多行文本框，

Password为密码框。该属性的默认值为 Single 。Rows ：当 TextMode 属性为 Multiline （多行文本框）时， Rows 属性才有效。用于给出

或设置控件的高度，单位为行。Columns ：给出或设置控件的宽度，单位为字符。MaxLength：给出或设置控件最多可容纳的字符数。ReadOnly ：给出或设置控件内容的只读性。Wrap：给出或设置当控件内容超过控件宽度时，是否自动换行。AutoPostBack：默认值为 False 。当该属性设为 True 时，表示当浏览器中的 TextBox控

件内容变化后，会将Web 表单立即回传给服务器，无须等待用户通过单击提交按钮进行表表单提交。

事件说明：OnTextChanged：指定控件中的内容与最近一次上传的内容不同时，所触发事件过程的名

称。

课堂实训 4文本框控件 TextBox的使用。将输入的文本信息保存到多行文本框中。操作步骤：（ 1 ）新建一个名称为“ 4-4” 的项目，并将该项目下的默认窗体改名

为“ ex4-4.aspx” 。（ 2 ）界面设计。（ 3）编写事件处理程序

3.3.4图像框控件 Image

Image 控件用于在网页中显示图片。由于它本身不具有将网页回传至服务器的能力，也就是说它没有任何用户触发的事件。

语法声明：<ASP:Image Runat="Server" Id="…" ImageUrl="…" AlternateText="…" ImageAlign="…"/>

属性说明：AlternateText ：用于给出或设置替换文本。ImageAlign：指定图形相对于其周围文字的排列方式。可取

值有：“ NoSet” 、“ AbsBottom” 、“ AbsMiddle” 、“ BaseLine” 、“ Bottoom” 、“ Left” 、“ Middle” 、“ Right” 、“ TextTop” 和“ Top”, 默认为“ NoSet” 。

3.3.5 超链接控件 HyperLink

HyperLink控件用于建立动态的文本或图片超链接。语法声明：<ASP:HyperLink Runat="Server" Id="…" Naviga

teUrl="…" Text="…" ImageUrl="…" Target="…" />

属性说明：NavigateUrl ：给出或设置所链接文档的 URL 。ImageUrl ：给出或设置超链接锚点图片源。Text ：给出或设置超链接锚点文本。Target ：给出或设置目标框架（或窗口）名称。例

如将 Target 设为“ _blank” ，可将所链接的文档显示在新窗口中。

3.3.6 复选与单选控件1 、复选控件 CheckBox与 CheckBoxList（ 1 ） CheckBox控件用于建立能够在选中和清除两种状态间切换的复选框。当选定该控件时，其 Checked

属性为 True 。语法声明：<ASP:CheckBox Runat="Server" Id="…" Text="…" AutoPostBack="True | Fals

e" Checked="True | False" TextAlign="…" OnCheckedChanged="…" …/>（ 2 ） CheckBoxList 控件CheckBoxList 控件的作用与 CheckBox控件类似，它是以成组的形式显示复选框。

其功能比 CheckBox更为强大，能支持以数据连接方式建立列表。语法声明：<ASP:ChecktBoxList Runat="Server" Id="…" AutoPostBack="True | False" RepeatColumns="…" RepeatDirection="…" RepeatLayout="…" TextAlign="…"OnSelectedIndexChanged="…" …><ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem>……<ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem></ASP:ChecktBoxList>

3.3.6 复选与单选控件2 、单选控件 RadioButton与 RadioButtonList （ 1 ） RadioButton控件用于创建单选钮。语法声明：<ASP:RadioButton Runat="Server" Id="…" AutoPostBack="True | Fa

lse" Checked="…" GroupName="…" Text="…" OnCheckedchanged="…" … />（ 2 ） RadioButtonList 控件。RadioButtonList 控件的作用与 RadioButton控件类似，但功能更为强

大（如支持以数据连接方式建立列表等）。语法声明：<ASP:RadioButtonList Runat="Server" Id="…" AutoPostBack="True | False"

OnSelectedIndexchanged="…" … ><ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem>……<ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem></ASP:RadioButtonList>

课堂实训 5复选与单选控件的使用，用于实现简单的网上调查表。用户点击单选钮选择所在

的部门，复选框用于决定单选钮的显示方式（水平显示或表布局显示、以一列方式显示或以两列方式显示）。

操作分析：在页面中没有使用任何按钮控件，只要单选或复选控件的状态发生改变，就应

将这种改变回传至服务器，因此单选钮列表控件及三个复选框控件的“ AutoPostBack” 属性必须设为“ True” 。

3.3.7 列表控件 1 、 ListBox控件ListBox控件用于建立可单选或多选的下拉列表。语法声明：<ASP:ListBox Runat="Server" Id="…" AutoPostBack="True | False" SelectionMode="Single | Multiple" OnSelectedIndexchanged="…" …><ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem>……

<ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem></ASP:ListBox>2 、 DropDownList 控件DropDownList 控件的用途和使用方法与 ListBox控件类似，但 DropDownList 控件只支持

单项选择。语法声明：<ASP:DropDownList Runat="Server" Id="…" AutoPostBack="True | False" OnSelectedIndexchanged="…" …><ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem>……

<ASP:ListItem Value="…" Selected="…">文本 </ASP:ListItem></ASP:DropDownList>

课堂实训 6

列表控件的使用，实现一个简单的网上调查表。其中供选择的目的地列表框及选择旅行的方式的下拉列表框内容全部采用程序在页面执行时动态加入。

3.3.8 容器类控件

1 、 Table 、 TableRow、 TableCell 控件Table 、 TableRow 、 TableCell 控件用于建立动态表格。 TableRow控件用于实现表格的每一行，lTableCell 控件用于实现表格的行的每一个单元。它们之间的关系可以表示为：若干个 TableCell构成一个 TableRow ；若干个 TableRow构成一个 Table 。

课堂实训 7

Table 控件的使用，利用程序动态生成一个 Table 。

3.3.8 容器类控件

2 、 Panel 控件、 PlaceHolder 控件PlaceHolder 控是一个容器，用于事先在页面中保留一个位置以便动态增加控件。它没有基于 HTML 的输出，且只能用于为其他控件标记一个位置。在页面执行时，这些控件可以添加到 PlaceHolder 的 Controls集合中。

语法声明：<ASP:PlaceHolder Runat="Server" Id="…" />

3.3.9 增强控件

1 、日历控件 CalendarCalendar 控件用于建立万年历。以显示或供用户选择日期。它有很多功能，提供了多个属性、三个方法和三个事件，使开发更为容易。

语法声明：<ASP:Calendar Id="…" Runat="Server" OnSelectionchanged="…" …/>

课堂实训 8

Calendar 控件的使用，实现一个能提示节日的“万年历”

3.3.9 增强控件

2 、广告交替控件AdRotator 控件提供了一个方便的机制，用来在Web 页上随

机显示广告，从而使广告管理更容易。当用户多次访问或刷新广告交替控件所在的网页时，就可能会看到不同的广告画面。如果用户对某个广告感兴趣，还可以通过单击广告画面链接到另一个网页。

语法声明：<ASP:AdRotator Runat="Server" Id="…" AdvertisementFi

le="…" KeyWordFilter="…" Target="…" OnAdCeated="…" />

课堂实训 9

AdRotator 控件的使用，实现一个具有筛选功能的广告轮换器。当用户不在下拉列表框中选择任何感兴趣的主题时，广告轮换器并未设置筛选功能。只有当用户选择了某个主题后，只有符合该主题的广告才会出现。当用户选择“全部主题”后，筛选又会被取消。

3.3.10验证控件

1 、验证控件的工作原理在 ASP.NET 服务器控件中有一类“验证控件”，用

于对指定的Web 控件检查输入的数据是否符合某些规则（例如必须输入非空数据、数据格式与范围应满足一定的要求等），并在必要时向用户显示信息。使用验证控件可使开发人员避免写太多的客户端验证程序（如 JavaScript脚本）。

3.3.10验证控件

2 、 RequiredFieldValidator 控件用于保证非空输入，即确保用户没有跳过某项。此

控件通过生成客户端的 JavaScript脚本，使用相应的事件处理程序进行验证，因此工作时无须等待回传即可通过浏览器进行实时验证。

语法声明：<ASP:RequiredFieldValidator Id="…" Runat="Ser

ver" ControlToValidate="…" InitiaValue="…" />

3.3.10验证控件

3 、 RegularExpressionValidator 控件用于检查用户输入是否符合给定的规则表达式的格

式，如果不符合 ,就会产生验证错误。该验证类型允许检查可预知的字符序列，如电子邮件地址、电话号码、邮政编码等中的字符序列。要进行验证的表达式放在 ValidationExpression属性中。

语法声明：<ASP:RegularExpressionValidator Id="…" Runat

="Server" ControlToValidate="…" ValidationExpression="…" … />

3.3.10验证控件

5、 RangeValidator 控件用于判断数据是否满足指定的范围条件，并根据判断结果决定是否通过验证。

语法声明：<ASP:RangeValidator Id="…" Runat="Server" ControlToVlidate="…" MaximumValue="…"

MinimumValue="…" MaximumControl:= "…" MinimumControl="…" type="…"… />

课堂实训 10

验证控件的使用，实现对一个简单的用户注册页面进行验证。

3.3.10验证控件

6、 ValidationSummary 控件用于显示尚未通过验证的Web 控件的 ErrorMessage 属性，并不具有验证功能。它集中的收集其它控件产生的错误信息，并将这些信息在页面上的某个位置或以对话框的形式集中的显示。在使用它之前，必须先设定其它验证控件的 ErrorMessage 属性。

语法声明：<ASP:ValidationSummary Id="…" Runat="Serve

r" ShowSummary="True|False" ShowMessageBox="True|False" HeaderText="…" DisplayMode="…" … />

3.3.10验证控件

7 、 CustomValidator 控件调用用户定义的功能来执行标准验证程序不能处理的验证，从而可提供更大的灵活性。自定义函数可以在服务器上或客户端脚本 (JavaScript 或 VBScript) 中执行。对于客户端自定义验证，自定义函数的名称必须在 ClientValidationFunction属性中标识。

语法声明：<ASP:CustomValidator Id="…" Runat="Server" ControlToValidate="…"

ErrorMessage="…" ClientValidationFunction="…"… />

课堂实训 11

验证控件的使用，实现对一个简单的用户注册页面进行验证。

3.4 综合实训——网上调查表

网上调查表主要提供两个功能：一是允许用户填写调查表并进行投票，二是用户在填写并提交调查表后可以查看调查统计结果。整个网上调查表由两个 ASP.NET 网页构成，它们的名称及主要功能如下：

indagate.aspx：用户填写调查表页面。用户在填写调查表时要选择性别、年龄段、月收入、休闲方式，输入手机号码。

view.aspx：查看调查结果页面。由于目前所学知识不够，暂时不做第二个页面。在

第一个一面中按提交按钮，将用户填写的详细内容显示在页面下方。

本章小结

本章主要介绍了在 ASP.NET 页面中所使用的两种服务器控件—— HTML Server 控件及 Web 控件并就Web 控件的使用方法进行了详细的祥细的讲述。通过本章的学习，读者应熟练掌握和运用 ASP.NET 服务器控件进行页面设计。

第 3 章 asp.net 服务器端控件

Documents