Web控件使用..ppt

第四章Web控件使用 学习内容 从本章开始 将介绍用ASP NET开发Web数据库应用的一些常用控件 控件本质上是具有图形接口的组件 它能提供组件所提供的功能并提供用户交互 本章主要介绍HTML服务器控件 Web服务器控件 Web服务器验证控件和服务器控件绑定 学习目标 了解 Web控件的基本概念和分类 了解 主要的服务器验证控件 应用 能够创建简单的Web控件 应用 能够将Web控件添加到Web窗体 一 Web服务器控件 ASP NET服务器控件是在服务器端运行并封装用户界面及其他相关功能的组件 主要包括HTML服务器控件和Web服务器控件 这些控件在服务器端存在 并会在初始化时 根据客户端的浏览器版本 自动生成适合浏览器的HTML代码 二 HTML控件 HTML是超文本链接标记语言英文缩写 我们平时所说的网页就由HTML组成 网页上提供的输入框 选择框等 就是HTML控件 为了与HTML服务器控件区分 我们将这种控件称为传统的HTML控件 传统的HTML控件只需经过简单的改变就可以成为HTML服务器控件 从而提供服务器控件的强大功能 二 HTML控件 一 从一个实例开始案例4 1简单的ASP NET页1 创建一个新项目打开VisualStudio NET 然后 新建一个项目 项目类型选择 Visual Basic项目 模板选择 ASP NETWeb应用程序 2 添加代码在打开该项目后 选择WebForm1 aspx的HTML视图 输入如下代码 3 按 F5 运行 Privatesubaspcn onclick byvalsenderassystem object byvaleassystem eventargs If page ispostback thenlabel1 text select1 value tostringendifEndsubselect演示程序请选择您想购买的产品 手机 黑客帝国 双雄 黑白森林 无间道 您选取的是 二 HTML控件 在该实例中 主要操作的是aspcn onclick子程序 而这个程序是由名为button2的button控件激发的 程序的主要作用 就是通过label1 text select1 value tostring将我们在select1中选择的选项值赋给label控件label1 二 HTML控件 二 HTML服务器控件的概念HTML服务器控件是HTML元素 这些元素包含使其自身在服务器上可见并可编程的属性 任意HTML元素都可以通过添加RUNAT SERVER 属性转换为HTML服务器控件 二 HTML控件 三 HTML服务器控件的类别和使用HTML服务器控件是在原有的HTML标记的基础上 加上runat server 属性后编程的服务器控件 并都是从System Web UI HtmlControl直接或间接派生来的 运行在服务器上 并直接映射到受大多数浏览器支持的标准HTML标记 其层次关系如图4 2所示 P41HTML服务器控件的详细使用说明如表4 1所示 P42 三 Web服务器控件 一 Web服务器控件的层次Web服务器控件不只包含窗体类型的控件 例如按钮和文本框 还包括提供在网格中显示数据等常用窗体功能的控件 甚至一些特殊用途的控件 例如日历 Web服务器控件是ASP NET内置的服务器端控件 大多数Web服务器控件从基类System Web UI WebControls WebControl派生的 其层次结构如图4 3所示 P43 三 Web服务器控件 二 基本Web服务器控件1 Literal控件Literal控件无需添加任何HTML元素即可将静态文本呈现在Web页上 并可以通过服务器代码以编程方式静态控制文本 与下面讲到的LabelWeb服务器控件不同 Literal控件不将任何HTML元素添加到文本上 LiteralWeb服务器控件的语法结构为 三 Web服务器控件 二 基本Web服务器控件2 Label控件Label控件用于在页面中显示只读的静态文本或数据绑定的文本 通常当希望在运行时更改页面中的文本 比如响应按钮单击 时使用Label控件 可以在设计是从设计器中 或者在运行时从程序中设置Label控件的文本 三 Web服务器控件 二 基本Web服务器控件3 TextBox控件TextBox控件为用户提供了一种向Web窗体页中键入信息的方法 我们可以使用多种方式 单行文本 多行文本 以星号 屏蔽的密码格式 来配置TextBoxWeb服务器控件 三 Web服务器控件 案例4 2使用基本的Web服务器控件步骤1 创建一个新项目打开VisualStudio NET 然后 新建一个项目 项目类型选择 Visual Basic项目 模板选择 ASP NETWeb应用程序 步骤2 添加代码在打开该项目后 选择WebForm1 aspx的HTML视图 输入如下代码 步骤3 按 F5 运行后 在文本框输入 河北省宁晋县 按 TAB 键 就会得到如图4 4的效果 P45 Privatesubtextbox1 textchanged byvalsenderassystem object byvaleassystem eventargs lbl1 text textbox1 textEndsub使用基本的Web服务器控件籍贯 autopostback true maxlength 24 ontextchanged textbox1 textchanged runat server 您的籍贯为 三 Web服务器控件 二 基本Web服务器控件4 Image控件ImageWeb服务器控件用于在Web窗体页上显示图像 并使用自己的代码管理这些图像 其语法结构为 注意 与大多数其它Web服务器控件不同 Image控件不支持任何事件 例如 它对点击鼠标不作相应 三 Web服务器控件 三 按钮类控件1 HyperLInk控件HyperLinkWeb服务器控件提供了一种使用服务器代码在Web页上创建和操作连接的方法 使用户可以在应用程序中在页之间移动 其语法结构 注意 与大多数Web服务器控件不同 当用户单击HyperLink控件时并不会在服务器代码中引发事件 只执行导航 三 Web服务器控件 2 Button控件ButtonWeb服务器控件有三种类型 标准命令按钮 Button控件 超级链接样式按钮 LinkButton控件 和图形化按钮 ImageButton控件 使用说明参看表4 2 三 Web服务器控件 三 Web服务器控件 其语法结构分别为 三 Web服务器控件 四 列表类控件DropDownList控件用于创建下拉列表框 它不支持多重选择模式 其语法结构为 三 Web服务器控件 四 列表类控件ListBox控件用于创建允许单项或多项选择的列表框服务器控件 其语法结构为 三 Web服务器控件 五 选择类控件CheckBox和CheckBoxListWeb服务器控件CheckBox控件用于往Web页面中添加复选框 而CheckBoxList控件则是单一控件 可作为复选框列表项集合的父控件 使用单个CheckBox控件 可以更好地控制页面上复选框的布局 也可以单独控制复选框的字体和颜色 而如果想用数据库中的数据创建一系列复选框 则CheckBoxList控件是较好的选择 三 Web服务器控件 五 选择类控件 三 Web服务器控件 五 选择类控件RadioButton控件和RadioButtonList控件RadioButton控件用于在Web页面中创建单选按钮 并单独使用这些控件 通常将两个或多个单独的按钮组合在一起 构成一组 这时必须将这些单选按钮的GroupName属性设置为一样 同一组单选按钮中 每次只能选择一个 与之相反 RadioButtonList控件是单个控件 可作为单选按钮列表项集合的父控件 三 Web服务器控件 五 选择类控件Radiobutton控件的语法结构为 三 Web服务器控件 五 选择类控件Radiobuttonlist控件的语法结构为 三 Web服务器控件 五 选择类控件注意 单个radiobutton控件可以更好地控制单选按钮组的布局 例如 可以在各单选按钮之间加入文本 即非单选按钮文本 但如果想将按钮绑定到数据源 radiobuttonlist控件要方便得多 三 Web服务器控件 案例4 3使用radiobutton和checkboxWeb两种服务器控件P49 三 Web服务器控件 六 其他控件表格类控件表格类Web服务器控件用于在Web窗体页上创建可在服务器端编程的表格 和表格相关的控件有表格 Table 行 TableRow 和单元格 TableCell 等三种控件 其语法结构为 三 Web服务器控件 六 其他控件AdRotator控件用于制作广告条 在每次打开或重新加载网页时在页面上放置一幅新的广告 单击时使用户重定向到广告商的Web页 其语法结构为 三 Web服务器控件 六 其他控件CalendarWeb服务器控件用于在Web窗体页上显示一个传统的单月份日历 用户可使用该日历查看和选择日期 也可以在日历网格中显示约会或其它信息 如一份事物列表 一份事件时间表或类似的信息 其语法结构为 三 Web服务器控件 六 其他控件 三 Web服务器控件 七 Html服务器控件和Web服务器控件的异同 四 Web服务器验证控件 ASP NET提供了一组验证控件 用于提供一种易用且功能强大的检错方式 对用户在Web窗体页的输入进行验证 并在必要时向用户显示错误信息 四 Web服务器验证控件 一 Web服务器控件验证简介何时进行验证验证发生的时间是 已对页进行了初始化 但尚未调用 更改 或 单击 事件处理程序时 也可以在此之前 例如在页加载期间 调用控件的Validate方法来执行验证过程 四 Web服务器验证控件 一 Web服务器控件验证简介验证多个条件一般来说 每个验证控件只执行一个测试 但我们常常需要检查多个条件 例如 可能需要设定某个字段是必选字段和该字段限制为只能接受特定范围内的日期这两个条件 此时 控件执行的测试将使用逻辑AND解析 用户输入的数据必须通过所有测试才视为有效 四 Web服务器验证控件 一 Web服务器控件验证简介3 显示错误信息验证控件通常在窗体中不可见 但是如果检测到错误 它将生成指定的错误信息文本 一 Web服务器控件验证简介 一 Web服务器控件验证简介4 服务器端验证和客户端验证验证控件在服务器代码中执行输入检查 当用户向服务器提交窗体之后 服务器将逐个调用验证控件来检查用户输入 四 Web服务器验证控件 二 必须字段验证 RequiredFieldValidator 使用RequireFieldValidator控件确保用户在Web窗体上输入数据时不会跳过必填字段 其语法为 四 Web服务器验证控件 其中 1 ControlToValidate 表示要进行检查控件ID 2 ErrorMessage 表示当检查不合法时 出现的错误信息 3 Display 错误信息的显示方式 4 占位符 表示Display为Static时 错误信息占有 占位符 那么大的页面空间 四 Web服务器验证控件 三 比较验证 CompareValidator 使用CompareValidator控件将用户的输入与常数值 另一个控件的属性值或数据库值进行比较 判断输入是否满足条件 其语法结构为 四 Web服务器验证控件 三 比较验证 CompareValidator 其中 1 Type表示要比较的控件的数据类型 2 Operator表示比较方式 共7种 3 其他属性和RequireFieldValidator相同 四 Web服务器验证控件 四 范围验证 RangeValidator 使用RangeValidator控件确保用户输入的值在指定的上下限范围之内 其语法结构为 占位符 四 Web服务器验证控件 四 范围验证 RangeValidator 其中 1 MinimumValue和MaximumValue界定控件输入值的范围 2 type定义控件输入值的类型 3 其他属性和RequeredFieldValidator相同 四 Web服务器验证控件 五 模式匹配验证 RegularExpressionValidator 通过它检查用户输入是否匹配预定义的模式 例如电话号码 邮编 电子邮件地址等等 有进行这一验证 需要使用正则表达式 其语法格式为 占位符 四 Web服务器验证控件 六 验证总结 ValidationSummary 如果错误信息比较多的时候 往往造成布局比较混乱 ValidationSummary控件可以在一个位置集中显示来自Web页上的所有验证程序的错误信息 其命令格式为 四 Web服务器验证控件 四 Web服务器验证控件 其中 1 HeadText相当于表的HeadText 2 DisplayMode表示错误信息显示方式 List相当于HTML中的 BulletList相当于HTML中的 SingleParegraph表示错误信息之间不做分割 四 Web服务器验证控件 案例4 4使用ValidationSummary服务器控件P57 五 服务器控件绑定 ASP NET支持服务器端的数据绑定 它提供了新的数据绑定表达式 使我们可以很容易将数据绑定到控件中 其语法结构为 其中 号表示要进行数据绑定操作 小结 关于控件的介绍 a 控件就是具有图形接口的组件 用来表示用户和程序之间的图形化连接 b 控件可以提供或处理数据 接收用户输入 对事件作出相应或执行用户和应用程序的其它功能 c 控件是针对特定目的而创建的 关于HTML服务器控件 a HTML服务器控件是在原有的HTML标记的基础