《【教学课件】第3章HTML服务器控件.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第3章HTML服务器控件.ppt（54页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 第第3章章 HTML 服务器控件服务器控件3.1 实训项目一实训项目一 一般控件一般控件实训目的与要求实训目的与要求u 了解ASP.NET中控件的概念和种类。u 掌握一般控件的使用。u 掌握html控件与web控件的区别与联系u 实训预备知识实训预备知识实训预备知识 对于使用HTML进行网页设计的人来说，应该对简单的HTML控件比较熟悉了，比如文本框、按钮、复选框等。使用这些控件可以设计基于WINDOWS风格的可视化的操作界面，是实现页面外观显示的最基本的元素，也是进行ASP开发必须要掌握的基本内容之一。A中包含了两大类控件，即HTML控件和web服务器控件。HTML控件由原来的HTML标签
2、加上runat=server属性所构成的，它展示给服务器的是HTML元素，可以更好的提高编译效率。WEB控件是一个带抽象、加强型对象模板的服务器端控件，它不仅可以包括表单型控件，如abel和TextBox，还包括类似于控件那样的专用控件，如日历控件。ASP.NET在普通的HTML控件的基础上提出了HTML服务器控件的概念。简单的说，服务器控件是在普通的HTML控件基础上产生的、可直接应用于服务器端编程的HTML控件。下面的语句声明了一个HTML服务器端控件：下面的语句声明了一个HTML服务器端控件：下面的语句声明了一个普通的HTML控件：通过这两种语句形式的对比，我们可以发现声明一个普通的HT
3、ML控件和声明一个HTML服务器控件的不同：服务器控件用id属性代替了普通控件的name属性;服务器控件用onserverclick属性代替普通控件的onclick属性;服务器控件的声明多了一个runat属性。下面分析这些不同点的原因：id属性是标识服务器控件的唯一标志，通过它可以象引用一个对象一样直接在服务器端去引用服务器控件。用onserverclick属性代替onclick属性，表明响应按钮的单击事情是在服务器端进行的，而不是在客户端。多出的runat=”server”属性是说明该控件为服务器控件，这是区别html控制件是服务器控件还是普通控件的唯一方法。从上面的分析看出，它们之间使用的
4、区别。常见的控件及说明如表3.1所示。表3.1 常见HTML控件及说明 那么为什么要使用服务器端控件呢？ASP.NET中包含了两大类控件，即HTML控件和WEB服务器端控件。1HTML控件是由原来的HTML标签加上runat=server属性所构成的，它展示给服务器的是HTML元素，可以更好的提高编译效率。HTML控件是以HTML标记为基础而衍生出来的，WEB控件则是ASP。NET针对HTML控件的不足而新增加的控制元件。2WEB控件是一个带抽象、加强型对象模板的服务器端控件。一般控件用来执行那些不直接表现出来的未知的HTML控件标识。很多HTML标签被 包括在本控件中，如,等。一般控件的基本
5、属性：Contentbetweentags控件标签中的内容控件标签的关闭HTML控件可以利用下列两种属性，直接访问控件的内容：InnerHTML：设置或读取不含标记本身的控件对象子标记与内容 InnerText：设置或输出控件对象的文字内容 默认情况下，ASP.NET 文件中的 HTML 元素被视为文本，并且页面开发人员不能以编程方式访问。若要使这些元素能够以编程方式访问，可以通过添加 runat=server 属性，指示应将 HTML 元素作为服务器控件分析和处理。唯一的 id 属性允许以编程方式引用该控件。属性用于声明服务器控件实例上的属性参数和事件绑定。HTML 服务器控件必须驻留在具有
6、 runat=server 属性的包含 标记中。ASP.NET 不要求文本（非动态的）HTML 内容的格式正确，但它确实要求所有 HTML 元素要正确结束（用一个后缀“/”或结束标记）和干净地嵌套（不允许出现重叠标记）。如果没有正确结束 HTML 元素，ASP.NET 将无法识别该元素。该元素将被忽略或者将发生编译错误，具体取决于该元素的构成方式。可以用三种不同的方法创建任意 Web 窗体控件的实例：作为 HTML 文档中的元素创建；在应用程序快速开发(RAD)环境中创建，该环境允许您将控件拖到页上；或以编程方式在代码声明块或代码隐藏文件中创建。3.1.3实训步骤实训步骤1.打开文本编辑器，在
7、程序输入如下代码，并保存为asp 文件，将该文件保存在特定的主目录下：一般控件的使用 sub button_click(obj as object,e as eventargs)show1.innertext=username.value end sub 请输入你的姓名：输入的用户姓名为：2在IIS中浏览该文件，结果如图3.1所示。图3.1 一般控件的使用单击确定后：图3.2 一般控件使用结果 3.2 实训项目二实训项目二 表单控件表单控件3.2.1 实训目的与要求实训目的与要求u 了解表单的结构及工作原理。u 掌握表单控件的各种重要属性的使用。3.2.2 实训预备知识实训预备知识 表单是包含
8、其他控件的容器。它可以收集用户的数据，传回服务器进行处理，然后服务器再把处理结果回传到客户端，返回给用户。在HTML中，可以使用标记.去定义一个普通表单，在该表单中，可以加入任意的普通控件。在中，要定义一个表单控件，应该采用如下的格式：/声明控件在服务器端运行 其他一些表单域内容 属性说明：id：该表单控件的标识，通过它可以在程序中去引用该表单对象。runat=”server”：指明它是服务器端的HTML控件。method：指明表单的数据传输方式。可以是“POST”或“GET”action：指定处理WEB表单数据的ASP.NET程序。如果该属性没有指定，则默认使用同一个程序来处理该web表单的
9、数据。注意：一个网页最多只能有一个标记了runat=server的HtmlForm控件。使用HtmlForm控件可以将几个关系紧密，或者需要能够同时被移动的控件具有很强的整体性。3.2.3 实训步骤实训步骤1 确定所使用的脚本语言2完整程序代码如下：演示表单控件的使用 Sub button_click(Source As Object,e As EventArgs)showinfo.InnerHtml=你输入的姓名是：&name.value End Sub 3.用IIS浏览该文件，结果如下：图3.4 表单控件的使用结果 图3.3 表单控件的使用单击“提交”按钮时，运行结果为：3.3 实训项目三
10、实训项目三 单行文本框单行文本框2.1.1 实训目的与要求实训目的与要求u 掌握一般单行文本框的使用。u 掌握密码域的使用。2.1.2 实训预备知识实训预备知识1 基本概念单行文本框属于表单控件。在应用中，可以利用它来提供用户输入基本文本数据。比如输入用户姓名、联系地址、联系电话等。有两种，一种是普通单行文本框。一种是密码框。该控件包括和这两种HTML控件，用于创建可以让用户输入一行文字的文本框。2语法格式：Maxlength表示可以在文本框中可以输入的最大字符数；size表示文本框的宽度。Value表示文本框的内容。2.1.3 实训步骤实训步骤1建立有一个输入名字的文本控件和输入密码的密码文
11、本域的表单控件：请输入姓名：请输入密码：2添加按钮的事件处理程序：sub button_click(obj as object,e as eventargs)show1.innerText=username.value show2.innerText=userpassword.valueend sub3.3.用文本编辑器编辑完整源程序，保存到对应的目录下，源程序example2.aspx文件如下：演示文本域控件 sub button_click(obj as object,e as eventargs)show1.innerText=username.value show2.innerText
12、=userpassword.valueend sub请输入姓名：请输入密码：用户输入的姓名是：用户输入的密码是：4用IIS浏览该aspx文件，结果如下：图3.5 文本域控件的使用5单击“确认”按钮后：运行结果如下：图3.6 文本域控件的使用结果 3.3 实训项目四实训项目四 多行文本框多行文本框2.1.1 实训目的与要求实训目的与要求：掌握多行文本框的使用。2.1.2 实训预备知识实训预备知识 单行文本框只能输入一行数据，也就是说在文本框里输入数据，当输入的数据超出文本框的时候，它不换行，而多行文本框是可以换行的文本框，它可以输入一段文本，而不仅仅是一行文本，比如在一些电子邮件系统中，系统提供
13、给用户用以输入信件内容的文本框。多行文本框HtmlTextArea控件的基本属性：基本属性说明文本内容默认显示文本内容控件的关闭符2.1.3 实训步骤实训步骤1添加一多行文本框控件到表单控件中，程序如下：2确定所使用的脚本语言为“VB”，编写事件处理程序如下：sub button_click(obj as object,e as eventargs)dim str as Stringstr=content.value.replace(VBCRLF,)show1.innerHTML=用户输入内容：&strend sub3新建一文本文件，书写完整程序，保存到对应的虚拟目录中。完整程序代码examp
14、le3.aspx文件：演示多行文本框的使用 sub button_click(obj as object,e as eventargs)dim str as Stringstr=content.value.replace(VBCRLF,)show1.innerHTML=用户输入内容：&strend sub 4通过IIS浏览该aspx文件，结果如下：图3.7 多行文本框的使用5在多行文本框控件中输入如下文字，点“确定”按钮，运行结果如下：图3.8 多行文本框的使用结果 3.3 实训项目三实训项目三 单选框单选框2.1.1 实训目的与要求实训目的与要求：u 掌握单选框的使用。2.1.2 实训预备知
15、识实训预备知识 与文本域控件不同的是，文本框中用户可以输入任意的文本内容提交到服务器，而单选框以及我们后面要讲到的复选框以及下拉列表框，它们是系统提供给用户一些预定义的数据，用户只能从其中选择“输入”相关数据。单选框HtmlInputRadioButton控件使用语法格式如下。此控件是选项控件，如果Name属性设为相同，则表示这是一组单选钮，在一组单选按钮中，在某一时刻只能有一个按钮能够是选中状态。如果checked属性被选中，则表示该单选框默认是处理选中状态。2.1.3 实训步骤实训步骤添加具有5个单选框的表单：请选择在线支付银行:中国人民银行 中国工商银行 中国建设银行浦发银行 深发银行
16、2为按钮添加事件处理程序：sub button_click(obj as object,e as eventargs)if bank1.checked then show1.innerHTML=bank1.value&end if if bank2.checked then show1.innerHTML=bank2.value&end if if bank3.checked then show1.innerHTML=bank3.value&end if show1.innerHTML=你选择的支付银行为：&show1.innerHTML end sub3新建一aspx文件example6.a
17、spx，源代码如下所示，保存在虚拟目录下：显示单选按钮的使用 sub button_click(obj as object,e as eventargs)if bank1.checked then show1.innerHTML=bank1.value&end if if bank2.checked then show1.innerHTML=bank2.value&end if if bank3.checked then show1.innerHTML=bank3.value&end if show1.innerHTML=你选择的支付银行为：&show1.innerHTML end sub 请
18、选择在线支付银行:中国人民银行 中国工商银行 中国建设银行 浦发银行 深发银行 4用IIS浏览该aspx文件，结果如图 3.9所示：图3.9 单选框的使用5单击“确定”按钮，执行结果如下图3.10 单选框的使用结果 3.6 实训项目三 多选框2.1.1 实训目的与要求：u掌握多选框的使用。checkbox属于WEB表单的切换开关，可以让用户选择是否打开某一项设置，或者是设定特定的参数。与单选框类似，多选框一般也是成组使用，提高给用户一些系统预定义数据进行选择。在一组单选框中，在某一时刻用户只能选择其一，而 多选框则相当于“多选一”，拥护在某一时刻可以选择一个或多个选择项。复选框（checkbo
19、x）的使用格式：例如：电话2.1.3 实训步骤实训步骤1新建有四个多选框的表单：请选择通知考生成绩的方法:电子邮件 移动电话 电话 传真 2为“确定”按钮添加事件处理程序：sub button_click(obj as object,e as eventargs)dim str as Stringif mail.checked then str=str&电子邮件 end ifif mobile.checked then str=str&移动电话 end ifif tel.checked then str=str&电话 end ifif fax.checked then str=str&传真en
20、d ifshow1.innerHTML=选择的通知方法为：&strend sub3新建一文本文件example4.aspx，保存在虚拟目录下，文件完整源程序如下：显示多选框的使用 sub button_click(obj as object,e as eventargs)dim str as Stringif mail.checked then str=str&电子邮件 end ifif mobile.checked then str=str&移动电话 end ifif tel.checked then str=str&电话 end ifif fax.checked then str=str&
21、传真end ifshow1.innerHTML=选择的通知方法为：&strend sub 请选择通知考生成绩的方法:电子邮件 移动电话 电话 传真 4用IIS浏览该aspx文件，结果如下：图3.11 多选框的使用5单击“确定”按钮，运行结果如下：图3.12 多选择框的使用结果3.3 实训项目七实训项目七 下拉列表框下拉列表框2.1.1 实训目的与要求：实训目的与要求：u掌握下拉列表框的使用。2.1.2 实训预备知识实训预备知识 下拉列表框提供给用户一个下拉菜单，用户可以从选择一个或多个数据项。下拉列表框HtmlSelect控件的语法格式如下。/声明控件是在服务器端运行的 value1 valu
22、e2 在ASP.NET中，HtmlSelect控件除了使用原有的属性加入选项，还添加了动态加入选项的功能，其中有个很重要的属性就是Iterm属性。Item属性是指所有的选项，它是一个集合，有下列属性。Add:添加选项；Clear:删除所有选项；Remove:删除特定选项；Count:选项总数；Select:取得或设置选项是否被选中。2.1.3 实训步骤实训步骤1新建一含有下拉列表狂控件、按钮控件的表单：选择你要选修的语言：2为按钮控件添加事件处理程序：sub button_click(obj as object,e as eventargs)show1.innerHTML=你选择的语言是：sh
23、ow1.innerHTML=show1.innerHTML&language.valueend sub3新建一文本文件example5.aspx，保存在虚拟目录下，完整程序代码如下：显示下拉列表框的使用 sub button_click(obj as object,e as eventargs)show1.innerHTML=你选择的语言是：show1.innerHTML=show1.innerHTML&language.value end sub选择你要选修的语言：4用IIS浏览该aspx文件，结果如下：图3.13 下拉列表框的使用 5单击“确定”按钮，运行结果如下图3.14 下拉列表框的使
24、用结果 3.8 实训项目八实训项目八 提交、重置和普通按钮提交、重置和普通按钮3.8.1 实训目的与要求：u掌握三种按钮的使用。3.8.2 实训预备知识 按钮控件是指、这三种控件。它们的语法格式如下。除此之外，还有一些特别的属性。Value:设置或取得控件的内容。Disabled:设置或取得一个HTML控件是只读或可以使用。若此属性为True,则该HTML控件将起不了作用。创建一个服务器端控件，该控件将映射到、和 HTML 元素，并允许您分别创建命令按钮、提交按钮或重置按钮。使用 HtmlInputButton 控件对、和 HTML 元素进行编程。用户单击 HtmlInputButton 控件
25、时，来自嵌有该控件的窗体的输入被发送到服务器并得到处理。然后，将响应发送回请求浏览器。通过为 ServerClick 事件提供自定义事件处理程序，可以在单击控件时执行特定的指令集。注意“重置”按钮不支持 ServerClick 事件。单击“重置”按钮时，未必清除页上的所有输入控件。相反，在加载页时，它们返回到它们的原始状态。例如，如果文本框最初包含值 JohnDoe，则单击“重置”按钮会使文本框返回到该值。与 HtmlInputText 和 HtmlTextArea 控件一起使用时，可创建可以在服务器上处理的用户输入页或身份验证页。注意：此控件不需要结束标记。2.1.3 实训步骤 Protec
26、ted Sub AddButton_Click(sender As Object,e As EventArgs)Dim Answer As Integer Answer=Convert.ToInt32(Value1.Value)+Convert.ToInt32(Value2.Value)AnswerMessage.InnerHtml=Answer.ToString()End Sub HtmlInputButton 示例 在下面的文本框中输入整数值.单击求和按钮求两整数的和.单击重置按钮重置文本框中的数据. +=asp:RequiredFieldValidator ID=Value1R
27、equiredValidator ControlToValidate=Value1 ErrorMessage=请输入值.Display=Dynamic runat=server/asp:CompareValidator ID=Value1MinCompareValidator ControlToValidate=Value1 Operator=LessThan Type=Integer ValueToCompare=100 ErrorMessage=请输入小于100的整数.Display=Dynamic runat=server/asp:CompareValidator ID=Value1Ma
28、xCompareValidator ControlToValidate=Value1 Operator=GreaterThan Type=Integer ValueToCompare=0 ErrorMessage=请输入大于0的整数.Display=Dynamic runat=server/asp:RequiredFieldValidator ID=Value2RequiredValidator ControlToValidate=Value2 ErrorMessage=请输入值.Display=Dynamic runat=server/asp:CompareValidator ID=Valu
29、e2MinCompareValidator ControlToValidate=Value2 Operator=LessThan Type=Integer ValueToCompare=100 ErrorMessage=请输入小于100的整数.Display=Dynamic runat=server/asp:CompareValidator ID=Value2MaxCompareValidator ControlToValidate=Value2 Operator=GreaterThan Type=Integer ValueToCompare=0 ErrorMessage=请输入大于0的整数.
30、Display=Dynamic runat=server/ 图3.15 各种按钮的使用如果输入的不是数字时：出现错误:图3.16 输入字符时的错误提示如果输入的数据范围不对时，出现错误图3.17 输入数据范围不合法时错误当输入正确时 图3.18 数据输入正确运行结果 3.3 实训项目九实训项目九 文件上传控件文件上传控件2.1.1 实与要求训目的：实与要求训目的：u掌握文件上传控件的使用。2.1.2 实训预备知识实训预备知识如何使用HtmlInputFile控件 语法格式如下。该控件用于设计文件上传的程序。文件上传适用于HTML3.2以上
31、的版本。其中的参数含义如下。Maxlength:设置或取得上传文件的路径长度。Size:设置或取得上传文件所显示的文本框大小。Postedfile:上传服务器的文件对象，此对象属于HttpPostedFile数据类型。实例74 如何使用HtmlInputRadioButton控件此控件使用语法格式如下。此控件是选项控件，如果Name属性设为相同，则表示这是一组单选按钮。2.1.3 实训步骤example1.aspx:演示文件上传控件的使用 sub button1_click(obj as object,e as eventargs)if check1.checked=true then if
32、text1.value=then span1.innerHTML=错误：必须键入一个文件名returnend if if not(file1.postedfile is nothing)then try file1.postedfile.saveas(c:temp+text1.value)span1.innerHTML=文件成功上传到c:temp&_ text1.value&web服务器上 catch exc as Exception span1.innerHTML=文件没有保存到c:temp&_ text1.value&exc.toString()end try end if else if
33、 text1.value=then return end if if not(file1.postedfile is nothing)then file1.postedfile.saveas(c:temp+text1.value)end if end if end sub 选择需要上传的文件：保存文件名字:显示上传信息 图3.19 文件上传控件的使用运行结果：图3.20 上传成功结果图然后在里就存在一个名字为“aaaa”的文件了：图3.21 上传结果 3.10 实训项目十实训项目十 控件的综合应用实例控件的综合应用实例2.1.1 实训目的与要求实训目的与要求：u了解VB.
34、NET语言中，标识符的命名规则，常量和变量的定义、使用。通过实训达到熟练掌握VB.NET中量的定义与使用。2.1.2 实训预备知识实训预备知识 本实训项目主要是将前面所学习过的所有HTML控件综合在一起，做一个基于WEB的基本信息输入表单。注意在该项目中用到了表格控件。2.1.3 实训步骤实训步骤新建一文本文件，在文件中输入下列内容，并将该文件保存到特定的虚拟目录下，文件内容如下所示：基本资料输入表单 基本资料输入表单 姓名 性别 男 女 籍贯 -请选择你的籍贯-北京 上海 浙江 江苏 精通的语言 中文 英语 法语 2用IIS浏览该文件，结果如下所示 图3.22 控件综合应用本章小结本章小结 本章主要讲述了APS.NET中HTML控件的基本重要属性和使用，以及在实际应用中如何应用这些控件去建立一个表单，以便让用户将数据提交到服务器。思考与练习思考与练习1.说明什么是web表单？它有那些基本属性？各个属性的作用是什么？表单的作用是什么？2.说明HTML标记与HTML控件之间的区别和联系，它们在使用上有什么不同？3.使用HTML控件，设计一个允许用户输入姓名、登陆帐号、密码、生日、地址、电话号码、电子邮件的表单，并利用第二章所学的知识进行客户端验证。