第5章_ASPNET常用服务器控件.ppt

第5章ASP NET常用服务器控件 内容 服务器控件概述HTML服务器控件Web服务器控件验证控件用户控件 内容提要 ASP NET支持三种控件 Web服务器端控件 HTML服务器端控件和用户自定义控件 Web服务器端控件是 NET推荐使用的控件 Web服务器端控件除了常用的输入输出控件以外 还包括验证控件 4 1服务器控件概述 ASP NET服务器控件可以分为如下几类 HTML服务器控件 提供了对标准HTML元素的类封装 在HTML控件中添加一个在服务器端运行的属性 即可以由通用的客户端HTML控件转变为服务器端HTML控件 使开发人员可以对其进行编程 Web服务器控件 比HTML服务器控件具有更多功能 Web服务器控件不仅包括窗体控件 例如按钮和文本框 而且还包括特殊用途的控件 例如日历 菜单和树视图控件 Web服务器控件与HTML服务器控件相比更为抽象 因为其对象模型不一定反映HTML语法 验证控件 这些控件可以使开发人员更容易对一些控件中的数据进行验证 如验证控件可用于对必填字段进行检查 对照字符的特定值或模式进行测试 验证某个值是否在限定范围之内等 导航控件 这些控件被设计用于显示站点地图 允许用户从一个网页导航到另一个网页 如Menu控件 SiteMapPath控件等 数据控件 用于显示大量数据的控件 如GridView ListView控件等 这些控件支持很多高级的定制功能 比如模板 允许添加 删除 编辑等 数据控件还包括数据源控件 如SqlDataSource LinqDataSource控件等 使开发人员能够使用声明的方式绑定到不同类型的数据源 简化数据绑定的过程 登录控件 简化创建用户登录页面的过程 使开发人员更容易编写用户授权和管理的程序 WebParts控件 WebParts是ASP NET中用于构建组件化的 高度可配置的Web门户的一套ASP NET编程控件 ASP NETAJAX控件 允许开发人员在Web应用程序中使用AJAX技术 而不需要编写大量的客户端代码 4 2HTML服务器控件 HTML服务器控件概述HTML服务器控件综合示例 4 2 1HTML服务器控件概述 1 HTML服务器控件的基本语法传统的HTML元素是不能被ASP NET服务器端直接使用的 但是通过将这些HTML元素的功能进行服务器端的封装 开发人员就可以在服务器端使用这些HTML元素 在VisualStudio2010集成开发环境中 从工具箱的 HTML 选项中拖放一个Input submit 按钮控件到设计页面上 切换到源视图 Input submit 的HTML源代码标记如下 在标记中直接添加runat server 可以将HTML控件转化为HTML服务器控件 设置为服务器控件后 源代码标记如下 id用来设置控件的名称 在一个程序中各控件的id均不相同 具有唯一性 id属性允许以编程方式引用该控件 runat server 表示作为服务器控件运行 2 HTML控件的类型 HTML控件位于System Web UI HtmlControls命名空间中 从HtmlControl基类中直接或间接派生出来的 包含二十多个HTML控件 1 输入控件2 文本区域控件3 表格控件4 Image控件5 选择控件6 水平线控件7 Div容器控件 3 HTML服务器控件的公共属性 4 HTML服务器控件的事件 HTML服务器控件不仅可以添加客户端事件代码 而且可以添加服务器端事件代码 例4 1 演示如何为HtmlInputSubmit控件的事件添加方法 参见示例 第5章 HTMLControlDemo HtmlControlEvent aspx HTML控件的常见客户端事件 4 2 2HTML服务器控件综合示例 例4 2 演示如何使用HTML服务器端控件制作一个图片浏览器 参见示例 第04章 HTMLControlDemo Picture aspx 4 3Web服务器控件 Web服务器控件概述常用Web服务器控件 4 3 1Web服务器控件概述 1 Web服务器控件基本语法从左边工具箱中拖放一个Web服务器控件到页面上 其HTML源代码标记如下 或者 如Button控件 基本语法为 将控件添加到Web窗体中 有3种方法 方法1 从工具箱中添加控件 方法2 在源视图中 直接添加控件声明代码 方法3 以编程方式动态创建Web服务器控件 2 Web服务器控件的公共属性 控件属性的设置有两种方法 方法1 设计时通过属性窗设置控件的属性 方法2 运行时以编程方式设置控件的属性 3 Web服务器控件的客户端事件 向ASP NET服务器控件添加客户端事件的3种方法 方法1 以声明方式向ASP NET服务器控件添加客户端事件处理程序在源视图中 为控件直接添加事件属性 例如 onmouseover或onkeyup 针对不同属性添加要执行的客户端脚本 例4 3 演示一个包含客户端脚本的ASP NET网页 当用户将鼠标移到按钮上方时 此脚本就会更改该按钮的文本颜色 参见示例 第5章 WebControlDemo ClientDemo aspx 方法2 以编程方式向ASP NET控件添加客户端事件处理程序 在页面的Init或Load事件中调用控件的Attributes集合的Add方法来动态添加客户端事件处理程序 例4 4 演示如何动态地向TextBox控件添加客户端脚本 该客户端脚本显示TextBox控件中的文本长度 参见示例 第5章 WebControlDemo ClientDemo aspx 方法3 向按钮控件添加客户端Onclick事件 在按钮控件 Button LinkButton和ImageButton控件 中 要添加客户端Onclick事件 可以在设计视图中将按钮控件的OnClientClick属性设置为要执行的客户端脚本 也可以在源视图中直接添加OnClientClick属性 例4 5 演示如何向Button控件添加客户端Click事件 参见示例 第5章 WebControlDemo ClientDemo aspx 4 Web服务器控件的服务器端事件 添加服务器端事件的2种方法 方法1 设计时在属性窗中添加事件处理 方法2 运行时以编程方式动态添加事件处理 例如 protectedvoidButton1 Click objectsender EventArgse 然后 将该方法和控件的单击事件关联 代码如下 Button1 Click newEventHandler Button1 Click 4 3 2常用Web服务器控件 1 Label控件 用于在网页上显示文本 声明Label的语法格式 Label控件只能用来显示文本 它只有Text属性 用来获取或设置指定在Label控件上显示的文字 2 TextBox控件 TextBox控件可用于制作单行 多行文本框和密码框 声明TextBox控件的语法格式 TextBox控件本身特有的属性 AutoPostBack属性 获取或设置当TextBox控件上的内容发生改变时 是否自动将窗体数据回传到服务器 默认为False 不回传 为True时 则要回传 该属性要与TextChanged事件配合使用 MaxLenth属性 获取或设置文本框中最多允许的字符数 当TextMode属性设为MultiLine时 此属性不可用 ReadOnly属性 获取或设置TextBox控件是否为只读 当该属性设置为True时 将禁止用户输入或更改现有值 默认值为False Text属性 获取或设置文本框的文本内容 TextMode属性 获取或设置文本框的类型 TextBox有3种取值 MultiLine为多行输入模式 Password为密码输入模式 SingleLine为单行输入模式 默认值为SingleLine TextBox主要的服务器端事件是TextChanged事件 当Text属性的值改变时 会触发此事件 当AutoPostBack属性设置为True时 用户更改文本框的内容并将焦点移开文本框时 将自动回传页面并触发TextChanged事件 当AutoPostBack属性设置为False时 即便用户更改文本框的内容并将焦点移开文本框 也不会自动回传页面 需等到回传页面的事件发生时 如按钮控件的Click事件 才会触发TextChanged事件 例4 6 演示如何将TextBox控件的AutoPostBack属性与TextChanged事件配合使用 参见示例 第5章 WebControlDemo TextBoxDemo aspx 超链接 HyperLink 控件用于创建文本或图片超链接 声明HyperLink控件的语法格式 HyperLink控件的主要属性如下 ImageURL属性 获取或设置HyperLink控件的图片来源 NavigateURL属性 获取或设置HyperLink控件所要链接到的URL Target属性 获取或设置单击HyperLink控件时显示链接到的网页内容的目标窗口或框架 Text属性 获取或设置HyperLink控件的超链接文本 例4 7 演示如何设置Target属性来指定窗口或框架 用以显示与HyperLink控件关联的页 参见示例 第5章 WebControlDemo HyperLinkDemo aspx 3 HyperLink控件 4 Image控件Image控件只是简单地完成一个图像显示任务 与HTML的Image功能相同 声明Image控件的语法格式为 该控件的属性 AlternateText属性 设置图像无法显示时显示的替换文字 ImageUrl属性 设置图像所在的位置 ToolTip属性 将鼠标放置在图片控件上时 显示的工具提示 注意 Image控件不响应用户事件 但是它可以根据其它控件的输入动态地显示图片 5 Button LinkButton和ImageButton控件 ASP NET包含3类用于向服务器端提交表单的控件 Button LinkButton和ImageButton 这3类控件拥有同样的功能 但每类控件的外观截然不同 特殊属性 CommandArgument 用于指定传给Command事件的命令参数 CommandName 指定传给Command事件的命令名 OnClientClick 指定点击按钮时执行的客户端脚本 PostBackUrl 单击按钮时所发送到的URL Text 将在按钮上呈现的文本 UseSubmitBehavior 指示按钮是否呈现为提交按钮 Button控件支持Focus 方法 用于把焦点设为该Button控件 Button控件还支持下面两个事件 Click 点击Button控件时引发 Command 点击Button控件时引发 CommandName和CommandArgument的值传给这个事件 声明Button控件的语法格式 例4 8 在页面上包含一个Button控件 点击该Button控件 将在Label控件中显示系统日期 参见示例 第5章 WebControlDemo ButtonDemo aspx 声明LinkButton控件的语法格式为 按钮上的文字 例4 9 在页面上包含一个LinkButton控件 点击该LinkButton控件 将在Label控件中显示系统日期 参见示例 第5章 WebControlDemo LinkButtonDemo aspx ImageButton控件是以图片的形式提供的按钮控件 功能与Button相同 外观与Image控件相同 声明ImageButton控件的语法格式为 例4 10 在页面中包含一个ImageButton和一个Label控件 点击该ImageButton上的图片 将在Label控件中显示点击的位置 参见示例 第5章 WebControlDemo ImageButtonDemo aspx 例4 11 演示如何用一个事件方法统一处理多个按钮的提交事件 参见示例 第5章 WebControlDemo ButtonsDemo aspx DropDownList控件允许用户从预定义的下拉列表中选择一项 声明DropDownList控件的语法格式为 Text 6 DropDownList和ListBox控件 DropDownList控件的主要属性如下 AutoPostBack属性 获取或设置当改变DropDownList控件的选择状态时 是否自动上传窗体数据到服务器 默认为False Items属性 包含该控件所有选项的集合 每个列表项都是一个单独的对象 具有自己的属性 SelectedIndex属性 获取当前选择项的下标 下标从0开始 SelectedItem属性 获取当前选择项对象 DropDownList控件有SelectedIndexChanged事件 当用户选择一项时 DropDownList控件将引发SelectedIndexChanged事件 默认情况下 此事件不会导致向服务器发送页面 但当该控件的AutoPostBack属性设置为True时 该事件会立即回发页面 例4 12 演示DropDownList控件的使用 参见示例 第5章 WebControlDemo DropDownListDemo aspx ListBox控件与DropDownList控件的功能基本相似 ListBox控件将所有选项都显示出来 提供单选或多选的列表框 ListBox控件比DropDownList控件多两个属性 Rows属性 获取或设置ListBox控件显示的选项行数 默认值为4 SelectionMode属性 获取或设置ListBox控件的选项模式 Single为单选 Multiple为多选 默认为Single 当允许多选时 只需按住Ctrl键或Shift键并单击要选取的选项 便可完成多选 例4 13 演示ListBox控件的使用 参见示例 第5章 WebControlDemo ListBoxDemo aspx CheckBox控件用于创建单个复选框 供用户选择 声明CheckBox控件的语法格式 CheckBox控件的常用属性 Checked属性 获取或设置该项是否选中 TextAlign属性 控件文字的位置 Text属性 获取或设置CheckBox控件的文本内容 Value属性 获取或设置CheckBox控件的值内容 7 CheckBox和CheckBoxList控件 AutoPostBack属性 获取或设置当改变CheckBox控件的选择状态时 是否自动回传窗体数据到服务器 值为True时 表示单击CheckBox控件 页面自动回发 值为False时 不回发 默认值为False CheckBox控件具有CheckedChanged事件 当Checked属性的值改变时 会触发此事件 与TextBox控件类似 该事件要与AutoPostBack属性配合使用 例4 14 演示CheckBox控件的使用 参见示例 第5章 WebControlDemo CheckBoxDemo aspx 声明CheckBoxList控件的语法格式 text 该控件的属性 用法及功能与ListBox控件基本相同 除此之外 还有自己的特殊属性 RepeatDirection 表示是横向还是纵向排列 RepeatColumns 一行排几列 TextAlign属性 控件文字的位置 Selected属性 表示该选项是否选中 例4 15 使用CheckBoxList控件完成 例4 14 的功能 参见示例 第5章 WebControlDemo CheckBoxListDemo aspx RadioButton控件用于创建单个单选框 供用户选择 声明RadioButton控件的语法格式 RadioButton控件的常用属性和事件与CheckBox控件基本相同 RadioButton控件还有一个特殊的属性GroupName 用于设置单选按钮所属的组名 通过将多个单选按钮的组名设为相同值 将其分为一组相互排斥的选项 例4 16 演示RadioButton控件的使用 参见示例 第5章 WebControlDemo RadioButtonDemo aspx 8 RadioButton和RadioButtonList控件 与CheckBoxList控件类似 RadioButtonList控件是一个RadioButton控件组 当存在多个单选框时 用该控件比RadioButton简单 声明RadioButtonList控件的语法格式 Text RadioButtonList控件和CheckBoxList控件的属性和事件相同 例4 17 使用RadioButtonList控件完成 例4 16 的功能 参见示例 第5章 WebControlDemo RadioButtonListDemo aspx Panel控件是一个放置其它控件的容器 可以在其内放置不同控件 利用它的这个特性 可以将不同的控件组成一个群组 并控制它的显示或隐藏 声明Panel控件的语法格式 Panel控件的主要属性 BackImageUrl属性 设置Panel背景图形 HorizontalAlign属性 设置水平对齐方式 Visible属性 是否显示还是隐藏 ScrollBars属性 是否设置水平或垂直滚动条 例如 将该属性设置为Auto时 当控件长度和宽度超过Panel控件的长或宽时 将自动显示出滚动条 9 Panel控件 MultiView和View控件可以制作选项卡的效果 MultiView控件用作一个或多个View控件的外部容器 View控件又可包含标记和控件的任何组合 切换到源视图 控件声明代码如下 10 MultiView和View控件 MultiView控件的常用属性 方法和事件 ActiveViewIndex属性 用于获取或设置当前被激活显示的View控件的索引值 默认值为 1 表示没有View控件被激活 SetActiveView方法 用于激活显示特定的View控件 ActiveViewChanged事件 当视图切换时被激发 在MultiView控件中 一次只能将一个View控件定义为活动视图 如果某个View控件定义为活动视图 它所包含的子控件则会呈现到客户端 可以使用MultiView控件的ActiveViewIndex属性或SetActiveView方法定义活动视图 如果ActiveViewIndex为 1 则MultiView控件不向客户端呈现任何内容 例4 18 演示View和MultiView控件的使用 参见示例 第5章 WebControlDemo MultiViewDemo aspx Calendar控件用于创建日历 在该控件上用户可以方便准确地输入日期 声明Calendar控件的语法格式 与日期选取及设置的有关属性 SelectionMode属性 设置日期选择模式 可设为Day 只能选择某一天 None 不能选择日期 只能显示日期 DayWeek 可以选择整星期或某天 DayWeekMonth 可以选择某月 某星期或某天 SelectedDate属性 用户选中的日期 SelectedDates属性 用户选择的多个日期 是一个数组 Calendar控件具有SelectionChanged事件 当用户选择日期时 会驱动该事件 例4 19 演示Calendar控件的使用 参见示例 第5章 WebControlDemo CalendarDemo aspx 11 Calendar控件 4 4验证控件 验证控件概述验证控件的使用验证组的使用禁用验证以编程方式测试验证有效性 4 4 1验证控件概述 为什么要验证用户输入验证过程 为什么要验证用户输入 输入验证是检验Web窗体中用户的输入是否和期望的数据值 范围或格式相匹配的过程 可以减少等待错误信息的时间降低发生错误的可能性 从而改善用户访问Web站点的体验用户输入验证的目的减少错误处理的等待时间避免非法的用户输入导致的错误结果避免非法的用户输入导致服务器崩溃避免欺骗或恶意代码阻止Web窗体进行下一步处理 直到所有的用户输入都通过验证 验证过程 客户端验证和服务器端验证的区别 ASP NET验证控件 验证控件的共有属性 Display属性 流布局模式下 设置多个验证控件的错误信息的空间排列方式 均验证失败 第一个验证控件通过验证成功 均验证失败 第一个验证控件通过验证成功 Static显示 Dynamic显示 ErrorMessage属性指定验证失败后在验证控件中显示的文本如果设置了Text属性 不显示ErrorMessageText属性指定将在验证控件中显示的文本 4 4 2验证控件的使用 1 RequiredFieldValidator控件在页中添加RequiredFieldValidator控件并将其链接到必需的控件 可以指定用户在ASP NET网页上的特定控件中必须输入信息 例4 20 演示如何验证用户在文本框中已输入数据 参见示例 第5章 WebValidator RequiredFieldValidator aspx InitialValue属性 当设置该值时 表示控件中输入该值时无效 其他任何情况均有效 例4 21 演示如何使用RequiredFieldValidator控件来验证DropDownList控件的输入 参见示例 第04章 WebValidator ShowInitialValue aspx 2 CompareValidator控件测试用户的输入是否符合指定的值或者符合另一个输入控件的值 空输入作为有效验证 ControlToCompare 确定要比较的另一个控件 Operator 指定使用的比较运算符 Type 指定数据类型 希望输入控件中的值与某个数据类型匹配 ValueToCompare 确定要比较的某个常数值 例4 23 使用CompareValidator控件对数据进行类型检查 要求用户输入合法的日期 否则验证失败 参见示例 第5章 WebValidator CompareValidator aspx 例4 22 在设计用户注册页面时 希望用户输入两次密码 使用CompareValidator验证控件来判断两次输入的密码是否相等 3 RangeValidator控件 验证输入值是否在给定的范围内 输入值介于最小值和最大值之间是有效的 空输入作为有效验证 MinimumValue 指定有效范围的最小值 MaxmumValue 指定有效范围的最大值 Type 指定要比较的值的数据类型 例4 24 演示如何通过RangeValidator控件验证文本框中的年龄输入在0 200之间 参见示例 第5章 WebValidator RangeValidator aspx 4 RegularExpressionValidator控件 在需要确定该值是否与某个正则表达式所定义的模式相匹配的情况下使用ValidationExpression属性 编辑正则表达式VisualStudio NET提供以下预定义模式电话号码邮政编码E mail地址 注意 提供的这些预定义的模式的正则表达式未必正确 正则表达式字符含意 例如 S 3 6 3到6位字符 A Za z 2 5 由2 5个字母组成 A Z d 5 以一个大写字母开头 加5位数字 d 5 5位的整数 至少包含 中的一个字符 d 11 d 3 4 d 7 8 中国电话号码 手机或固定电话 例4 25 演示如何使用预定义表达式来验证输入的电子邮件地址 参见示例 第5章 WebValidator RegularExpressionValidator aspx 例4 26 演示如何使用自定义表达式验证输入 如果要求用户输入一个以大写字母开头 再加5位阿拉伯数字的格式化数据 很显然 预定义表达式里没有这样的格式定义只能通过正则表达式进行自定义 按照上面的格式要求 该正则表达式应该为 A Z d 5 5 CustomValidator控件 必须手动编写客户端和服务器端验证代码ClientValidationFunction属性用于验证的自定义客户端脚本函数的名称ServerValidate事件服务器端验证事件的名称在验证函数中通过属性Args IsValid来设置CustomValidator控件是否有效 例4 27 下面将编写一个CustomValidator控件的验证函数用来确定TextBox控件中用户输入是否超过8个字符 参见示例 第5章 WebValidator CompareValidator aspx CustomValidator灵活性高 可以与给定的公式比较与存储在服务器中的数据比较 如存储在数据库中的密码通过调用COM对象比较通过调用Web服务比较 组合使用验证控件 多个验证控件应用于同一输入控件各个验证控件的ControlToValidate属性设为同一值只有RequiredFieldValidator检查输入控件的值是否为空值组合使用验证控件验证电话号码的例子RequiredFieldValidator验证用户输入的值是否为空RegularExpressionValidator验证电话号码是否符合给定格式 6 ValidationSummary控件 Page IsValid返回False时显示错误信息在一个位置上汇总Web页上所有验证控件的错误信息HeaderText属性 设置标题DisplayMode属性 有3个值可选 BulletList 项目符号列表显示List 无符号列表显示SingleParagraph 单个段落显示 ShowMessageBox属性 是否弹出一个错误列表的对话框使用ValiationSummary控件时 其他验证控件通常使用Text 指示错误出现的位置 例4 28 演示如何使用ValidationSummary控件显示错误信息摘要 参见示例 第5章 WebValidator ValidationSummary aspx 4 4 3使用验证组 在页面上控件比较多时 可以将不同的控件归为一组 ASP NET在对每个验证组进行验证时 与同页的其他组无关通过将要分在同一组的所有控件的ValidationGroup属性设置为同一个名称 字符串 即可创建验证组 例4 29 演示在Button控件回发到服务器时 如何使用ValidationGroup属性指定要验证的控件 参见示例 第5章 WebValidator ValidateGroup aspx 4 4 4禁用验证 禁用验证的方法 设置ASP NET服务器控件的属性 CausesValidation false 来避开客户端和服务器的验证 而不只是客户端验证