资源描述
《10.2 HTML服务器控件》
1. 目标概述 [2分钟] 2
2. 回顾 [5分钟] 2
3. 课程知识点讲解 2
3.1. HTML服务器控件简介 [45分钟] 2
3.2. HtmlForm控件 [20分钟] 5
3.3. HtmlInputFile控件 [15分钟] 5
4. 小结 [3分钟] 6
5. 考核点 7
6. 作业答案 7
7. 扩展练习 8
8. 学生问题汇总 8
9. 教学后记 8
本节目标
n 本节中将讲述如下主要内容：
² HTML服务器控件简介
² HTML服务器控件的公共属性
² HTML服务器控件的公共事件
² HtmlForm控件
² HtmlInputFile控件
n 通过教学使学生熟悉HTML服务器控件及其应用。
本节重点
n HTML服务器控件的公共属性
n HTML服务器控件的公共事件
n HtmlForm、HtmlInputFile控件
本节难点
n
授课课时
n 2课时
教法建议
1. 目标概述 [2分钟]
本节主要讲述HTML服务器控件及其应用。
2. 回顾 [5分钟]
回顾上一节的相关知识。
3. 课程知识点讲解
3.1. HTML服务器控件简介 [45分钟]
引入：
主题：
（1）HTML服务器控件的概述
HTML 服务器控件提供以下功能：
l 可在服务器上使用熟悉的面向对象技术对其进行编程的对象模型。每个服务器控件都公开一些属性，这些属性使您得以在服务器代码中通过编程操作该控件的 HTML 属性。
l 提供一组事件，您可以为其编写事件处理程序，方法与在基于客户端的窗体中大致相同，所不同的是事件处理是在服务器代码中完成的。
l 在客户端脚本中处理事件的能力。
l 自动维护控件状态。在窗体到服务器往返期间，用户在 HTML 服务器控件中输入的值将在页发送回浏览器时自动维护。
l 可与验证控件进行交互，便于您验证用户是否在控件输入了适当的信息。
l 可实现数据绑定，将将数据绑定到一个或多个控件属性。
l 支持自定义属性。可以将任何需要的属性添加到 HTML 服务器控件，页框架将读取并在客户端显示它们而不更改其任何功能。这将允许开发人员向控件添加浏览器特定的属性。
（2）HTML元素到服务器的转换
1．手动编码转换
① 通过添加 RUNAT="SERVER" 属性，HTML 元素即可转换为服务器控件。
② 如果要在代码中作为成员引用该控件，则还应当为控件分配 ID 属性。
2．使用Visual Studio .NET进行转换
（3）HTML服务器控件
HTML元素
控件类型
用途
<a>
HtmlAnchor
允许以编程方式访问HTML锚元素。
注：公开ServerClick事件
<button>
HtmlButton
允许以编程方式访问HTML按钮元素。此元素由HTML4.0规范定义，且只能被IE4.0以上版本支持。
注：公开ServerClick事件
<form>
HtmlForm
允许以编程方式访问HTML表单元素。充当其他服务器控件的容器，任何要参与回传的控件都应包含在HtmlForm控件中。
<img>
HtmlImage
允许以编程方式访问HTML图像元素。
<input type=”button”>
<input type=”submit”>
<input type=”reset”>
HtmlInputButton
允许以编程方式访问button、submit和reset输入类型的HTML输入元素。
注：公开ServerClick事件
<input type=”checkbox”>
HtmlInputCheckBox
允许以编程方式访问CheckBox输入类型的HTML输入元素。
注：公开ServerChange事件
<input type=”file”>
HtmlInputFile
允许以编程方式访问file输入类型的HTML输入元素。
<input type=”hidden”>
HtmlInputHidden
允许以编程方式访问Hidden输入类型的HTML输入元素。
注：公开ServerChange事件
<input type=”image”>
HtmlInputImage
允许以编程方式访问用于image输入类型的HTML输入元素。
注：公开ServerClick事件
<input type=”radio”>
HtmlInputRadioButton
允许以编程方式访问用于radio输入类型的HTML输入元素。
<select>
HtmlSelect
允许以编程方式访问HTML的选择元素
注：公开ServerChange事件
<table>
HtmlTable
允许以编程方式访问HTML的表元素
注：HtmlTable控件不支持某些表的子元素（如<col>、<tbody>、<thead>等。
<td>和<th>
HtmlTableCell
允许以编程方式访问HTML表的单元格
<tr>
HtmlTableRow
允许以编程方式访问HTML表的行
<textarea>
HtmlTextArea
允许以编程方式访问HTML文本区域
注：公开ServerChange事件
<body>、<div>、<font>等
HtmlGenericControl
允许以编程方式访问未被HTML控件类明确表示的HTML元素。
（4）HTML服务器控件的公共属性
HTML服务器控件具有一些公共属性，下面将分别讨论。
1．全部HTML服务器控件的公共属性
l Attributes属性：Attributes集合包含控件标记定义里的所有属性的名称/值对，如下代码演示了Attributes属性的用法。
[示例讲解]
示例10.2.1 Attributes属性演示。
示例10.2.2 TagName属性演示。
2．所有 HTML 输入控件共享的属性
HTML 输入控件映射到标准 HTML 输入元素。它们包含 type 属性，该属性定义它们在 Web 页中呈现的输入控件的类型。HtmlInputText、HtmlInputButton、HtmlInputCheckBox、HtmlInputImage、HtmlInputHidden、HtmlInputFile 和 HtmlInputRadioButton 控件共享下列属性。
3．所有 HTML 容器控件共享的属性
HTML 容器控件映射到 HTML 元素，这些元素需要具有开始和结束标记，如 <select>、<a>、<button> 和 <form> 元素。HtmlTableCell、HtmlTable、HtmlTableRow、HtmlButton、HtmlForm、HtmlAnchor、HtmlGenericControl、HtmlSelect 和 HtmlTextArea 控件共享下列属性。
（5）HTML服务器控件的公共事件
HTML控件可以处理服务器端事件和HTML元素映射的客户端事件，HTML服务器控件可以映射的客户端事件有两个：
l ServerClick事件：HtmlAnchor、HtmlButton、HtmlInputButton、HtmlInputImage控件可以将客户端的Click事件映射到服务器端，使得当这4类控件被点击时，就会触发服务器端的ServerClick事件。
l ServerChange事件：HtmlInputCheckBox、HtmlInputHidden、HtmlInputRadioButton、HtmlInputText、HtmlSelect、HtmlTextArea控件可以在其值发生变化时，通过映射触发服务器端的ServerChange事件。
当这些事件被触发时，客户端和服务器之间将进行一次数据交换，下面以一个示例演示如何处理由客户端映射服务器端的事件。
[示例讲解]
示例10.2.3 HTML服务器控件客户端事件触发服务器事件示例。
3.2. HtmlForm控件 [20分钟]
引入：
主题：
可以使用 HtmlForm 控件对 HTML <form> 元素进行编程。如果要利用回传服务，则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。如果没有正确结束标记，ASP.NET 将无法识别该元素。该元素将被忽略或者将发生编译错误。HtmlForm控件以下标签构成：
<form id="标识符"
method=POST | GET <!--提交方式-->
action="目标页面的URL"
runat="server" >
其他控件，输入表单等
</form>
[示例讲解]
示例10.2.4 HTML Form控件使用示例
3.3. HtmlInputFile控件 [15分钟]
引入：
主题：
HtmlInputFile控件用于将文件从客户端上传到服务器中，HtmlInputFile控件对应于Html元素<input type=file>标签。该标签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件，选中的文件将显示在文本框中。HtmlInputFile控件由以下标签表示：
<input type=file
id="标识符"
maxlength="MaxFilePathLength <!—最大文件路径长度 -->
size="WidthOfFilepathTextbox" ＜!—文件路径框的大小--＞
postedfile="uploadedfile" <!-- 要上传的文件 -->
runat="server" >
[示例讲解]
示例10.2.5 HtmlInputFile使用示例。
4. 小结 [3分钟]
本节学习了以下主要内容：
1．HTML服务器控件简介
HTML 服务器控件是 HTML 元素的一种演变，通过将 HTML 元素转换为 HTML 服务器控件，就使得HTML元素组件可以在服务器上以组件的方式出现，并可以通过组件的方式对其编程来创建Web页面。页面上的任意 HTML 元素都可以转换为 HTML 服务器控件，转换是一个只涉及几个属性的简单过程。
① 通过添加 RUNAT="SERVER" 属性，HTML 元素即可转换为服务器控件。
② 如果要在代码中作为成员引用该控件，则还应当为控件分配 ID 属性。
HTML服务器控件均属于System.Web.UI.HtmlControls命名空间，是从HtmlControl类派生出来的。HTML服务器控件具有一些公共属性：
l Attributes属性：包含控件标记定义里的所有属性的名称/值对；
l Disabled属性：Disabled属性用于表示该控件是否被禁用；
l Style属性：获取指定控件的Css样式；
l TagName属性：获取HTML控件的类型；
l Visible属性：用于表示控件在页面上是否可见
HTML服务器控件的公共事件
l ServerClick事件：将客户端的Click事件映射到服务器端
l ServerChange事件：可以在其值发生变化时，通过映射触发服务器端的相应方法。
2．HtmlForm控件
可以使用 HtmlForm 控件对 HTML <form> 元素进行编程。如果要利用回传服务，则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。Form控件由以下标签构成：
<form id="标识符" method=POST | GET <!--提交方式-->
action="目标页面的URL" runat="server" >
</form>
3．HtmlInputFile控件
HtmlInputFile控件用于将文件从客户端上传到服务器中，HtmlInputFile控件对应于Html元素<input type=file>标签。该标签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件，选中的文件将显示在文本框中。HtmlInputFile控件由以下标签表示
<input type=file id="标识符" maxlength="MaxFilePathLength
size="WidthOfFilepathTextbox" postedfile="uploadedfile" runat="server" >
5. 考核点
考核点1：HTML服务器控件
考核点2：HtmlForm、HtmlInputFile控件
6. 作业答案
1：请简述如何将Html元素转换为HTML服务器控件？
答：
2：Html服务器控件具有哪些公共属性，各有何用途？
答：
3：Html服务器控件可以将哪几个客户端事件映射到服务器端？各有何用途，试举例说明。
答：
4：请创建如图10.2.10所示的注册页面RegisterUser.aspx：
说明：
① 带*号标识的为必填数据，开发人员应编码检测是否满足要求，如不满足则在页面上显示相应信息。
② 当点击注册用户时，如果存在个人照片时，将其上传到服务器的picture目录
③ 满足注册要求后，应在页面下方，显示注册成功信息。
答：
7. 扩展练习
8. 学生问题汇总
（注：汇总学生在学习过程中容易出现的问题）
9. 教学后记
（注：在此写上个人在授课过程中所遇到的教案中所没有涉及到的特殊问题及其解决方法或解决方案，也可以总结自己的授课体会，课程体系、教材的不足等。）
授课教师（签名）： 授课时间： 授课班级：
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
