Transcript Document

第四章 HTML控件和Web服务器控件
褚龙现
[email protected]
软件学院
回顾内容
HTML控件特点
HTML控件属性
软件学院
回顾-- HTML控件
 HTML控件外观上与普通的HTML标
记很相似，由HTML标记衍生而来，
属于System.Web.UI.HtmlControls
命名空间，并在ASP.NET页中声明
为一个由runat=“server”属性标记
的HTML元素。
软件学院
回顾-- HTML控件的优点
 HTML标记加上runat=server属性后，
即可变为HTML控件。
 HTML控件将HTML标记对象化，其属性
可以由程序直接控制。
 HTML控件支持事件处理，可以以事件
触发方式来编写程序。
软件学院
回顾–HTML控件常用属性
 Style属性
 Attributes属性
 Visible属性
 Disabled属性
 InnerHtml属性
 InnerText属性
软件学院
1 Style属性
 Style属性可以设定的样式：
样式名称
Background-Color
Color
Font-Family
说明
背景色
前景色
字型
Font-size
Font-Style
Font-Weight
字体大小
斜体
粗体
Text-Decoration
Text-Transform
效果
转大小写
软件学院
设定值
RDB或指定颜色
RDB或指定颜色
标楷体
20pt
Italic或Normal
Bold或Normal
2 Attributes属性
 Attributes属性使用注意事项
对于有些控件指定的属性不合法
指定的属性不是对应HTML标记所
支持的
软件学院
教学目标
掌握常用HTML控件
软件学院
教学重难点
重点
HTML控件应用
难点
HTML控件各个属性
软件学院
4.2 基本HTML控件
 HtmlTextArea控件
 HtmlTable控件
 HtmlImage控件
 HtmlSelect控件
 HtmlInput控件
软件学院
4.2.1 HtmlTextArea控件
 该控件可以在Web页上创建多行文
本框。多行文本框的高度和宽度可
以通过rows和cols属性控制，设置
或获取多行文本框的文本内容，使
用的是Value属性。
软件学院
4.2.2 HtmlTable控件
 该控件用来生成表。可以使用
HtmlTable、HtmlTableRow、
HtmlTableCell控件来自由地控制表
格的行、列数。将创建好的行添加
到表的Rows集合中，将创建好的单
元格，添加到行的Cells集合中，形
成表。
软件学院
4.2.3 HtmlImage控件
 实用HtmlImage控件可以在Web页
上显示图像，并且可以通过编程动
态控制显示图像的大小、图像相对
于其他控件的对齐方式以及更改图
像本身。
软件学院
4.2.3 HtmlImage控件
 HtmlImage控件的主要属性有：
 Src属性：图像文件
 Align属性：对齐方式
 Alt属性：无法加载时，显示文字
 Border属性：图像边界宽度
 Height、Width属性：长、宽值
软件学院
4.2.4 HtmlSelect控件
 使用该控件创建选择框，通过将
<option>元素放在开始和结束
<select>标记之间来指定控件中的
项列表。
 ListItem的Text属性用于指定显示
的文本，Value属性用于将一个不同
于文本的值与该项关联。
软件学院
4.2.4 HtmlSelect控件
 Size属性用于控制该控件的高度，
Multiple属性用于控制该控件是否可
以多选。
 SelectedIndex属性用于获取选定项
的索引，可以从Items集合中检索该
项。
软件学院
4.2.5 HtmlInput控件
 HtmlInput控件根据Type属性的设
定产生不同种类的控件。
 HtmlInputButton控件
 HtmlInputCheckBox控件
 HtmlInputText控件
 HtmlInputHidden控件
 HtmlInputRadioButton控件
 HtmlInputFile控件
软件学院
1 HtmlInputButton控件
 根据type属性的不同设置，可以创建
命令按钮、提交按钮和重置按钮。
 用户单击HtmlInputButton控件时，
嵌有该控件的窗体输入被送到服务器
并得到处理，然后将处理结果发送回
请求浏览器。
 重置按钮不支持ServerClick事件。
软件学院
2 HtmlInputCheckBox控件
 单击该控件时，不会向服务器回送。
当使用回送服务器控件时，复选框的
状态被发送到服务器进行处理。
 Checked属性用于获取或设置是否选
中该复选框。
 OnServerChange方法只有提交页面
同时当更改了选择状态时发生。
软件学院
3 HtmlInputText控件
 单行文本框，当type属性为password
时屏蔽文本框内容。
 使用MaxLength、Size和Value属性，
可以控制文本框输入的最大字符数、
文本框宽度和文本框的内容。
软件学院
4 HtmlInputHidden控件
 此控件是窗体的一部分，但永远不在
窗体上显示。此控件通常与
HtmlInputButton和HtmlInputText控
件一起使用，以在对服务器的发送之
间存储信息。
软件学院
5 HtmlInputRadioButton控件
 此控件在Web页上创建单选按钮。有
两个重要属性。
 Name属性：用于获取或设置
HtmlInputRadioButton关联的组的名称，多个
控件设置同一个name属性，可以实现互相排斥
功能。
 Checked属性：获取或设置单选按钮是否被选
中。
软件学院
5 HtmlInputRadioButton控件
 此控件不会自动向服务器回送。必
须依赖使用某个按钮控件来回送到
服务器。
 ServerChange事件只为更改成选中
状态的单选按钮引发。
软件学院
6 HtmlInputFile控件
 HtmlInputFile可以用来向服务器端上传
文件。
 要使得文件上载能够成功，需要满足：
 1.控件必须出现在Form元素中
 2.必须为该控件指定Name标签属性的值
 3.form元素的method属性值必须为post
 4.form元素的enctype标签属性值为
multipart/form-data
软件学院
下次课内容
 Web服务器控件
软件学院