第3章服务器控件.pptx
合集下载
3.3 服务器控件
器控件，同时，如果考虑生成的页面尺寸，也可以使用 HTML服务器控件，但是一些特殊的效果和功能：如数据绑 定等，这种效果只能用Web服务器控件实现。
2.HTML服务器控件
2.1 HTML普通控件（标记）
与HTML元素对应 比如：
<input type=“button” value=“确定” />
它没有runat="server"属性
3.1 一些常用Web服务器控件 2. 服务器端执行完成后再执行客户端代码
使用Page.ClientScript.RegisterStartupScript () 方法
例如： Page.ClientScript.RegisterStartupScript(this.GetType(), "MessageBox", "alert('用户名已注册')", true); 解释： this.GetType()：要注册的脚本类型
3.1 一些常用Web服务器控件 方法2：在页面启动时自动为Button控件生成的标签添加对 应的JavaScript脚本，适用于提示信息变化的情况。
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack)
{
this.btnOk.Attributes.Add("onclick", "return confirm('你确定要删除么') "); } }
<input type=“button” value=“确定” name=“Button1” runat=“Server” onserverclick=“btnClick”/>
2.HTML服务器控件
2.1 HTML普通控件（标记）
与HTML元素对应 比如：
<input type=“button” value=“确定” />
它没有runat="server"属性
3.1 一些常用Web服务器控件 2. 服务器端执行完成后再执行客户端代码
使用Page.ClientScript.RegisterStartupScript () 方法
例如： Page.ClientScript.RegisterStartupScript(this.GetType(), "MessageBox", "alert('用户名已注册')", true); 解释： this.GetType()：要注册的脚本类型
3.1 一些常用Web服务器控件 方法2：在页面启动时自动为Button控件生成的标签添加对 应的JavaScript脚本，适用于提示信息变化的情况。
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack)
{
this.btnOk.Attributes.Add("onclick", "return confirm('你确定要删除么') "); } }
<input type=“button” value=“确定” name=“Button1” runat=“Server” onserverclick=“btnClick”/>
第3章 服务器控件
属性：SelectedValue，返回一个String类型的值 属性： SelectedItem.Value ，返回一个String类型的值
3.4 列表控件 -- DropDownList 如何使某项被选中？
属性：SelectedValue = value 属性： Items.FindByValue = value
1. 在获取多选按钮组被选中的项时，会不会得到所有被选中的值？
3.7 多选按钮及多选按钮组
1. 在获取多选按钮组被选中的项时，会不会得到所有被选中的值？
3.8 文件上传控件
问题 1. 如何判断是否选择了文件？ 2. 文件的扩展名如何获取？ 3. 文件如何更名？ 4. 如何建立文件夹，并将文件保存到文件夹中？
3.5 按钮控件
控件代码
生成HTML代码 <input type="submit" name="Button1" value="Button" id="Button1" />
Text：在按钮上显示的文字 ValidationGroup：规定了验证过程中被验证的控件组 PostBackURL：单击按钮时发送到的URL CommandArgument：与此按钮管理的命令参数。 CommandName：与此按钮关联的命令 Click事件：单击时触发的事件
3.2 简单控件 -- HyperLink控件
控件代码 生成HTML代码
NavigateUrl：设置链接地址 Target：打开链接方式
3.2 简单控件 -- Image控件
控件代码
生成HTML代码
NavigateUrl：设置链接地址 Target：打开链接方式 AltermateText：图片不能正常显示时显示的文字
3.4 列表控件 -- DropDownList 如何使某项被选中？
属性：SelectedValue = value 属性： Items.FindByValue = value
1. 在获取多选按钮组被选中的项时，会不会得到所有被选中的值？
3.7 多选按钮及多选按钮组
1. 在获取多选按钮组被选中的项时，会不会得到所有被选中的值？
3.8 文件上传控件
问题 1. 如何判断是否选择了文件？ 2. 文件的扩展名如何获取？ 3. 文件如何更名？ 4. 如何建立文件夹，并将文件保存到文件夹中？
3.5 按钮控件
控件代码
生成HTML代码 <input type="submit" name="Button1" value="Button" id="Button1" />
Text：在按钮上显示的文字 ValidationGroup：规定了验证过程中被验证的控件组 PostBackURL：单击按钮时发送到的URL CommandArgument：与此按钮管理的命令参数。 CommandName：与此按钮关联的命令 Click事件：单击时触发的事件
3.2 简单控件 -- HyperLink控件
控件代码 生成HTML代码
NavigateUrl：设置链接地址 Target：打开链接方式
3.2 简单控件 -- Image控件
控件代码
生成HTML代码
NavigateUrl：设置链接地址 Target：打开链接方式 AltermateText：图片不能正常显示时显示的文字
推荐-ASPnet课件第三章 Web 服务器控件 精品
• Page.IsPostback 属性用于检查页面是否为首次 加载
• ViewState是中用来保存WEB控件回传 时状态值的页面隐藏控件
2
• 代码隐藏文件使开发人员可以在 C# 或 ©2007 iSoftStone Holdings Ltd. All Rights Reserved.
ImageButton 的属性和事件
属性名称 Text ImageURL
事件名称
Click
说明 获取/设置按钮上显示的文本 指定按钮图像的 URL
说明
单击按钮时会引发该事件，且包含该按 钮的窗体会提交给服务器
12
©2007 iSoftStone Holdings Ltd. All Rights Reserved.
14
©2007 iSoftStone Holdings Ltd. All Rights Reserved.
使用控制权转移控件
private void btnTenNews_Click(object sender, System.EventArgs e)
{ // 处理按钮 Click 事件 lblStatus.Text="已单击按钮！";
LinkButton 的属性和事件
属性名称 Text ImageURL
事件名称 Click
说明 获取/设置按钮上显示的文本 指定按钮图像的 URL
说明 单击按钮时会引发该事件，且包含该按 钮的窗体会提交给服务器
13
©2007 iSoftStone Holdings Ltd. All Rights Reserved.
第三章
Web 服务器控件
回顾
• 页文件是含有将在 Web 服务器上执行 代码的文件。其扩展名是 .aspx 或 .ascx
(ASP[1].net课件)第三章_Web_服务器控件
![(ASP[1].net课件)第三章_Web_服务器控件](https://img.taocdn.com/s3/m/cc958d9b6e1aff00bed5b9f3f90f76c661374c99.png)
3
使用内置服务器控件
利用内置的服务器控件加速开发过程。
Web服务器控件的事件处理
Web服务 器控件的事件模型
了解事件模型，如何触发和 响应事件。
事件处理程序的定 义
学习如何定义和实现事件处 理程序。
事件处理程序的绑 定
掌握将事件处理程序与Web 服务器控件绑定的方法。
Web服务器控件的常见属性
共享属性和事件
特定于某一控件的属性和事件
深入了解常见的共享属性和事件，如何使用它们。 了解每个控件独有的属性和事件，如何定制控件。
Web服务器控件的高级特性
控件的控制台
探索使用控制台扩展Web 服务器控件功能。
控件模板
了解如何使用控件模板创 建自定义布局。
控件的皮肤和外观
学习如何为控件应用个性 化的皮肤和外观。
总结
1
Web服务器控件的优势
总结Web服务器控件相对于其他技术的优点。
2
掌握Web服务器控。
3
Web服务器控件的应用实例
深入研究Web服务器控件的实际应用示例。
了解什么是Web服务器控件及其作用。
Web服务器控件的特点
探索Web服务器控件相比其他技术的优势。
Web服务器控件的分类
了解各种类型的Web服务器控件。
Web服务器控件的使用
1
服务器控件的特点
了解使用服务器控件的优点。
2
使用基础控件
掌握使用基础控件创建交互性的Web应用程序。
(ASP[1].net课件)第三章 _Web_服务器控件
在本章中，我们将深入研究Web服务器控件。了解其定义、特点和分类，掌 握使用方法、事件处理和常见属性，以及高级特性如控制台、模板、皮肤和 外观。我们将分享应用实例，并总结Web服务器控件的优势和应用方法。
第3章 基本Web服务器控件
超级链接样式按钮（LinkButton控件）
Button普通按钮控件
使用Button控件可以在网页上创建普通按钮。开发人员 可以为Click事件提供事件处理程序，以便以编程方式 控制在用户单击“提交”按钮时，执行需要的操作。
后台代码:
当点击按钮后的效果:
ImageButton图像按钮控件
ImageButton控件与Button控件功能相似，只是ImageButton控件可以在 按钮上添加图片。ImageButton用ImageUrl来指定图片的位置。按钮不再有名 称，而是一副图像，而Button按钮显示的是通过Text属性设置的文字。
复选框
CheckBox控件用于在Web窗体页上创建复选框，该复选框允许用户在 True或False状态之间切换。通过设置Text属性，可以指定在控件中 显示的标题，标题可显示在复选框的右侧或左侧。设置TextAlign属 性以指定标题显示在哪一侧。
下拉列表框
DropDownList控件用于创建单一选择的下拉列表控件。通过设置BorderColor、 BorderStyle和BorderWidth属性，可以控制DropDownList控件的外观。如要指 定在DropDownList控件中显示的项，则应针对每个项在DropDownList控件的 开始和结束标记之间，放置一个ListItem元素。使用DataTextField和 DataValueField属性分别指定每个列表项的Text和Value属性。
列表控件
使用BulletedList控件可以创建静态项目列表，可以和数 据源的数据进行绑定来显示数据列表，还可以通过编 程的方式对列表项进行动态控制。本节就介绍这两种 方式的用法。
演示BulletedList控件
第三章 Web服务器控件
28
第3章
Web服务器控件
例：创建RadioButtonList，实现“测试文本”背景 颜色改变的效果。
29
第3章
Web服务器控件
三、CheckBox和CheckBoxList 控件
实现多重可能性可以同时被选择。
1、属性与事件：
Checked:控件的选中状态 AutoPostBack:是否回传服务器 RepeatDirection: CheckBoxList中项目排列方向 CheckBox可以更好地控制单选按钮的布局，单选按钮 列表CheckBoxList利于绑定数据源 SelectedIndexChanged:改变选项后触发的事件过程
21
第3章
Web服务器控件
5、ImageButton（图像按钮）控件
是一个图片形式的按钮，功能与Button相同，该控件
是以图片的形式显示的，其外观与Image相似。
1、属性与事件：
ImageUrl:获取或设置控件中显示的图片位置
Click: 单击按钮
22
第3章
Web服务器控件
6、HyperLink （超级链接）控件
说明：HTML控件是属于浏览器端控件与DW中的控件是一 样的。标准控件是最常用的控件，默认情况标准控件都是服务 器控件。
12
第3章
三、服务器控件
Web服务器控件
服务器控件：即可编程的服务器端对象，典型情况下表现为页 面中的UI元素，服务器控件参与页面的执行过程，并在客户端生成 自己的标记呈现内容。
25
例题讲解
例：设置圆形热点链接定位另一张图片，并设置替 代文本
26
第3章
Web服务器控件
二、RadioButton和RadioButtonList 控件
第三章服务器控件
第三章 服务器控件
3.4 高级控件 3.4.1 使用BulletedList控件实现项目符号和编号
BulletStyle属性：设置项目符号的样式 FirstBulletNumber属性：设置开始列表项编号的值（只 有 当BulletStyle 值为“Numbered”有效） DisplayMode 属性：设置项目符号的样式，可能的取值包 括Text 、HyperLinkLink、Button
注：当用户需要在页面之间导航时，常使用Hyperlink Text:指定超链接显示的文本 ImageUrl:指定超链接所显示的图像 NavigateUrl:目标地址 Target:设置目标链接要显示的位置
第三章 服务器控件
3.3.6 列表控件（ ListBox 控件）
ListBox控件用于建立单选或多选的下拉列表 selectionmode 属性：列表的选择模式 Rows属性： 列表框中的显示行数 SelectedItem属性:返回被选中的选项
（2）所有属性（Text属性除外）均定义在一对尖括号<>内， 如:<asp:hyperlink ID="hy1" runat="server" NavigateUrl="login.aspx">链接</asp:hyperlink>
第三章 服务器控件
3.2 控件的共有属性
1 AccessKey：为控件指定键盘的快捷键。
2 HTML服务器控件：由HTML元素添加runat=“server”, 衍生而来. 在System.Web.UI.HTMLControls的命 名空间中。 3 HTML控件和HTML服务器控件运行方式不同， HTML 控件运行在客户端， HTML服务器控件运行在服务器端
3.服务器端控件(1)
16
CheckBox与RadioButton示例
17
CheckBox与RadioButton示例
{ lblResult.Text = "您的选择如下：<br>";
protected void btnSubmit_Click(object sender, EventArgs e)
// 判断复选框是否选中
3.3.5 显示图像
Image控件 主要属性：
AlternateText:为图像提供替代文本 DescriptionURL：指向详细描述的图像链接 GenerateEmptyAlternateText: 为AlternateText设置为空串 ImageAlign:对齐方式 ImageURL:指定图片的URL
单数据。这3个控件具有相同的功能，却具有不同的外观。
Button控件生成普通的按钮，产 生的Html输出为 <input type=“submit” /> LinkButton控件生成一个链接， 使用JavaScript把表单传回服务器： <a id="btnSubmit2" href="javascript:__doPostBack('b tnSubmit2','')">提交</a> ImageButton控件与Button控件类 似，只是总是使用图片。
lblSearch.Text = "姓名：" + tbName.Text;
} }
21
指定默认按钮
使用Form控件的DefaultButton属性来指定表单的默认
按钮，可以按回车键来调用这个按钮。
CheckBox与RadioButton示例
17
CheckBox与RadioButton示例
{ lblResult.Text = "您的选择如下：<br>";
protected void btnSubmit_Click(object sender, EventArgs e)
// 判断复选框是否选中
3.3.5 显示图像
Image控件 主要属性：
AlternateText:为图像提供替代文本 DescriptionURL：指向详细描述的图像链接 GenerateEmptyAlternateText: 为AlternateText设置为空串 ImageAlign:对齐方式 ImageURL:指定图片的URL
单数据。这3个控件具有相同的功能，却具有不同的外观。
Button控件生成普通的按钮，产 生的Html输出为 <input type=“submit” /> LinkButton控件生成一个链接， 使用JavaScript把表单传回服务器： <a id="btnSubmit2" href="javascript:__doPostBack('b tnSubmit2','')">提交</a> ImageButton控件与Button控件类 似，只是总是使用图片。
lblSearch.Text = "姓名：" + tbName.Text;
} }
21
指定默认按钮
使用Form控件的DefaultButton属性来指定表单的默认
按钮，可以按回车键来调用这个按钮。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.2.10 综合示例一（2）3-2.aspx
3.2.11 HtmlInputFile（文件上传控件）
为什么要使用文件上传控件？ <form> 标记上的 Enctype 属性必须设置为
"multipart/form-data"。 语法示例：
<input id="File1" type=file runat="server">
第3章 服务器控件
Company
LOGO
讲解提纲
3.1 控件简介 3.2 HTML服务器控件 3.3 WEB服务器控件 3.4 验证控件 3.5 用户控件 3.6 对控件的高级操作
本章要点
理解什么是控件及控件的属性、事件和方法 掌握基本的HTML服务器控件的使用，如
文本框、单选框、复选框、下拉列表框、文本区 域、按钮等
简单的文件上传示例
3-3.aspx
稍微复杂的文件上传示例
3-4.aspx
3.3Web服务器控件
基本上与HTML服务器控件一一对应，但 比HTML服务器控件功能更强。
</select>
下拉列表框示例
Test3_3.aspx
3.2.8 HtmlGenericControl（一般控件）
<body | span | div | … id="控件名称" runat="server" /> 显示的HTML代码 | 显示的文本
</body | span | div | …>
3.2.5 HtmlInputRadioButton（单选框）
<input id="控件名称" type="radio" value="单选框的值" name="组的名称" checked="True | False" runat="server" />
单选框示例
Test3_1.aspx
3.2.6 HtmlInputCheckBox（复选框）
不仅仅是页面 上的表单元素。
是想 将页面上所有 的内容都用控 件表示。
3.1.2 控件的声明及属性、事件和方法
声明控件的第1种方法
<asp:Label id="message" Text="欢迎大家" runat="server"/>
<asp:Button id="enter" Text="确定" onClick="Enter_Click" runat="server" />
3.2.9 HtmlInputButton（提交、重 置和普通按钮）
<input id="控件名称" type="submit | reset | button" value="按钮上的文字" onServerClick="事件过程名称" runat="server" />
3.2.10 综合示例一（1）3-2.aspx
3.2.3 HtmlTextArea（多行文本框）
<textarea id="控件名称" cols="整数值，显示的列数" rows="整数值，显示的行数" value="多行文本框中的文字" runat="server" />
3.2.4 HtmlInputHidden（隐藏控件）
<input id="控件名称" type="hidden" value="隐藏框中的文字" runat="server" />
控件示例
3-1.aspx
3.1.3 Web表单的工作原理
第1步
第2步
第3步
特别注意：
每一次运行时都要从头到尾执行着整个文件 在第3步中仍然要首先执行Page_Load过程，然后才执
行Enter_Click过程，然后继续执行HTML代码部分。
3.1.4 控件的分类
控件的类型
HTML服务器控件 Web服务器控件 验证控件 用户控件
声明控件的第2种方法
<asp:Label id="message" runat="server">欢迎 大家</asp:Label>
<asp:Button id="enter" Text="确定" onClick="Enter_Click" runat="server" ></asp:Button>
使用控件的原则
3.2 HTML服务器控件
这一类控件是主要是为了保留原来的HTML元素 标记。一般和原来的HTML标记一一对应，只是 增加了runat=“server”。
常见的有：HtmlForm, HtmlButton, HtmlInputButton, HtmlInputCheckBox, HtmlInputRadioButton, HtmlInputText, HtmlSelect, HtmlTextArea等
பைடு நூலகம்
3.2.1 HtmlForm（Web表单）
它其实就是一个容器，用来盛放其它 表单控件。
<form id="控件名称" runat="server" /> ……
</form>
3.2.2 HtmlInputText（单行文本框和密码框）
<input id="控件名称" type="text | password" maxlength="整数，表示输入最大的字符数" size="整数，表示文本框的宽度" value="文本框中的文字" runat="server" />
熟练掌握利用文件控件上传文件 掌握基本的Web服务器控件的使用，如
文本框、单选框、复选框、下拉列表框、文本区 域、按钮、日历控件等
掌握验证控件的使用等 会制作一个简单的用户控件
3.1 控件简介
什么是控件？ 控件的声明及属性、事件和方法 Web表单的工作原理 控件的分类
3.1.1 什么是控件
<input id="控件名称" type="checkbox" value="复选框的值" checked="True|False" runat="server" />
复选框示例
Test3_2.aspx
3.2.7 HtmlSelect（下拉列表框）
<select id="控件名称" size="整数值，表示显示的行数" runat="server"> <option value="选项值1">选项1</option> <option value="选项值2">选项2</option>