同济Web技术及应用课件PPT之第3章服务器控件.ppt

1、Web技术与应用,主 讲 教 师：陆有军 E-Mail地址：,第三章 服务器控件,2020/8/29,服务器控件,2 / 80,本 章 内 容,控件概述 HTML服务器控件 Web服务器控件 用户控件 控件的高级操作,2020/8/29,服务器控件,3 / 80,什么是服务器控件？,本章内容,不仅仅是页面上的表单元素，ASP.NET是想将页面上所有的内容都用控件表示。 这些控件实际上是在服务器端运行的，所以称为服务器控件。,Web表单,6 之 1,2020/8/29,服务器控件,4 / 80,控件的声明,本章内容,方法一 方法二 欢迎大家 ,6 之 2,2020/8/29,服务器控件,5 /

2、80,属性、事件和方法,本章内容,在VB.NET中所有控件也是用类实现，也可以看作一个对象，自然具有特定的属性、事件和方法。控件属性是控件特性的描述，包括控件的外观特性和非可视化的特性；从面向对象观点看，属性就是控件对象的数据成员。控件事件是对控件所做的某个动作或系统的某些行为。控件方法实质上就是函数或过程，每一类控件都有自己的方法，以实现各种功能。,6 之 3,2020/8/29,服务器控件,6 / 80,例:控件的属性、事件和方法,本章内容,3-1.aspx,运行结果,6 之 4,2020/8/29,服务器控件,7 / 80,执行过程分析,本章内容,第1步： 第2步： 第3步：,6 之 5

3、,2020/8/29,服务器控件,8 / 80,控件的分类,本章内容,HTML服务器控件 由System.Web.UI.HtmlControls类实现，基本上对应传统的HTML标签，在每一个HTML标签的属性中添加runat=“server”就变成了HTML服务器控件，就可以在程序代码中对其操作。 Web服务器控件 由System.Web.UI.WebControls类实现，是针对Web表单提供的全新的解决方案，它包括标准控件（文本框、单选框等）、丰富控件（日历、广告条）和验证控件。 用户控件 ASP.NET允许开发人员创建自己的控件。,6 之 6,2020/8/29,服务器控件,9 / 80

4、,HTML服务器控件,这类控件主要是为了保留原来的HTML标签，一般和原来的HTML标签一一对应，只是增加了属性runat=“server” 。,本章内容,20 之 1,2020/8/29,服务器控件,10 / 80,HtmlForm控件,本章内容,含义 HtmlForm控件（Web表单）其实就是一个容器，用来盛放其它表单控件。 语法 ,20 之 2,2020/8/29,服务器控件,11 / 80,HtmlInputText控件,本章内容,含义 HtmlInputText控件（单行文本框和密码框）是一个可以输入文本或密码的控件。 语法 ,20 之 3,2020/8/29,服务器控件,12 /

5、80,HtmlTextArea控件,本章内容,含义 HtmlTextArea控件（多行文本框）可以用来输入多行文本。 语法 ,20 之 4,2020/8/29,服务器控件,13 / 80,HtmlInputHidden控件,本章内容,含义 HtmlInputHidden控件（隐藏控件）类似于文本框，但是客户端看不到。 语法 ,20 之 5,2020/8/29,服务器控件,14 / 80,HtmlInputRadioButton控件,本章内容,含义 HtmlInputRadioButton控件（单选框）是一个单选框控件。 语法 ,20 之 6,2020/8/29,服务器控件,15 / 80,例:

6、单选框,本章内容,test3_1.aspx,运行结果,20 之 7,2020/8/29,服务器控件,16 / 80,HtmlInputCheckBox控件,本章内容,含义 HtmlInputCheckBox控件（复选框）是一个复选框控件。 语法 ,20 之 8,2020/8/29,服务器控件,17 / 80,例:复选框,本章内容,test3_2.aspx,运行结果,20 之 9,2020/8/29,服务器控件,18 / 80,HtmlSelect控件,本章内容,含义 HtmlSelect控件（下拉列表框）是一个下拉列表框。 语法 选项1 选项2 ,20 之 10,2020/8/29,服务器控件

7、,19 / 80,例:下拉列表框,本章内容,test3_3.aspx,运行结果,20 之 11,2020/8/29,服务器控件,20 / 80,HtmlGenericControl控件,本章内容,含义 HtmlGenericControl控件（一般控件）指的是如body、span、div等HTML标签所对应的控件。 语法 显示的HTML代码 | 显示的文本 ,20 之 12,2020/8/29,服务器控件,21 / 80,HtmlInputButton控件,本章内容,含义 HtmlInputButton控件（提交、重置和普通按钮）是一个按钮控件，一般用来提交Web表单。 语法 ,20 之 13

8、,2020/8/29,服务器控件,22 / 80,综合示例一 之一,本章内容,20 之 14,2020/8/29,服务器控件,23 / 80,综合示例一 之二,本章内容,20 之 15,2020/8/29,服务器控件,24 / 80,HtmlInputFile控件,本章内容,含义 HtmlInputFile控件（文件上传控件）可以将客户端的文件上传到服务器端。 语法 ,20 之 16,2020/8/29,服务器控件,25 / 80,PostedFile属性,本章内容,该属性只能在程序代码中使用，用来获取上传的文件（HttpPostedFile对象）。 HttpPostedFile对象具有下列属

9、性 ContentLength：文件大小； ContentType：文件的MIME类型； FileName：获取位于客户端计算机上的被上传的文件的完整路径名 HttpPostedFile对象只有一个方法，即SaveAs(filename)，该方法可以将上传的文件存储在服务器上。,20 之 17,2020/8/29,服务器控件,26 / 80,例:简单的文件上传,本章内容,3-3.aspx,运行结果,20 之 18,2020/8/29,服务器控件,27 / 80,提 示,本章内容,文件上传HtmlInputFile控件只能在IE3.02或更高版本上使用，并且要求form的编码方式为multipa

10、rt/form-data，即在声明表单标签时需要使用以下格式： ,20 之 19,2020/8/29,服务器控件,28 / 80,例:稍微复杂的文件上传,本章内容,3-4.aspx,运行结果,20 之 20,2020/8/29,服务器控件,29 / 80,Web服务器控件,本章内容,Web服务器控件是.NET提供的一套全新的控件解决方案，设计更加合理，使用也更加简单。它与HTML服务器控件有一定的相似性，但是并没有一一对应。常用的文本框、密码框、下拉列表框、单选框、复选框、文本区域、按钮等控件，还有日历、广告等控件。,3 之 1,2020/8/29,服务器控件,30 / 80,Web服务器控件

11、的一些相同属性,本章内容,Font ForeColor、BackColor、BorderColor Height、Width、BorderWidth Style、CssClass Enabled TabIndex、ToolTip Visible,3 之 2,2020/8/29,服务器控件,31 / 80,内 容,本章内容,3 之 3,标准控件 丰富控件 验证控件,2020/8/29,服务器控件,32 / 80,Label控件 标签,Web服务器控件 本章内容,含义 Label控件（标签）可以在页面上显示信息。 语法 ,17 之 1,2020/8/29,服务器控件,33 / 80,TextBox

12、控件 文本框,Web服务器控件 本章内容,17 之 2,2020/8/29,服务器控件,34 / 80,RadioButton控件 单选框,Web服务器控件 本章内容,17 之 3,2020/8/29,服务器控件,35 / 80,RadioButtonList控件 单选列表框, 选项文字0 选项文字1 ,Web服务器控件 本章内容,17 之 4,2020/8/29,服务器控件,36 / 80,例:RadioButtonList控件,test3_4.aspx,运行结果,Web服务器控件 本章内容,17 之 5,2020/8/29,服务器控件,37 / 80,CheckBox控件 复选框,Web服

13、务器控件 本章内容,17 之 6,2020/8/29,服务器控件,38 / 80,CheckBoxList控件 复选列表框, 选项文字0 选项文字1 ,Web服务器控件 本章内容,17 之 7,2020/8/29,服务器控件,39 / 80,DropDownList控件 下拉列表框, 选项文字1 选项文字2 ,Web服务器控件 本章内容,17 之 8,2020/8/29,服务器控件,40 / 80,例: DropDownList控件,test3_5.aspx,运行结果,Web服务器控件 本章内容,17 之 9,2020/8/29,服务器控件,41 / 80,Button控件 按钮,Web服务器

14、控件 本章内容,17 之 10,2020/8/29,服务器控件,42 / 80,综合示例 之一,Web服务器控件 本章内容,17 之 11,2020/8/29,服务器控件,43 / 80,综合示例 之二,Web服务器控件 本章内容,17 之 12,2020/8/29,服务器控件,44 / 80,HyperLink控件 超链接,Web服务器控件 本章内容,17 之 13,2020/8/29,服务器控件,45 / 80,LinkButton控件 超链接按钮,Web服务器控件 本章内容,17 之 14,2020/8/29,服务器控件,46 / 80,LinkButton控件 超链接按钮,Web服务器

15、控件 本章内容,17 之 15,2020/8/29,服务器控件,47 / 80,ListBox控件 列表框, 选项文字1 选项文字2 ,Web服务器控件 本章内容,17 之 16,2020/8/29,服务器控件,48 / 80,Panel控件 容器控件, 其它控件 ,Web服务器控件 本章内容,17 之 17,2020/8/29,服务器控件,49 / 80,丰富控件,Web服务器控件 本章内容,AdRotator控件 Calendar控件,2020/8/29,服务器控件,50 / 80,AdRotator控件 广告控件,丰富控件 Web服务器控件 本章内容,4 之 1,AdRotator控件用

16、于制作广告条。AdRotator控件在每次打开或重新加载网页时在页面上放置一幅新的广告。 显示的广告取决于AdRotator配置文件。该文件是一个XML格式的文件，包含显示图像和链接信息显示频率 。,2020/8/29,服务器控件,51 / 80,AdRotator控件 语法,4 之 2,丰富控件 Web服务器控件 本章内容,2020/8/29,服务器控件,52 / 80,例:广告控件 广告信息文件,3-6.xml,4 之 3,丰富控件 Web服务器控件 本章内容,2020/8/29,服务器控件,53 / 80,例:广告控件 显示广告控件,3-7.aspx,运行结果,4 之 4,丰富控件 We

17、b服务器控件 本章内容,2020/8/29,服务器控件,54 / 80,Calendar控件 日历控件,3 之 1,Calendar控件在页面中呈现为一个HTML表格，显示标题行、星期名称行、日期行。该控件在不做任何属性设置时即可正常工作，可用作页面中的日历。默认情况下，日历控件显示从当日起的6个星期日历。标题行和单元各个显示格式是可以设置的，并且该控件还可用于用户输入日期。,丰富控件 Web服务器控件 本章内容,2020/8/29,服务器控件,55 / 80,Calendar控件 语法,3 之 2,丰富控件 Web服务器控件 本章内容,2020/8/29,服务器控件,56 / 80,例:日历

18、控件,3-8.aspx,运行结果,3 之 3,丰富控件 Web服务器控件 本章内容,2020/8/29,服务器控件,57 / 80,验证控件,Web服务器控件 本章内容,10 之 1,2020/8/29,服务器控件,58 / 80,RequiredFieldValidator控件 必填验证,Web服务器控件 本章内容,10 之 2,2020/8/29,服务器控件,59 / 80,CompareValidator控件 比较验证,Web服务器控件 本章内容,10 之 3,2020/8/29,服务器控件,60 / 80,RangeValidator控件 范围验证,Web服务器控件 本章内容,10 之

19、 4,2020/8/29,服务器控件,61 / 80,RegularExpressionValidator控件 正则验证,Web服务器控件 本章内容,10 之 5,2020/8/29,服务器控件,62 / 80,正则表达式,Web服务器控件 本章内容,概念 所谓正则表达式，就是比通常用的*和?通配符更复杂的一种字符串定义规则。 例如： a-zA-Z3,6表示可以输入3到6个字母。 其中表示其中是可以输入的字符，a-z表示所有的小写字母，A-Z表示所有的大写字母。表示字符的数目，3,6表示3到6个，n,表示n个以上，n表示n个，如省略，表示1个。 0-96 可以输入6个数字。0-9表示所有的数字

20、。 .0, 可以输入任意多个任意字符。.表示可以是任意字符。 例子 电话验证：0-93,4-0-97,8 。 18位身份证验证：0-96120-93010-901230-90-9312。 E-mail验证：.1,.1,.a-zA-Z2,3 。,10 之 6,2020/8/29,服务器控件,63 / 80,格式字符,Web服务器控件 本章内容,10 之 7,2020/8/29,服务器控件,64 / 80,ValidationSummary控件,Web服务器控件 本章内容,含义 集中显示所有未通过验证的控件错误提示信息。 语法 ,10 之 8,2020/8/29,服务器控件,65 / 80,综合示

21、例 之一,Web服务器控件 本章内容,3-9.aspx,10 之 9,2020/8/29,服务器控件,66 / 80,综合示例 之二,Web服务器控件 本章内容,3-9.aspx,运行结果,10 之 10,2020/8/29,服务器控件,67 / 80,用户控件,本章内容,可以利用用户控件将几个控件包装成一个控件，如用户登录控件。 用户控件的编写与普通的Web表单（.aspx）类似，但不能包含、和等标记，而且扩展名为.ascx。 用户控件不能作为独立的Web窗体页来运行，必须加入到.aspx网页中； 用户控件一般可以分为包含事件的用户控件和不包含事件的控件。,5 之 1,2020/8/29,服

22、务器控件,68 / 80,不包含事件的用户控件 之一,本章内容,3-10.ascx,5 之 2,2020/8/29,服务器控件,69 / 80,不包含事件的用户控件 之二,本章内容,3-11.aspx,运行结果,5 之 3,2020/8/29,服务器控件,70 / 80,包含事件的用户控件 之一,本章内容,3-12.ascx,5 之 4,2020/8/29,服务器控件,71 / 80,包含事件的用户控件 之二,本章内容,3-13.aspx,运行结果,5 之 5,2020/8/29,服务器控件,72 / 80,控件的高级操作,本章内容,使用AutoPostBack属性 数据绑定 动态产生控件 对控件应用样式,2020/8/29,服务器控件,73 / 80,使用AutoPostBack属性,控件的高级操作 本章内容,一般情况下，当客户输入信息后，单击“提交”按钮才将Web表单传送到服务器端。如果需要需要即时回传表单，可以使用AutoPostBack属性实现。例如：对于选择下拉列表框（DropDownList控件），需要设置AutoP