第2章 标准Web服务器控件.ppt

第二章标准Web服务器控件 回顾 Web窗体将Web应用程序分为两部分 可视化组件和该页的编程逻辑 ASP NET页面请求 执行 响应过程 页面和代码分离模型 WEB窗体处理的各个阶段 在页面加载时引发Page Load事件 Page IsPostback属性用于检查页面是否为首次加载 ViewState是ASP NET中用来保存WEB控件回传时状态值的页面隐藏控件 本章目标 掌握Web服务器控件的基本属性 熟练使用ASP NET中的内部控件 了解列表控件 熟悉复杂控件 掌握验证控件的使用方法和用途 2 1Web控件概述 ASP NET控件 内部 列表 复杂 验证 2 1WEB控件类 在System Web UI WebControl名字空间中定义所有的web控件都是从继承webcontrol基类开始的 并包括一些使用控件时所需要的基本属性 2 1 1Web控件 内部控件 ASP NET引入一组称为 内部控件 的新控件 它们专门用于ASP NET 内部控件的使用方法与HTML控件相同 它们映射到HTML元素并通过使用runat server 属性在服务器上执行 2 1 2Web控件 列表控件 这些控件用于在Web页中创建数据列表 填充这些控件的数据通常是从数据库中检索的 用户可以从列表中选择一种选项 并且该选项将存储在数据库中 通常使用的标准列表控件是Repeater DataList和GridView控件 2 1 3Web控件 复杂控件 当希望控件拥有复杂的功能或使用HTML元素无法创建的功能丰富的用户界面时 可以使用复杂控件 日历Web控件可以创建一个日历用户可以从中选择当前 以前和将来某个月份的日期用户无需输入不同的日期 只需使用同一日历控件来选择日期即可 2 1 4Web控件 验证控件 输入控件的数据需要进行准确性和取值范围方面的检查 在ASP中 验证工作只能使用客户端脚本语言在客户端上执行 ASP NET引入智能验证控件以使验证工作在服务器端执行 2 1 5作为对象的Web控件 Web控件是对象与对象一样 Web控件拥有方法和属性 并且响应事件 一旦将Web控件包括在Web页中 就可以设置其属性并调用其方法 可以为Web控件编写服务器端代码以响应在客户端上发生的事件 2 1 5作为对象的Web控件示例 voidButton1 click ObjectSrc EventArgsE lblMessage Text Src ToString btnButton1 Enabled false btnButton2 Visible true voidButton2 click ObjectSrc EventArgsE lblMessage Text btnButton2 Visible false btnButton1 Enabled true 服务器端控件是最常用的控件 在ASP NET应用程序中 服务器端控件是ASP NET内置的控件 使用服务器端控件是必须向控件添加 runat server 属性 以便与客户端控件相区别 如果向Web页面添加没有 runat server 属性的服务器端控件 应用程序会自动提示该控件设计错误 而对于客户端控件而言 可以添加此属性 也可以不添加此属性 2 1 6ASP NET控件属性 2 1 6ASP NET控件属性 AccessKey属性 用来为控件指定键盘的快速键 这个属性的内容为数字或是英文字母 例如设置为 A 那么使用时用户按下Alt A组合键就会制动将焦点移动到这个控件的上面 Backcolor属性用于设置对象的背景色 其属性的设定值为颜色名称或是 RRGGBB的格式 边框属性包括有BorderWidth BorderColor BorderStyle等几个属性 其中 BorderWidth属性可以用设定Web控件的边框宽度 单位是像素计算 Enabled属性用于设置控件是否可用 当该属性值为False时 控件为禁止状态 当该属性值为True时控件为可用状态 对于有输入焦点的控件 用户可以对控件执行一定的操作 2 1 6ASP NET控件属性 Font属性有以下几个子属性 分别表现不同的字体特性 Font Bold 如果属性值设定为True 则会变成粗体显示 Font Italic 如果属性值设定为True 则会变成斜体显示 Font Names 设置字体的名字 Font Size 设置字体大小 共有九种大小可供选择Smaller Larger XX Small X Small Small Medium Large X Large或者XX Large Font Strikeout 如果属性值设定为True 则文字中间显示一条删除线 Font Underline 如果属性值设定为True 则文字下面显示一条底线 TabIndex属性用来设置Tab按钮的顺序 当用户使用者按下Tab键时 输入焦点将从当前控件跳转到下一个可以获得焦点的控件 TabIndex键就是用于定义这种跳转顺序的 合理的使用TabIndex属性 可以使用户使用程序时更加轻松 使得程序更加人性化 2 1 6ASP NET控件属性 ToolTip属性用于设置控件的提示信息 在设置了该属性值后 当鼠标停留在Web控件上一小段时间后就会出现ToolTip属性中设置的文字 Visible属性决定了控件是否会被显示 如果属性值为true将显示该控件 否则将隐藏该控件 Height和Width属性分别用于设置控件的高度和宽度 单位是pixel 像素 CssClass属性用于设置控件呈现的样式 2 2内部控件 Label控件TextBox控件Image控件Button控件ImageButton和LinkButton控件HyperLink控件CheckBox控件和CheckBoxList控件DropDownList控件ListBox控件RadioButton控件和RadioButtonList控件Panel控件Table控件 TableRow和TableCell控件 2 2 1Label控件 Label控件又称标签控件 主要是用来显示文本信息 在使用Label控件时 可以通过改控件的Text属性设置其显示文本 控件的使用方法有如下两种 显示的文本 2 2 2TextBox控件 TextBox控件是一个文本框 用于让用户输入文本 是经常使用的一个输入控件 单行输入 多行输入 密码输入 2 2 3Image控件 Image控件又称图像控件 主要用来显示用户的图片或图像信息 2 2 4Button控件 Buton控件可以用来作为Web页面中的普通按钮 submit类型按钮用来把Web页面提交到服务器处理 没有从服务器返回的过程 command类型的按钮有一个相应的command名 通过CommandName属性设置该命令名字 当有多个command类型的按钮共享一个事件处理函数时 可以通过Command名字区分要出来哪个Button的事件 2 2 5ImageButton和LinkButton控件 ImageButton控件和LinkButton控件是两个特殊的Button控件 其功能和Button基本一致 2 2 6HyperLink控件 HyperLink类直接继承于WebControl类 用于创建到其他Web页的链接 内部控件 控制转移 将数据回发到服务器 在页面之间导航 将数据保存到服务器或访问服务器上的数据 LinkButton Button ImageButton Hyperlink Button和ImageButton用于将数据传递回服务器 当用户需要在页面之间导航时 主要使用Hyperlink 尽管LinkButton看起来像浏览器上的超链接 但是在单击时 它们会将数据传递回服务器 2 2 7CheckBox控件和CheckBoxList控件 CheckBox类继承于WebControl类 用于允许用户选择true状态或false状态 2 2 8RadioButton控件和RadioButtonList控件 RadioButton控件用于从一个或多个选项中选择一项 属于多选一控件 RadioButtonList控件用于提供一组RadioButton控件 使用RadioButtonList控件可以方便的快速的生成RadioButton 2 2 9DropDownList控件 DropDownList控件类似Windows的中下拉列表框 用户可以从单项选择下拉列表框中进行选择 TextText 2 2 10ListBox控件 ListBox控件也可以选择一项或者多项内容 不同DropDownList控件之处在外观的不同 ListBox控件没有下拉列表框 可一次显示多项 用户可以选择一个项也可以选择多个项 TextText 内部控件 选择 填充数据的方法 ArrayListarrlist newArrayList arrlist Add 四 arrlist Add 五 arrlist Add 六 ddl DataSource arrlist voidPage Load ObjectSrc EventArgsE ddl Items Add 50 一二三一二三 1 2 3 2 2 11ImageMap控件 ImageMap控件主要是由两部分组成 第一部分是图像 它可以是任何标准Web图形格式 如 gif jpg或 png文件 第二个是作用点控件的集合 每个作用点控件都是一个不同的元素 对于每个作用点控件 你都可以定义其形状 圆形 矩形或多边形 及其作用点位置和大小的坐标 2 2 12FileUpLoad控件 FileUpLoad控件显示一个文本框 在此用户可以键入希望上传到服务器的文件的名称 该控件还显示一个 浏览 按钮 该按钮显示一个文件导航对话框 该控件允许用户上传图片 文本文件或其他文件等 2 2 13Panel控件 Panel控件一般作为其他控件的容器使用 直接继承于WebControl 从这里开始声明其中包括的控件 2 2 13Panel控件 容器控件可以包含其他控件 容器控件的主要用途之一是 通过将控件放置在容器控件中并设置容器控件的属性 就可以一次更改一组控件的可见性 2 2 14Table控件 TableRow和TableCell控件 Table控件可以在Web窗体页上创建表格 直接继承于WebControl 单元格的内容 Table控件演示程序的运行界面 2 3增强控件 复杂控件 复杂控件是服务器控件 可用于创建复杂的HTML元素 ADRotator 用于更换Web页上的广告 提供日历的全部功能 Calendar 2 3 1Calendar控件 Calendar控件可以在Web窗体页面上显示日历 以便于用户选择年 月份或者日期 默认情况下 Calendar控件显示月中各天 周中各天的标头 带有月份名和年份的标题 用于选择月份中各天的链接及用于移动到下个月和上个月的链接 您可以通过设置控制控件中不同部分的样式的属性 来自定义Calendar控件的外观 通过设置SelectionMode属性指定Calendar控件是否允许选择单日 周或整月 2 3 1日历控件事件 日历控件响应两个事件 日期更改 月份更改 2 3 2AdRotator控件 AdRotator控件用来在Web窗体页上显示随机选定的广告信息 2 3 2AdRotator控件 2 3 2AdRotator控件 鼠标在图像上方移动时显示的文本 AlternateText 图像文件的绝对或相对Url 单击此Ad之后访问的目标Web站点 指定给此Ad的类别 在循环播放时间安排中广告的优先级 AdRotator控件的KeywordFilter属性可以对某一特定类别的广告进行过滤 在下面例子中 你将只看到属于 Category1 的前两个图象 AdRotator 输 出结果 2 4验证控件概述 数据验证控件是一个控件集合 使用验证控件可以验证输入服务器 当验证失败时则显示用户自定义的错误信息 每个验证控件都有自己独特的验证功能 常用验证控件 RequireFieldValidator控件RangeValidator控件RegularExpressionValidator控件CompareValidator控件CustomValidator控件ValidatorSummary控件 2 4验证控件的属性 ErrorMessage属性主要是存放错误信息Display属性设置控件在网页上显示的方式 主要有3种显示方式 Static 静态显示方式 该属性的设置是系统的默认值 当验证控件初始化时 需要在网页上有足够的空间存放改验证控件 如果用户输入正确 页面没有显示错误信息 但是该控件仍然在网页上占有一定空间 Dynamic 动态显示方式 当验证控件初始化时 不需要在网页上有足够的空间来放置控件 只有当用户输入错误需要显示错误信息时 控件才会占有网页上的一定空间 None 不管用户输入是否正确 验证控件都不显示错误信息或提示信息 因此该控件不占有网页空间 当网页中使用ValidatorSummary控件时 经常把其他类型的验证控件的Display属性设置为None 这样可以确保页面的所有错误信息或提示信息集中显示 2 4 1RequireFieldValidator控件 RequiredFieldValidator控件又称非空验证控件 通常用于在用户输入信息时 对必选字段进行验证 使用RequireFieldValidator控件可以确保用户不会忽略没有输入的信息 因为只有用户输入信息后才能通过验证 使用此控件可用来验证用户名和密码等要求用户必须输入的字段信息 在页中添加RequiredFieldValidator控件并将其链接到必选字段控件 在控件失去焦点时 如果其初始属性值没有被改变 将会触发RequiredFieldValidator控件 文本信息 2 4 1RequireFieldValidator控件 该表列出了RequireFieldValidator控件常验证的控件及属性 2 4 1RequireFieldValidator控件 该表列出了RequireFieldValidator控件的常用属性 2 4 2RangeValidator控件 RangeValidator控件用于检查用户输入的信息是否在指定范围内 可以用来验证数字 字母和日期等限定的范围 2 4 2RangeValidator控件 该表列出了RangeValidator控件的常用属性 2 4 2RangeValidator控件 该表列出了RangeValidator控件提供的5种验证类型 2 4 3RegularExpressionValidator控件 RegularExpressionValidator控件又称正则表达式验证控件 使用该控件可以检查用户输入的信息是否与某个正则表达式所定义的模式相匹配 它的验证功能比非空验证控件和范围验证控件更大 用户可以自定义或书写自己的验证表达式 可以用于验证电子邮件 电话号码及邮政编码等 在实际的应用中 经常需要用户输入一些固定格式的信息 例如电话号码 邮政编码 网址等内容 为了保证用户输入符合规定的要求 例如电话号码 美国 欧洲和中国的表示方法都各不相同 此时就需要使用RegularExpressionValidator控件进行验证 2 4 3RegularExpressionValidator控件 该表列出了RegularExpressionValidator控件的常用属性 2 4 3RegularExpressionValidator控件 该表列出了RegularExpressionValidator控件常用的正则表达式 2 4 4CompareValidator控件 CompareValidator控件用于将用户输入的值与某个常数值或其他控件进行比较 使用CompareValidator控件 可以将两个值进行比较以确定这两个值是否与由比较运算符 小于 等于 大于等 指定的关系相匹配 还可以使用CompareValidator控件来指示输入到输入控件中的值是否可以转换为BaseCompareValidator Type属性所指定的数据类型 2 4 4CompareValidator控件 该表列出了CompareValidator控件的常用属性 2 4 4CompareV