版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、课程名称:.NET应用开发 第十章 服务器控件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 通过
2、教学使学生熟悉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 可在服务器上使用熟悉的面向对象技术对其进行编程的对象模型。每个服务器控件都公开一些属性,这些属性使您得以在服务器代码中通过编程操作该控件的 HTM
3、L 属性。 l 提供一组事件,您可以为其编写事件处理程序,方法与在基于客户端的窗体中大致相同,所不同的是事件处理是在服务器代码中完成的。 l 在客户端脚本中处理事件的能力。 l 自动维护控件状态。在窗体到服务器往返期间,用户在 HTML 服务器控件中输入的值将在页发送回浏览器时自动维护。 l 可与验证控件进行交互,便于您验证用户是否在控件输入了适当的信息。 l 可实现数据绑定,将将数据绑定到一个或多个控件属性。 l 支持自定义属性。可以将任何需要的属性添加到 HTML 服务器控件,页框架将读取并在客户端显示它们而不更改其任何功能。这将允许开发人员向控件添加浏览器特定的属性。(2)HTML元素到
4、服务器的转换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
5、>HtmlForm允许以编程方式访问HTML表单元素。充当其他服务器控件的容器,任何要参与回传的控件都应包含在HtmlForm控件中。<img>HtmlImage允许以编程方式访问HTML图像元素。<input type=”button”><input type=”submit”><input type=”reset”>HtmlInputButton允许以编程方式访问button、submit和reset输入类型的HTML输入元素。注:公开ServerClick事件<input type=”checkbox”>HtmlInput
6、CheckBox允许以编程方式访问CheckBox输入类型的HTML输入元素。注:公开ServerChange事件<input type=”file”>HtmlInputFile允许以编程方式访问file输入类型的HTML输入元素。<input type=”hidden”>HtmlInputHidden允许以编程方式访问Hidden输入类型的HTML输入元素。注:公开ServerChange事件<input type=”image”>HtmlInputImage允许以编程方式访问用于image输入类型的HTML输入元素。注:公开ServerClick事件&l
7、t;input type=”radio”>HtmlInputRadioButton允许以编程方式访问用于radio输入类型的HTML输入元素。<select>HtmlSelect允许以编程方式访问HTML的选择元素注:公开ServerChange事件<table>HtmlTable允许以编程方式访问HTML的表元素注:HtmlTable控件不支持某些表的子元素(如<col>、<tbody>、<thead>等。<td>和<th>HtmlTableCell允许以编程方式访问HTML表的单元格<tr>
8、;HtmlTableRow允许以编程方式访问HTML表的行<textarea>HtmlTextArea允许以编程方式访问HTML文本区域注:公开ServerChange事件<body>、<div>、<font>等HtmlGenericControl允许以编程方式访问未被HTML控件类明确表示的HTML元素。(4)HTML服务器控件的公共属性HTML服务器控件具有一些公共属性,下面将分别讨论。1全部HTML服务器控件的公共属性l Attributes属性:Attributes集合包含控件标记定义里的所有属性的名称/值对,如下代码演示了Attribu
9、tes属性的用法。示例讲解示例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
10、 元素,这些元素需要具有开始和结束标记,如 <select>、<a>、<button> 和 <form> 元素。HtmlTableCell、HtmlTable、HtmlTableRow、HtmlButton、HtmlForm、HtmlAnchor、HtmlGenericControl、HtmlSelect 和 HtmlTextArea 控件共享下列属性。(5)HTML服务器控件的公共事件HTML控件可以处理服务器端事件和HTML元素映射的客户端事件,HTML服务器控件可以映射的客户端事件有两个:l ServerClick事件:HtmlAnchor
11、、HtmlButton、HtmlInputButton、HtmlInputImage控件可以将客户端的Click事件映射到服务器端,使得当这4类控件被点击时,就会触发服务器端的ServerClick事件。l ServerChange事件:HtmlInputCheckBox、HtmlInputHidden、HtmlInputRadioButton、HtmlInputText、HtmlSelect、HtmlTextArea控件可以在其值发生变化时,通过映射触发服务器端的ServerChange事件。当这些事件被触发时,客户端和服务器之间将进行一次数据交换,下面以一个示例演示如何处理由客户端映射服务
12、器端的事件。示例讲解示例10.2.3 HTML服务器控件客户端事件触发服务器事件示例。3.2. HtmlForm控件 20分钟引入:主题:可以使用 HtmlForm 控件对 HTML <form> 元素进行编程。如果要利用回传服务,则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。如果没有正确结束标记,ASP.NET 将无法识别该元素。该元素将被忽略或者将发生编译错误。HtmlForm控件以下标签构成:<form id="标识符" method=POST | GET <!-提交方式-> action="目
13、标页面的URL" runat="server" > 其他控件,输入表单等</form>示例讲解示例10.2.4 HTML Form控件使用示例3.3. HtmlInputFile控件 15分钟引入:主题:HtmlInputFile控件用于将文件从客户端上传到服务器中,HtmlInputFile控件对应于Html元素<input type=file>标签。该标签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件,选中的文件将显示在文本框中。HtmlInputFile控件由以下标签表
14、示:<input type=file id="标识符" maxlength="MaxFilePathLength <!最大文件路径长度 -> size="WidthOfFilepathTextbox"!文件路径框的大小- postedfile="uploadedfile" <!- 要上传的文件 -> runat="server" >示例讲解示例10.2.5 HtmlInputFile使用示例。4. 小结 3分钟本节学习了以下主要内容:1HTML服务器控件简介HTML 服
15、务器控件是 HTML 元素的一种演变,通过将 HTML 元素转换为 HTML 服务器控件,就使得HTML元素组件可以在服务器上以组件的方式出现,并可以通过组件的方式对其编程来创建Web页面。页面上的任意 HTML 元素都可以转换为 HTML 服务器控件,转换是一个只涉及几个属性的简单过程。 通过添加 RUNAT="SERVER" 属性,HTML 元素即可转换为服务器控件。 如果要在代码中作为成员引用该控件,则还应当为控件分配 ID 属性。HTML服务器控件均属于System.Web.UI.HtmlControls命名空间,是从HtmlControl类派生出来的。HTML服务
16、器控件具有一些公共属性:l Attributes属性:包含控件标记定义里的所有属性的名称/值对;l Disabled属性:Disabled属性用于表示该控件是否被禁用;l Style属性:获取指定控件的Css样式;l TagName属性:获取HTML控件的类型;l Visible属性:用于表示控件在页面上是否可见HTML服务器控件的公共事件l ServerClick事件:将客户端的Click事件映射到服务器端l ServerChange事件:可以在其值发生变化时,通过映射触发服务器端的相应方法。2HtmlForm控件可以使用 HtmlForm 控件对 HTML <form> 元素进
17、行编程。如果要利用回传服务,则所有 Web 窗体控件都必须嵌套在 HtmlForm 控件开始和结束标记之间。Form控件由以下标签构成:<form id="标识符" method=POST | GET <!-提交方式-> action="目标页面的URL" runat="server" ></form>3HtmlInputFile控件HtmlInputFile控件用于将文件从客户端上传到服务器中,HtmlInputFile控件对应于Html元素<input type=file>标签。该标
18、签将在页面上显示一个文本框和一个用于查找文件的浏览按钮。用户可以通过点击该按钮来打开选择文件对话框来选择文件,选中的文件将显示在文本框中。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:请
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026中国涡流泵产品创新与智能化升级路径分析报告
- 2026中国叶黄素酯行业景气指数构建与预测模型报告
- 2026中国五金行业市场发展分析及市场创新与投资前景研究报告
- 2026中国新材料碳纳米管应用市场现状竞争格局发展策略规划报告
- 2026中国印刷包装行业市场竞争态势与发展潜力研究
- 2026中国物联网产业发展趋势及投资风险评估报告
- 2026全球碳纤维产业链竞争格局与未来市场机会预测研究报告
- 2026中国塑料回收行业市场评估及投资热点与未来发展与趋势报告
- 2026中国食品饮料行业电商平台运营模式创新与投资机遇分析报告
- 2026汽车雷达传感器行业竞争分析及投资规划研究报告
- 食堂食材供货、配送服务保障方案
- 护患沟通人文关怀课件
- 高磷血症科普
- 设备管理技术培训课件
- 管道焊接专项施工计划
- 集装箱活动板房施工方案
- 一体化消防泵房水池施工方案
- 脊柱骨折的急救处理措施
- 中国2型糖尿病运动治疗指南(2024版)
- CJ/T 283-2017偏心半球阀
- 2026届高中语文一轮复习板块五 文言文阅读 考点突破学案27 理解文言实词(一)-词分古今义究源流 (共107张) +学案+练习(含解析)
评论
0/150
提交评论