HTML服务器控件.doc

10.2 HTML服务器控件1.目标概述 2分钟22.回顾 5分钟23.课程知识点讲解23.1.HTML服务器控件简介 45分钟23.2.HtmlForm控件 20分钟53.3.HtmlInputFile控件 15分钟54.小结 3分钟65.考核点76.作业答案77.扩展练习88.学生问题汇总89.教学后记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元素控件类型用途HtmlAnchor允许以编程方式访问HTML锚元素。注：公开ServerClick事件HtmlButton允许以编程方式访问HTML按钮元素。此元素由HTML4.0规范定义，且只能被IE4.0以上版本支持。注：公开ServerClick事件HtmlForm允许以编程方式访问HTML表单元素。充当其他服务器控件的容器，任何要参与回传的控件都应包含在HtmlForm控件中。HtmlImage允许以编程方式访问HTML图像元素。HtmlInputButton允许以编程方式访问button、submit和reset输入类型的HTML输入元素。注：公开ServerClick事件HtmlInputCheckBox允许以编程方式访问CheckBox输入类型的HTML输入元素。注：公开ServerChange事件HtmlInputFile允许以编程方式访问file输入类型的HTML输入元素。HtmlInputHidden允许以编程方式访问Hidden输入类型的HTML输入元素。注：公开ServerChange事件HtmlInputImage允许以编程方式访问用于image输入类型的HTML输入元素。注：公开ServerClick事件HtmlInputRadioButton允许以编程方式访问用于radio输入类型的HTML输入元素。HtmlSelect允许以编程方式访问HTML的选择元素注：公开ServerChange事件HtmlTable允许以编程方式访问HTML的表元素注：HtmlTable控件不支持某些表的子元素（如、等。和HtmlTableCell允许以编程方式访问HTML表的单元格HtmlTableRow允许以编程方式访问HTML表的行HtmlTextArea允许以编程方式访问HTML文本区域注：公开ServerChange事件、等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 元素，这些元素需要具有开始和结束标记，如 、 和 元素。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 元素进行编程。如果要利用回传服务，则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。如果没有正确结束标记，ASP.NET 将无法识别该元素。该元素将被忽略或者将发生编译错误。HtmlForm控件以下标签构成：form id=标识符 method=POST | GET action=目标页面的URL runat=server 其他控件，输入表单等示例讲解示例10.2.4 HTML Form控件使用示例3.3. HtmlInputFile控件 15分钟引入：主题：HtmlInputFile控件用于将文件从客户端上传到服务器中，HtmlInputFile控件对应于Html元素标签。该标签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件，选中的文件将显示在文本框中。HtmlInputFile控件由以下标签表示：input type=file id=标识符 maxlength=MaxFilePathLength size=WidthOfFilepathTextbox!文件路径框的大小- postedfile=uploadedfile runat=server 示例讲解示例10.2.5 HtmlInputFile使用示例。4. 小结 3分钟本节学习了以下主要内容：1HTML服务器控件简介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事件：可以在其值发生变化时，通过映射触发服务器端的相应方法。2HtmlForm控件可以使用 HtmlForm 控件对 HTML 元素进行编程。如果要利用回传服务，则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。Form控件由以下标签构成：form id=标识符 method=POST | GET action=目标页面的URL runat=server 3HtmlInputFile控件HtmlInputFile控件用于将文件从客户端上传到服务器中，HtmlInputFile控件对应于Html元素标签。该标签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件，选中的文件将显示在文本框中。HtmlInputFile控件由以下标签表示5. 考核点 考核点1：HTML服务器控件 考核点2：HtmlForm、HtmlInputFile控件6. 作业答案 1：请简述如何将Html元素转换为HTML服务器控件？答： 2：Html服务器控件具有哪些公共属性，各有何用途？答： 3：Html服务器控件可以将哪几个客户端事件映射到服务器端？各有何用途，试举例说明。答： 4：请创建如图10.2.10所示的注册页面RegisterUser.aspx：说明： 带*号标识的为必