HTML控件和Web服务器控件.ppt

ASP NET程序设计教程第5章HTML控件和Web服务器控件 河南城建学院计算机科学与工程系 2 内容 本章主要介绍了ASP NET中几种基本的HTML控件和Web服务器控件 详细介绍了各控件的基本属性及使用方法 3 ASP NET的四种服务器控件 服务器控件是Web表单的用户界面元素 ASP NET有四种服务器控件 HTML控件Web服务器控件有效性验证控件用户控件 4 服务器控件 HTML控件代表常规的HTML表单元素 如文本框和按钮 但它们是在服务器上创建的 您可以在服务器上控制它们 Web控件与此类似 但提供了更多的功能 可以提供更复杂的用户界面 有效性验证控件用于验证用户的输入 用户控件是自定义的控件 用于实现某些功能 有效性验证控件将在第6章介绍 所有服务器控件都有属性 方法和事件 它们提供的功能比传统HTML表单元素多 使开发人员创建用户界面更容易 5 服务器控件事件 服务器能引发多种事件 换句话说 用户可以对服务器控件执行许多操作 单击按钮 单击连接 填写文本框 选择列表框中的条目 等等 所有这些都要由服务器进行处理 每当事件发生时 客户都要向服务器发送信息 6 服务器控件事件的主动与被动事件 注意 将被动用户事件与主动事件区别开来很重要 主动事件要求用户进行明确的操作 即用户必须进行有意识的操作 包括单击按钮或链接 填写文本框等 被动事件是用户无意中执行的操作 例如鼠标在图像上移动 只有主动事件才会在服务器上进行处理 因为被动事件太多 无法将其所有的数据发送给服务器 不过可以通过客户端脚本来处理它们 7 5 1HTML控件 以前我们介绍过一些基本的HTML标记 这些HTML标记在以往的静态网页或ASP动态网页里即可满足我们的需求 但是标准的HTML标记并没有办法利用程序直接来控制它们的属性 使用方法和接收事件 程序员必须另外学习其它如JavaScript等程序语言才得以控制这些HTML标记 ASP NET为动态网页程序设计带来了许多新的技术 这些技术其中之一就是将所有的HTML标记对象化 让程序可以直接控制 对象化之后的HTML标记我们称为HTML控件 8 5 1HTML控件 HTML控件由HTML标记衍生而来 HTML控件在外形上与普通的HTML标记很相似 几乎所有的HTML标记加上runat Server 这个Server控件的标识属性后 都可以变成HTML控件 我们可以使用如VB NET或C 等语言来撰写控制HTML控件的程序 ASP NET把HTML标记对象化 可以让网页对象的互动 程序的写作及维护变的更轻松容易 也让执行的效率明显的改善不少 ASP NET将HTML标记对象化的好处 我们观察以下程序便了解 9 HTML控件 例1 请按这里传统的HTML标记无法利用程序直接控制 这是因为HTML标记当初设计时并没有彻底对象化 所以如果要动态的利用程序设定标记的属性 必需要插入ASP程序才可以 如下所示 10 HTML控件 例2 请按这里 11 HTML控件 例2注释 ASP网页设计师没有办法直接利用程控对象 所以必需在标记后面插入一些ASP程序代码 这就是为什么以前的ASP程序代码非常杂乱 常常会看到标记中插入许多叙述的程序 这样会导致程序代码在维护以及阅读上的困难 ASP NET为了要解决这种杂乱无章的程序写作风格 便将HTML标记对象化而产生出HTML控件 HTML控件可以让程序直接控制并设定其属性 如下范例所示 12 HTML控件 例3 请按这里 成为对象了voidPage Load Anchor1 HRef Anchor1 InnerHtml 欢迎来到微软中国 13 HTML控件 例3注释 HTML控件比HTML标记多了ID以及Runat这两种属性 ID属性表示程序是以本属性来控制对象的 所以任何对象的名称不可重复 不管它们是否为同一种类 而Runat属性表示这个对象是在Server端执行 所有的HTML控件都必须加上这个属性设定值 倘若该对象在程序执行时不需要被程控 则可以忽略ID属性的设定 在VS NET中利用HTML标记变为HTML控件 14 HTML控件对事件的支持 我们知道网页在被加载时会先触发Page Load事件 此时我们就可以利用这个事件进行对象的初值化 以及从数据库抓数据回来等工作 所以我们在Page Load事件程序中利用程序指定超级链接控件Anchor1的HRef属性 这样一来程序代码和HTML控件分开 程序的架构就不会显的杂乱无章而不好管理 了解HTML控件可以直接被程序所控制后 我们再来了解HTML控件对事件的支持 15 HTML控件对事件的支持 示例 改变字体 成了对象 控件 原来的字体 接下页 16 HTML控件对事件的支持 续 接上页 publicvoidButton1 Click objectsender EventArgse Sp1 InnerHtml 按下Button1后出现的字体 17 HTML控件对事件的支持 续2 在LI4 ASPX上述程序代码中我们声明了名为Button1的Button控件 除指定Runat属性值为Server外还指定了OnServerClick属性为Button1 Click OnServerClick是Button对象所支持的事件 本事件在使用者按下按钮时便会触发 设定本属性表示发生OnServerClick事件时要执行哪个事件程序 我们将属性值填入Button1 Click则表示当使用者按下按钮时 便会执行Button1 Click这个事件程序 18 5 1 1HTML控件的优点 HTML控件将HTML标记对象化 可以让程序直接控制并设定其属性 这样一来程序代码和HTML控件分开 程序的架构就不会显的杂乱无章而不好管理 HTML控件对事件的支持 以事件触发方式来编写程序 使得网页编程变得更加简单 19 HTML控件架构 当ASP NET网页执行时 会检查标注有无Runat属性 如果标注没有设定这个属性 那么该标注就会被视为字符串 并被送到字符串流等待送到客户端的浏览器进行解译 如果标注有设定Runat Server 属性 那么就会依照该标注所对应的HTML控件来产生对象 所以ASP NET对象的产生是由Runat属性值所决定的 当程序在执行时解析到有指定Runat Server 属性的标注时 Page对象会将该控件从 NET共享类别库加载并列入控制架构中 表示这个控件可以被程序所控制 等到程序执行完毕后再将HTML控件的执行结果转换成HTML标注 然后送到字符串流和一般标注一起下载至客户端的浏览器进行解译 20 5 1 2HTML控件架构 HTML控件的执行过程 21 5 1 2HTML控件架构 所有的Html控件位于System Web UI HtmlControls命名空间中 是从HtmlControl基类中直接或间接派生出来的 22 5 1 2HTML控件架构 23 5 1 3HTML控件常用属性 Style属性Attributes属性Visible属性Disabled属性InnerHtml属性及InnerText属性 24 5 1 3 1Style属性 ASP NET为每个Html控件提供了一个Sty1e的属性 Style属性实际上是一个样式表属性集合 通过设置Style中的属性 能通过程序代码在程序执行过程中改变Html控件的样式 25 5 1 3 1Style属性 Style属性可以设定的样式 26 5 1 3 1Style属性 例 5 3 通过程序来控制Anchor1控件的Style属性 publicclassWebForm1 System Web UI Page privatevoidPage Load objectsender System EventArgse 在此处放置用户代码以初始化页面 指定超级链接的属性Anchor1 Style color 008000 Anchor1 Style font size 10pt Anchor1 Style text decoration none Anchor1 Style font style italic 27 小结 通过使用标记 和 ASP NET代码得以和HTML标记隔离开来 大多数代码都应该放在前一个标记中 因为这些代码将被编译 并消除了代码令人眼花缭乱的问题 注释由下述三组标记之一 用于注释HTML代码 用于VB 用于C 而用于服务器端 这些注释通常用于解释代码 它们不影响代码的执行 使用连行符 可以将长语句分成多行 在字符串中使用该字符时 务必用双引号括起字符串的前半部分 并在后面加上 和 符号 28 5 1 3 2Attributes属性 Attributes属性实质上是一个控件 包括Html控件 Web控件 用户控件 的属性集合 控件的属性值与属性值可以通过Attributes任意指定 ASP NET程序会将其原样发送到浏览器解释 29 5 1 3 2Attributes属性 Attributes属性使用时有两点需要注意 因为可以任意指定属性 所以对于控件来说 有些指定的属性是不合法的 那么这种属性是无效的 指定属性必须为控件对应的HTML标记所支持的属性 否则浏览器也会将会不能达到 30 5 1 3 2Attributes属性 例 使用Attributes属性确定HtmlSelect控件的特性 publicclassWebForm1 System Web UI Page privatevoidPage Load objectsender System EventArgse Message InnerHtml 选择框的属性集包括 IEnumeratorkeys Select Attributes Keys GetEnumerator while keys MoveNext Stringkey String keys Current Message InnerHtml key Select Attributes key 31 5 1 3 3Visible属性 Visible属性可以让一个对象的视觉元素消失 换句话说就是将对象隐藏起来让使用者看不到 32 5 1 3 3Visible属性 例 在Page Load事件中将名为Anchor1的超级链接控件隐藏起来 待使用者按下Button1按钮后再将其Visible属性设为True privatevoidPage Load objectsender System EventArgse 在此处放置用户代码以初始化页面Anchor1 Visible false privatevoidButton1 Click objectsender System EventArgse Anchor1 Visible true 33 5 1 3 4Disabled属性 Disabled属性被称为禁止功能 就是将一个对象的功能关闭 让对象暂时无法执行工作 如果将对象的Disabled属性设为True时 该对象会显示为灰色并且停止工作 只有将Disabled属性设回False 该控件才可正常工作 34 5 1 3 5InnerHtml InnerText属性 使用InnerHtml属性以编程方式修改HTML控件的开始和结束标记中的内容 使用InnerText属性以编程方式修改HTML控件的开始和结束标记之间的内容 35 5 1 3 5InnerHtml InnerText属性 例 5 7 两个控件的属性假设都为试验 对于InnerHtml属性而言会将其中的标记加以解译 所以显示出粗体的文字 而对于InnerText属性而言不会将其中的标记加以解译 所以会将试验一五一十的显示出来 36 5 1 3 5InnerHtml InnerText属性 privatevoidPage Load objectsender System EventArgse 在此处放置用户代码以初始化页面Sp1 InnerHtml 测试 Sp2 InnerText 测试 privatevoidButton1 Click objectsender System EventArgse Sp1 InnerHtml 测试 Sp2 InnerText 测试 37 5 1 3 5InnerHtml InnerText属性 Button1按下后的效果图 38 5 1 4基本的HTML控件 HtmlTextArea控件HtmlTable控件HtmlImage控件HtmlButton控件HtmlSelect控件HtmlForm控件HtmlInput控件 39 在VS NET中使用HTML控件 当前 HTML标记 客户端 是Web应用程序中最常用的界面元素 它们占用的空间也很小 适合于任何浏览器 而且性能也比较优越 但是 HTML标记都需要对其状态进行手工管理 而且不利于创建出复杂的用户界面 服务器控件很好地解决了这些问题 它可以自动管理状态 并以代码的方式处理属性 然后用事件处理逻辑操作 服务器控件有两种基本类型 一种类型是HTML服务器控件 另一种是Web服务器控件 下面分别进行介绍 40 在VS NET中使用HTML控件 续1 HTML控件包含在 工具箱 的HTML下拉列表中 实际上 HTML控件都与HTML标识符一一对应 拖放HTML控件到Web窗体中就等于输入了相应的HTML代码 例如 在窗体中创建一个Button控件 打开HTML选项卡 可以发现所产生的代码如下所示 INPUTStyle Z INDEX 等 在HTML控件的代码中 style属性决定着控件在Web窗体中的位置和大小 41 在VS NET中使用HTML控件 续2 为了把一个常规的HTML控件转换成一个HTML服务器控件 只要在设计模式下右击控件 例如上面的Button控件 再从弹出菜单中的选择 作为服务器控件运行 命令即可 这时 如果要查看Button控件的代码 会发现多了一个runat server 属性 HTML控件和HTML服务器控件在设计器界面中的区别就是有没有带有一个小标记 带小标记的控件为HTML服务器控件 42 在VS NET中使用HTML控件 续3 把HTML控件转换成了HTML服务器控件 可以使控件在服务器端运行并创建事件 例如 可以使服务器端代码响应Button控件的Click事件 在服务器端代码中 还可以把控件的值绑定到字段 属性 方式或表达式 实际上 HTML服务器控件的这些功能都可以通过Web服务器控件来完成 之所以引用到 NET框架中 主要是因为下面两个原因 43 在VS NET中使用HTML控件 续4 两个原因 开发人员可以在客户端脚本里为其编写事件代码 因为 HTML服务器控件都作为标准的HTML控件显示 而且能处理客户端脚本 HTML服务器控件包括了与现有ASP应用程序之间的向下兼容性 使得把传统的ASP应用程序转换成ASP NET Web窗体 应用程序变得更容易 44 5 2Web服务器控件 我们在上面已经介绍过HTML控件 接下来要介绍的是Web控件 或称为ASP NETServer控件 Web控件和HTML控件不一样 HTML控件是将HTML标注对象化 让我们的程序代码比较好控制以及管理这些控件 不过基本上它还是转成相对应的HTML标注 而Web控件的功能比较强 见下页说明 45 5 2Web服务器控件 一些能够简化开发工作的功能和特性 其中包括 丰富而一致的对象模型 WebControl基类实现了对所有控件通用的大量属性 包括ForeColor BackColor Font Enabled等 有助于减少编程错误 对浏览器的自动检测 Web控件能够自动检测客户机浏览器的功能 并相应地调整它们所提交的HTML 从而充分发挥浏览器的功能 数据绑定 Web控件还拥有一个非常重要的功能 那就是支持数据链接 DataBinding 这种能力可以和数据库连接 用来显示或修改数据源的数据 46 Web控件的使用 Web服务器控件 ASP NET控件 可以直接加入到 Aspx 文件中 这些控件是使用标记声明的 所有的ASP NET都必须以结束标记 ASP servercontrol 结束 如同HTML控件一样 我们必须赋予每个控件一个Id属性 并且指定Runat属性为Server 表示控件是在Server端执行 Web控件设定属性的方式有两种 一种是开始在页面布置对象时便将属性设定好 另一种是由程序来设定 下列程序代码范例声明了LabelWeb控件 并分别利用两种方式来设定Web控件的属性 47 Web控件的使用 示例 voidPage Load Label2 Text 这是另一个标签 48 Web控件的使用 示例 以上两种方法虽然都会使LabelWeb控件上出现文字 不过一般来说我们习惯将不变动的属性直接就设定在标注中 如 而会变动的属性就用程序代码来设定 如 voidPage Load Label2 Text 这是另一个标签 49 在VS NET中使用Web服务器控件 ASP NET中的Web服务器控件都位于 工具箱 中的 Web窗体 下拉列表中 许多控件都类似于Windows窗体控件 例如Label TextBox Checkbox ListBox Button和Image等 另外 还有一些复杂的服务器控件 例如AdRotator 显示一组图像 不管是预先定义的还是随机的 和Calendar 显示一个交互式的日历 等 50 在VS NET中使用Web服务器控件 续1 每个Web服务器控件都有一个标记符 在Web窗体的HTML模板上用作控件类的引用 每个控件的标记符都是带有前缀asp 的控件名称 例如 文本框的标记符是asp Textbox 下面是一个单行文本框的代码 51 Web控件中常用的属性 52 Web控件中常用的属性 续1 53 Web控件中常用的属性 续2 54 Web控件中常用的方法 55 Web控件中常用的事件 56 VisualStudio NET的编程功能和编程特点 设计 开发 调试 部署 57 Web应用程序项目的创建 VisualC 解决方案的创建应用程序模板Web窗体设计器的使用方法 属性 窗口的使用方法课堂练习创建一个简单的Web应用程序 58 应用程序模板 提供了起始文件 项目结构定义和环境设置 59 Web页面设计器的使用方法 60 属性 窗口的使用方法 设置属性 包括尺寸 标题和颜色 61 Web表单概念从一个简单的ASP NET程序谈起 li5 aspxprivatevoidtbMessage Change objectsender EventArgsE lblmessage Text Hello tbMessage Text 这是我们的一个ASP NET程序 62 注意到程序中的表单部分 请输入你的名字 63 注意到程序中的表单部分 注意到表单标记中的关键字 runat 通过指定属性 server 可告诉ASP NET 您希望在服务器上跟踪该表单 它们将客户端发生的情况报告给服务器 上述关键字使得服务器通过访问者的输入知道客户端发生的情况 64 Web表单概念 续3 没有runat server 这项属性 表单将成为常规的HTML表单 在ASP NET中 被指定为runat server 的表单被称为Web表单 接下来的几个有趣的标记是它们是ASP NET中的Web服务器控件 请注意每个控件的ID属性 这是您给控件指定的唯一名称 以便可以在页面的其他地方引用它 警告 务必要指定runat server 对ASP NET而言 runat server 至关重要 它告诉ASP NET这些项目将在服务器上进行处理 否则 ASP NET将不在服务器上处理 直接将这些项目发送给客户 65 5 2 1文本输入控件 TextBoxWeb服务器控件为用户提供了一种向Web窗体页中键入信息 包括文本 数字和日期 的方法 例5 17 1 li5 17 aspx 2 可用开发工具VS NET做 66 5 2 1文本输入控件 常用基本属性 Columns 获取或设置文本框的显示宽度 以字符为单位 MaxLength 获取或设置文本框中最多允许的字符数 ReadOnly 获取或设置一个值 用于指示能否更改TextBox控件的内容 TextMode 获取或设置TextBox控件的行为模式 单行 多行或密码 67 5 2 2选择控件 复选控件 CheckBox和CheckBoxList单选控件 RadioButton和RadioButtonList 68 5 2 2 1复选控件 CheckBox和CheckBoxListWeb服务器控件为用户提供了一种在真 假 是 否或开 关选项之间切换的方法 当CheckBox控件的状态在向服务器的各次发送过程间更改时 将引发为CheckedChanged事件提供的事件处理程序 以便当CheckBox控件的状态在向服务器的各次发送过程间更改时执行特定的任务 69 5 2 2 1复选控件 常用属性包括 Checked 获取或设置一个值 该值指示是否已选中CheckBox控件 Text 获取或设置与CheckBox关联的文本标签 ID 获取或设置分配给服务器控件的编程标识符 TextAlign 获取或设置与CheckBox控件关联的文本标签的对齐方式 例5 18 5 18 aspx 项目 0612061教材31页 例2 1 70 5 2 2 2单选控件 RadioButton和RadioButtonListWeb服务器控件允许用户从一个预定义的简短列表中选择一项 可以单独使用单选控件 通常是将两个或多个单独的按钮组合在一起 71 5 2 2 2单选控件 常用基本属性包括 Checked 获取或设置一个值 该值指示是否已选中CheckBox控件 GroupName 获取或设置单选按钮所属的组名 ID 获取或设置分配给服务器控件的编程标识符 Text 获取或设置与CheckBox关联的文本标签 例5 19 5 19 aspx 项目 0612061 72 5 2 2列表控件 列表框 ListBox 是在一个文本框内提供多个选项供用户选择的控件 它比较类似于下拉列表 但是没有显示结果的文本框 实际中列表框很少使用 大多数情况下都使用列表控件DropDownList来代替ListBox加文本框的情况 73 5 2 2列表控件 常用基本属性包括 DataMember 获取或设置要绑定到控件的DataSource中的特定表 DataSource 获取或设置填充列表控