网站开发视频教程 4讲基本服务器控件

第 3 章 Web 服务器控件
控件是一种具有特殊作用的对象，在 中，一切都由对象组成。Web 页面就 是一个对象的容器，而控件是 Web 页面的元素之一。常见的控件有按钮、复选框、下拉 框、图片等，直接在页面中展示给用户。 了解这些控件的属性、方法和事件对以后的学习尤其重要。本章详细介绍服务器控 件的类型、共有属性及控件和页面的综合应用。 本章学习要点： “ “ “ “ “ “ “ “ 了解服务器控件的特点 理解服务器控件的公共属性 掌握文本控件的使用 掌握按钮控件的使用 掌握复选框的使用 掌握列表控件的使用 掌握容器控件的使用 掌握控件与页面的结合
3.1.3 32
服务器控件公共属性
服务器控件有多种类型，但这些控件有着它们共同的特点和属性。每一个 Web 服务器控件都有一个<asp:>的前缀，该前缀表示此控件为 Web 服务器控件。其语法 格式如下。
<asp:Control id="name" runat="server" />
31
4.5 网站开发与应用实践教程 4．导航控件 导航控件与网站用户的关系，相当于导游和旅行者的关系。导航控件能够将大型的 网站系统结构化，列出网页之间的逻辑关系，使用和能够方便快捷地找到所需的页面进 行访问。导航控件通常和站点地图等列举页面逻辑的文件结合使用，在第 6 章中将详细 介绍。 5．登录控件 用户登录通常需要输入用户名、 密码， 并由网站对用户名和密码的合法性进行验证， 在验证无误的情况下提交信息。 由于登录功能是网站的常用功能，因此 将登录常用的控件定义为一个组 合，可直接从工具箱拉入页面使用。 登录控件通常包含【用户名】文本框、 【密码】文本框等关于登录的常见控件。登录 控件的使用减轻了开发人员的工作。

Input(CheckBox) 创建一个复选框
15
3.3.2 常用的HTML服务器控件
HTML服务器控件 Input(CheckBox) Input(Radio) 功能说明 创建一个复选框 创建一个单选按钮 生成的HTML元素 <intput type=”checkbox”> <input type=”radio”>
要想改变标签中显示的文字，可通过修改Text属性来实现。有两 种方法：

一是在标签的属性窗口中直接修改Text属性； 二是通过编程方式，在程序运行过程中在标签中动态显示 文本。
如：Label2.Text = TextBox1.Text + "您好!"
19
2. TextBox控件（1）
文本框控件TextBox是用得最多控件之一，该控件可以用来显示 数据，也可以用来接收用户输入的数据。语法格式如下： <asp:TextBox ID="TextBox1" runat="server" Text="要显示或输入的文本" TextMode="SingleLine|MultiLine|Password" Columns="为多行文本框时的列数" Rows="为多行文本框时的行数" MaxLength="文本框中允许输入的最多字符数" Wrap="True|False" >
22
ImageButton控件
图像按钮ImageButton控件综合了Image控件和Button控
件的功能，用于创建图像外观的按钮，功能与Button控件
相同，语法格式如下：

32
CheckBox控件
属性：
AutoPostBack：用于设置当单击CheckBox控件时，是否自动 回送到服务器。
True---回送；False（默认）---不回送。
Checked：用于获取或设置复选框的选中状态。
True---被选中；False（默认）---未被选中。
Text：用于获取或设置复选框的显示文本。 TextAlign：用于指定复选框文本的显示位置。
默认值为0，表示任意多列。
RepeatDirection：用于指定CheckBoxList控件的显示方向。
属性值为Vertical---以列优先排列的顺序显示
属性值为Horizontal---以行优先排列的顺序显示。 显示的列数始终由RepeatColumns属性决定。
35
CheckBoxList控件
<asp:listbox>
列表框
31
选择控件
CheckBox控件和CheckBoxList控件 功能： • 用户可以从选项中作多种选择，即在网页中制作复 选框。 • CheckBox控件和CheckBoxList控件功能类似，最 大的区别在于CheckBoxList控件支持数据源的绑定，
可以动态创建具有多项选择功能的复选框列表。
属性值为Right（默认）时，文本显示在复选框的右边；
属性值为Left时，文本显示在复选框的左边。
GroupName：获取或设置按钮所属群组。
33
CheckBox控件
事件：
CheckedChanged：当Checked属性值发生了变化时，引发Chec kedChanged事件。 注意：只有当AutoPostBack属性值为True时才会触发该事件 。

Rows="整数，当为多行文本时的行数"
Columns="整数，当为多行文本时的列数"
2020年1月3日
第14页
6.2.2 TextBox（文本框）控件
Wrap="True | False，表示当控件内容超 过控件宽度时是否自动换行" AutoPostBack="True | False，表 示在文本修改以后，是否自动上传数据" OnTextChanged="当文字改变时触 发的事件过程" runat="server" />
2020年1月3日
第29页
6.2.9表格控件（Table）
表格控件（Table）来提供可编程的表格服 务器控件，表中的行可以通过TableRow控 件创建，而表中的列通过TableCell控件来 实现。
2020年1月3日
第30页
6.2.10 Literal控件和Panel控件
<asp:Panel id="控件名称"
ImageUrl="要显示图像的URL"

OnClick="事件过程名称"
runat="server" />
2020年1月3日
第18页
LinkButton（超链接按钮）控件
语法为：
<asp:linkbutton id="控件名称"
Text="按钮上的文字"

OnClick="事件过程名称"
2020年1月3日
第11页
6.2.5RadioButto 和 RadioButtonList 控件

BorderColor属性
BorderWidth属性
BorderStyle属性
4.4 基本控件-Button控件

使用Button控件可为用户提供向服务器发送网页
的能力。该控件会在服务器代码中触发一个事件，
可以处理该事件来响应回发。

包括三种按钮控件，每种按钮控件在网 页上显示的方式都不同，如下表4-1所列：
网站部署在Web服务器上，人们可以通过浏览 器来访问这个站点。客户端请求一个静态的HTML 页面时，服务器找到对应的文件直接将其发送给用 户端浏览器；

请求页面时，服务器将在文件系统中找 到并读取对应的页面，然后将页面中的服务器控件 转换成浏览器可以读取的HTML标记和一些脚本代 码，再将转换后的结果页面发送给用户。


Label控件

提供一种以编程方式设置Web窗体页中文本的方法。希望 在运行时更改页面中的文本时就可以使用Label控件。 当希望显示的内容不可以被用户编辑时，可以使用Label 控件。如果只是希望显示静态文字，并且文字内容不需要 改变，建议使用HTML显示。 示例代码： <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

使用服务器控件，可以大幅减少开发
Web应用程序所需编写的代码量，提高开发效率 和Web应用程序的性能。
三种超链接方法
（1）<a href=“”>新浪</a> （2）<a id=“anchor1” runat=“server” ></a> （3）<asp:HyperLink ID=" anchor2" runat="server" >HyperLink</asp:HyperLink>

<input id="Button1" type="button"
value="button" runat="server"/> 可以看到，只是在该控件中添加了一个 runat=“server”的属性。
12.10.2020
第7页
动态网站开发教程（第二版）
清华大学出版社
5.1.3 在页面中添加Web服务器控件
12.10.2020
第10页
动态网站开发教程（第二版）
5.2 HTML 服务器控件
清华大学出版社
5.2.1 HTML 服务器控件的公共属性 5.2.2 HTML 服务器控件的使用
12.10.2020
第11页
动态网站开发教程（第二版）
清华大学出版社
5.2.1 HTML 服务器控件的公共属性
除了前面介绍的通过页面直接添加的方法 之外，还可以在页面后台的cs代码文件中进 行添加。以编程方式进行添加需要先构造出 该控件的一个实例，然后再对控件的实例属 性进行设定。
12.10.2020
第9页
动态网站开发教程（第二版）
清华大学出版社
5.1.5 设置服务器控件属性
在中，可以通过三种方式来设置 服务器控件的属性，分别是通过“属性”对 话框直接设置；在控件的HTML代码中设置； 或者通过页面的后台代码以编程的方式指定 控件的属性。
12.10.2020
第6页
动态网站开发教程（第二版）
清华大学出版社
5.1.2 在页面中添加HTML服务器控件
给HTML标记添加runat=“server”属性， 该标记就变成了HTML 服务器控件。
比较如下的代码：<input id="Button1"

第5页
6.1.1 控件的种类
• Web 服务器控件是由System.Web.UI. WebControls类实现的，它并不和HTML标记一 一对应。Web 服务器控件比HTML 服务器控件 具有更多的内置功能。 • 按照功能区分，Web 服务器控件还可以分 为标准控件、数据控件、验证控件、导航控 件、登陆控件、Web部件控件以及其他辅助安 装的自定义控件等。
2020/11/6
第16页
Button（按钮）控件
• <asp:Button id="控件名称" • Text="按钮上的文字" • CommandArgument="此按钮管理的命令参数
"
• CommandName="与此按钮关联的命令" • OnCommand="事件过程名称" • OnClick="事件过程名称" • runat="server"/>
2020/11/6
第10页
6.2 标准服务器控件
• 6.2.1标签控件（Label） • 6.2.2 TextBox（文本框）控件 • 6.2.3 按钮控件（Button，LinkButton，
ImageButton）
• 6.2.4 HyperLink（超链接）控件 • 6.2.5图像控件（Image） • 6.2.6 CheckBox（复选框）和CheckBoxList（复
• 语法为：
• <asp:linkbutton id="控件名称"
选框列表）控件
2020/11/6
第11页
• 6.2.7RadioButto 和 RadioButtonList 控件

例:ImageTest.aspx
3.3.3 输入数据
TextBox类用于让用户输入文本，它多种显示效果， 类用于让用户输入文本，它多种显示效果， 类用于让用户输入文本 使用非常的灵活，相当于HTML中的 中的<Input 使用非常的灵活，相当于 中的 Type=“Text”>、<Input Type=“Password”>或者 、 或者 <TextArea>元素 <TextArea>元素。 元素。 TextBox控件基本语法 控件基本语法: 控件基本语法
3.3.10 控件的容器
Panel控件一般作为其他控件的容器使用 控件一般作为其他控件的容器使用. 控件一般作为其他控件的容器使用 如果打算控制一组控件的集体行为， 如果打算控制一组控件的集体行为，例如显示 或者隐藏控件，禁止或者使能控件等， 或者隐藏控件，禁止或者使能控件等，就可以 使用Panel控件，只要设置 控件， 控件的该属性， 使用 控件 只要设置Panel控件的该属性， 控件的该属性 即可达到控制效果。 即可达到控制效果。 常用于以编程方式生成控件，或显示或隐藏控 件组 例:guestbook/default.aspx
3.1.3 图像
<img >…</img>
例:image.htm HTML控件例 控件例:HtmlForm-CS.aspx 控件例
使用html控件实现可控 控件实现可控WebForm 使用 控件实现可控
3.2 控件的共有属性 控件的共有属性
AccessKey , TabIndex Height, Width
Web控件 控件
Web控件是为了弥补 控件是为了弥补HTML控件的不足而添加的控件 Web控件源 控件是为了弥补 控件的不足而添加的控件 控件源 名称空间， 自System.Web.UI.WebControls名称空间，是由 名称空间 是由WebControl基 基 础控件驱动的。 础控件驱动的。 Web控件具有更丰富且一致的对象模块，Web控件有许多共同的 控件具有更丰富且一致的对象模块， 控件具有更丰富且一致的对象模块 控件有许多共同的 属性，属性及方法名称有一致性；同时Web控件可以自动检查浏 属性，属性及方法名称有一致性；同时 控件可以自动检查浏 览器的类型、 览器的类型、提供数据链接以及可以直接套用用户设计的模板等 功能，可以说， 控件是强大功能的体现。 强大功能的体现。 功能，可以说，Web控件是 控件是 强大功能的体现

图5.10 Label控件
（1）通过属性窗口设置Label控件的外观
ResolveClientUrl
ResolveUrl SetRenderMethodDelegate
图5.2
TextBox控件的GetType方法
表5.3
事 件
服务器控件的共有事件及说明
说 明
DataBinding Disposed Init Load PreRender Unload
当一个控件上的DataBind方法被调用并且该控件被绑定到一个数 据源时发生 从内存中释放一个控件时会发生—控件生命的最后一个阶段 控件被初始化时发生—控件生命的第一步 把控件装入页面时会发生，该事件在Init事件后发生 控件准备生成它的内容时会发生 从内存中卸载控件时发生
从内存中释放控件之前，给予控件一个执行清除任务的机会
把输入焦点设置为该控件。 1.x不支持该方法
在子控件集中寻找指定的控件。它不能检索不在当前控件的 Controls集合中的控件，即不是直接子控件
获取当前实例的类型 表明该控件是否包含什么子控件 生成控件的HTML输出 使用该方法返回一个适合客户用来访问Web服务器上的资源（诸如图 像文件、对补充页的链接等）的URL 根据传递给TemplateSourceDirectory属性的值，把一个相对URL解 析为绝对URL 内部使用的方法，把一个对生成控件及其内容的委派赋给父控件
图5.5
添加一个选项卡
图5.6
选择“选择项”命令
单击“浏览”按钮选 择 dll 文件
图5.7
“选择工具箱项”对话框
图5.8
查找dll文件
图5.9
添加引用控件完成
5.3 服务器端标准控件 5.3.1 文本类控件

Checked ：控件是否被选中。
GroupName ：单选控件所处的组名。 TextAlign ：文本标签相对于控件的对齐方式。
第十八页，编辑于星期一：二十三点 四十一分。
3.6 单选按钮及单选按钮组
单选组控件： DataMember ：在数据集用做数据源时做数据绑定。
DataSource：向列表填入项时所使用的数据源。 DataTextFiled ：提供项文本的数据源中的字段。
控件添加
方法一：将光标定位于添加位置，双击控件
方法二：将控件用鼠标拖动到添加位置
第三页，编辑于星期一：二十三点 四十一分。
3.1 控件概述 控件修改
方法一：通过属性面板修改
方法二：直接修改控件标签
第四页，编辑于星期一：二十三点 四十一分。
3.2 简单控件 -- Literal控件
控件代码
生成HTML
向列表项集合中添加 Items 属性
绑定数据源
DataSource 属性
第十三页，编辑于星期一：二十三点 四十一分。
3.4 列表控件 -- DropDownList
如何获取被选中的项？
属性：SelectedValue ，返回一个 String 类型的值 属性： SelectedItem.Value ，返回一个 String 类型的值
<input type=submit name=Button1 value=Button id=Button1 />
Text ：在按钮上显示的文字
ValidationGroup ：规定了验证过程中被验证的控件组 PostBackURL ：单击按钮时发送到的 URL
CommandArgument ：与此按钮管理的命令参数。