《HTML服务器控件.ppt》由会员分享，可在线阅读，更多相关《HTML服务器控件.ppt（81页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第5章章 服务器控件服务器控件5.1 服务器控件简介服务器控件简介5.2 HTML服务器控件服务器控件5.3 Web服务器控件服务器控件5.1 服务器控件简介服务器控件简介 服务器控件是在服务器端执行的控件，在客户端浏览器中，服务器控件是在服务器端执行的控件，在客户端浏览器中，服务器控件的外观由服务器控件的外观由HTML代码来表现。服务器控件执行时，代码来表现。服务器控件执行时，首先在服务器端被编译，再根据客户的浏览器版本，自动生首先在服务器端被编译，再根据客户的浏览器版本，自动生成适合浏览器的成适合浏览器的HTML代码。代码。用服务器控件设计一个简单的企业信息页面，显示结果如用服务器控件设
2、计一个简单的企业信息页面，显示结果如图图5-1所示。所示。通过图通过图5-1可以看出这里使用了可以看出这里使用了3种控件，分别是种控件，分别是Label、TextBox和和DropDownList，在源码中它们都有，在源码中它们都有包含起来，并且有属性包含起来，并且有属性runat=“server”，表示是服务器控件。但在浏览器端都由，表示是服务器控件。但在浏览器端都由HTML标记代替。标记代替。下-页 返回5.1 服务器控件简介服务器控件简介另外，还可以发现浏览器的代码中增另外，还可以发现浏览器的代码中增ASP.NET服务器控件服务器控件可以分为两大类：可以分为两大类：HTML服务器控件和服
3、务器控件和Web服务器控件。服务器控件。将普通的将普通的HTML元素转化为元素转化为HTML服务器控件一般可以通过服务器控件一般可以通过下面两步实现。下面两步实现。在普通的在普通的HTML元素中添加元素中添加runat-”server”属性，表示属性，表示该元素在服务器端执行。该元素在服务器端执行。设置设置ID属性，标识服务器控件的身份，方便编程引用。属性，标识服务器控件的身份，方便编程引用。例如：例如：上-页 下-页 返回5.1 服务器控件简介服务器控件简介转化为服务器控件为：转化为服务器控件为：INPUT ID=“buttonl”type=“button”value=“提交提交”runat
4、=“server”Web服务器端控件有很多优点。服务器端控件有很多优点。更丰富且统一的对象模型。更丰富且统一的对象模型。自动检查浏览器类型。：自动检查浏览器类型。：可以保存状态到可以保存状态到ViewState里。：里。：另外，另外，Web服务器端控件还增加了绑定数据、选择日期服务器端控件还增加了绑定数据、选择日期等常用窗体功能控件。等常用窗体功能控件。上-页 下-页 返回5.1 服务器控件简介服务器控件简介 由于由于HTML元素、元素、HTML服务器控件和服务器控件和Web服务器控件服务器控件的功能有些部分是重合的，那么该如何进行选择呢？的功能有些部分是重合的，那么该如何进行选择呢？一般情况
5、下，可以坚持下面的原则。一般情况下，可以坚持下面的原则。显示或处理静态内容，使用传统的显示或处理静态内容，使用传统的HTML元素，能够节元素，能够节省大量资源，减少服务器编译量，从而减轻服务器压力。省大量资源，减少服务器编译量，从而减轻服务器压力。ASP程序转为程序转为ASP.NET程序时，可以使用程序时，可以使用HTML服务服务器控件，因为从元素转到器控件，因为从元素转到HTML服务器控件比较简单，只要服务器控件比较简单，只要在标签中添加在标签中添加runat-”server”属性即可。属性即可。新建新建ASP.NET程序时，建议使用程序时，建议使用Web服务器控件，因服务器控件，因为它是微
6、软最新技术并具有更强大的功能，符合未来发展方为它是微软最新技术并具有更强大的功能，符合未来发展方向，也是微软推荐使用的方案。向，也是微软推荐使用的方案。上-页 返回5.2 HTML服务器控件服务器控件 HTML服务器控件服务器控件System.Web.ULHtmIControls类继承而来的，整个控件组在类继承而来的，整个控件组在System.Object类中的位置类中的位置关系如关系如图图5-2所示。所示。5.2.1 超链接控件超链接控件HtmIAnchor HtmIAnchor是是HTML标记标记的控制元件，用于在的控制元件，用于在网页上显示一个超链接，属性有网页上显示一个超链接，属性有H
7、ref、Target、Title等，等，它们的作用如下。它们的作用如下。Href属性：用来指定链接的地址。属性：用来指定链接的地址。Target属性：用来指定网页所显示的框架位置。属性：用来指定网页所显示的框架位置。Title属性：用来指定链接文字的说明。属性：用来指定链接文字的说明。例例5.1代码如代码如T-1下-页 返回5.2 HTML服务器控件服务器控件 浏览网页，可以看到如浏览网页，可以看到如图图5-3所示的页面。所示的页面。5.2.2 表单控件表单控件HtmIForm 表单控件表单控件HtmIForm的作用是用来实现一个表单，标记的作用是用来实现一个表单，标记是是。method属性：
8、用于指定信息从浏览器传到服务器的方属性：用于指定信息从浏览器传到服务器的方法，它的取值有法，它的取值有get和和post，其中默认值为，其中默认值为post。action属性：用于指定提交表单信息时，处理表单信属性：用于指定提交表单信息时，处理表单信息的页面地址。默认的页面地址是当前页面地址。息的页面地址。默认的页面地址是当前页面地址。上-页 下-页 返回5.2 HTML服务器控件服务器控件5.2.3 按钮控件按钮控件HtmIButton按钮控件按钮控件HtmIButton用于在网页上显示一个按钮，其标记用于在网页上显示一个按钮，其标记为为。HtmIButton控件的主要方法有控件的主要方法有
9、 OnServerClick方法：用于指定处理单击事件的函数。方法：用于指定处理单击事件的函数。OnMouseOver方法：用于指定处理鼠标移动到按钮方法：用于指定处理鼠标移动到按钮上之后的事件的函数。上之后的事件的函数。OnMouseOut方法：用于指定处理鼠标移出按钮的事方法：用于指定处理鼠标移出按钮的事件的函数。件的函数。例例5.2代码如代码如T-2 浏览网页，可以看到如浏览网页，可以看到如图图5-4所示的页面。所示的页面。上-页 下-页 返回5.2 HTML服务器控件服务器控件5.2.4 图形控件图形控件Htmllmage 图形控件图形控件Htmllmage用于在网页上显示一个图形，其
10、标用于在网页上显示一个图形，其标记为记为。它常见的属性有。它常见的属性有src、height和和width等。等。src属性：用于指定图形的来源地址。属性：用于指定图形的来源地址。height属性：用于指定图形显示的高度，单位是像素属性：用于指定图形显示的高度，单位是像素或者是用图形的百分比来表示。或者是用图形的百分比来表示。width属性：用于指定图形显示的宽度，单位是像素或属性：用于指定图形显示的宽度，单位是像素或者是用图形的百分比来表示。者是用图形的百分比来表示。例例5.3代码如代码如T-3 浏览网页，可以看到如浏览网页，可以看到如图图5-5所示的页面。所示的页面。上-页 下-页 返回5
11、.2 HTML服务器控件服务器控件5.2.5 Htmllnput控件控件1HtmllnputFile控件控件 当当Htmllnput控件的属性被设置为控件的属性被设置为file时，就可从浏览时，就可从浏览器的客户端向服务器上传文件。器的客户端向服务器上传文件。需要将服务器端保存文件的目录设置为任何人可以存取。需要将服务器端保存文件的目录设置为任何人可以存取。表单的表单的Enctype属性需要设定为属性需要设定为“multiparUform-data”。其语法格式如下：。其语法格式如下：其中各个参数的含义如下。其中各个参数的含义如下。Maxlength：设置或取得上传文件的最大路径长度。：设置或
12、取得上传文件的最大路径长度。Size:设置或取得上传文件所显示的文本框的大小。设置或取得上传文件所显示的文本框的大小。Postedfile：上传服务器的文件对象，此对象属于：上传服务器的文件对象，此对象属于HttpPostedFile数据类型。数据类型。例例5.4代码如代码如T-4 浏览网页，可以看到如浏览网页，可以看到如图图5-6所示的页面。所示的页面。上-页 下-页 返回5.2 HTML服务器控件服务器控件2Htmllnputlmage控件控件 当当Input控件的控件的type属性被设置为属性被设置为image时，就成了一时，就成了一个图像按钮控件，不同于个图像按钮控件，不同于HtmIB
13、utton控件的是，所有的浏控件的是，所有的浏览器都支持览器都支持Htmllnputlmage控件。控件。它的语法形式如下：它的语法形式如下：input type=image Id=valuel Src=url OnServerClick=value2 Runat=“server”例例5.5代码如代码如T-5上-页 下-页 返回5.2 HTML服务器控件服务器控件浏览网页，可以看到如浏览网页，可以看到如图图5-7所示的页面。所示的页面。5.2.6 TextArea控件控件 像在像在HTML中的一样，在中的一样，在ASP.NET中的中的TextArea也是也是一个多行文本框。一个多行文本框。Te
14、xtArea的宽度由它的的宽度由它的Cols属性决定，属性决定，长度由长度由Rows属性决定。属性决定。它的语法形式如下：它的语法形式如下：5.2.7 InputHidden控件控件 上-页 下-页 返回5.2 HTML服务器控件服务器控件 可以用隐藏输入控件来处理一些要传送而又不想在页面上可以用隐藏输入控件来处理一些要传送而又不想在页面上显示出来的信息。显示出来的信息。例例5.6代码如代码如T-6 输入输入InputHidden，单击，单击“确定确定”按钮则显示出默认的按钮则显示出默认的隐藏值，如图隐藏值，如图5-8所示。所示。5.2.8 HtmITable控件控件 HtmITable服务器
15、控件能轻松地创建表格的行和列，也服务器控件能轻松地创建表格的行和列，也可以按照程序的模式自动生成表格。可以按照程序的模式自动生成表格。例例5.7代码如代码如T-7 浏览网页，可以看到如浏览网页，可以看到如图图5-9所示的页面。所示的页面。上-页 返回5.3 Web服务器控件服务器控件 Web服务器控件是服务器控件是.NET全力打造的新控件组，这套控件全力打造的新控件组，这套控件功能更强大、设计更合理、使用更方便，在进行功能更强大、设计更合理、使用更方便，在进行.NET开发时，开发时，建议多使用建议多使用Web服务器控件。服务器控件。Web服务器控件具有很多相同的属性和方法，在单独学服务器控件具
16、有很多相同的属性和方法，在单独学习每一个控件之前，先对这些属性和方法有个大致的了解，习每一个控件之前，先对这些属性和方法有个大致的了解，如如表表5.1所示。所示。5.3.1 Label控件控件 Label控件是一个标签控件，用于在控件是一个标签控件，用于在Web上显示提示信上显示提示信息。主要使用息。主要使用Text属性，此属性可以在编程时动态设置。属性，此属性可以在编程时动态设置。其语法形式如下：其语法形式如下：下-页 返回5.3 Web服务器控件服务器控件 例例5.8代码如代码如T-8 浏览网页，可以看到如图浏览网页，可以看到如图5-11所示的页面。所示的页面。5.3.2 TextBox控
17、件控件 TextBox控件是一个文本框控件，可以采用输入单行文控件是一个文本框控件，可以采用输入单行文本、密码和多行文本。默认情况下为单行文本，可以通过设本、密码和多行文本。默认情况下为单行文本，可以通过设置置TextMode属性来实现输入模式的改变。属性来实现输入模式的改变。例例5.9代码如代码如T-9上-页 下-页 返回5.3 Web服务器控件服务器控件 浏览网页，可以看到如浏览网页，可以看到如图图5-12所示的页面。所示的页面。5.3.3 Button控件控件 按钮控件的目的是使用户对页面的内容做出判断，当单击按钮控件的目的是使用户对页面的内容做出判断，当单击按钮后，页面会对用户的选择作
18、出一定的反应，达到与用户按钮后，页面会对用户的选择作出一定的反应，达到与用户交互的目的。按钮控件的使用虽然很简单，但是按钮控件却交互的目的。按钮控件的使用虽然很简单，但是按钮控件却是最常用的服务器控件之一。是最常用的服务器控件之一。5.3.4 Image控件控件 Image控件的作用是显示图片，它的语法形式如下：控件的作用是显示图片，它的语法形式如下：其中，对于其中，对于ImageAlign属性值的设置，可以见属性值的设置，可以见表表5.3。5.3.5 HyperLink控件控件 HyperLink控件是用来产生超级链接的控件，相当于控件是用来产生超级链接的控件，相当于HTML中的中的标记，其
19、语法形式如下：标记，其语法形式如下：上-页 下-页 返回5.3 Web服务器控件服务器控件 asp:Image ID=控件名称控件名称 runat=”server-Text=”超链接显示文字超链接显示文字”NavigateUrlUrl=”要链接的网址要链接的网址”Target=”超链接内容所要显示的窗口超链接内容所要显示的窗口”ImageUrl=”图片所在的位置图片所在的位置”例例5.11代码如代码如T-10 浏览网页，可以看到如浏览网页，可以看到如图图5-14所示的页面。所示的页面。上-页 下-页 返回5.3 Web服务器控件服务器控件5.3.6 LinkButton控件控件 LinkBut
20、ton控件是一个链接按钮控件，在控件是一个链接按钮控件，在Web页面上页面上显示为一个具有超链接样式的按钮。其语法形式如下：显示为一个具有超链接样式的按钮。其语法形式如下：例例5.12代码如代码如T-11上-页 下-页 返回5.3 Web服务器控件服务器控件浏览网页，可以看到如浏览网页，可以看到如图图5-15所示的页面。所示的页面。5.3.7 ImageButton控件控件 ImageButton控件与控件与LinkButton控件和控件和Button控件控件相比，它的单击事件还提供了单击图像时鼠标位置的相比，它的单击事件还提供了单击图像时鼠标位置的x、y坐坐标，所有标，所有ImageButt
21、on控件单击事件类型必须为控件单击事件类型必须为ImageClickEventArgs才可以。才可以。其语法形式如下：其语法形式如下：asp:ImageButtonID=控件名称控件名称runat=”server-上-页 下-页 返回5.3 Web服务器控件服务器控件 ImageUrl=”图片所在的位置图片所在的位置”OnClick=”处理此事件的程序处理此事件的程序”5.3.8 CheckBox控件和控件和CheckBoxList控件控件 CheckBox的使用比较简单，主要使用的使用比较简单，主要使用ID属性和属性和Text属属性。性。其语法形式如下：其语法形式如下：例例5.14代码如代码
22、如T-125.3.9 RadioButton控件和控件和RadioButtonList控件控件 RadioButton控件主要的属性跟复选框控件类似，也有控件主要的属性跟复选框控件类似，也有ID属性、属性、Text属性，同样也依靠属性，同样也依靠Checked属性来判断是否属性来判断是否选中，但是与多个复选框控件之间互不相关不同，多个单选选中，但是与多个复选框控件之间互不相关不同，多个单选上-页 下-页 返回5.3 Web服务器控件服务器控件 按钮控件之间存在着联系，要么是同一选择中的条件，要按钮控件之间存在着联系，要么是同一选择中的条件，要么不是。所以单选按钮控件多了一个么不是。所以单选按钮
23、控件多了一个 其语法形式如下：其语法形式如下：上-页 下-页 返回5.3 Web服务器控件服务器控件例例5.15代码如代码如T-13 浏览网页，可以看到如浏览网页，可以看到如图图5-18所示的所示的页面。页面。5.3.10 ListBox控件控件 列表框列表框(ListBox)控件是在一个文本框控件是在一个文本框内提供多个选项供用户选择的控件。列表框内提供多个选项供用户选择的控件。列表框其语法形式如下：其语法形式如下：5.3.11 DropDownList控件控件 在在ASP.NET中，有几种方法可以应用于列表控件。可以中，有几种方法可以应用于列表控件。可以在在aspx代码中直接嵌入相关的代码
24、中直接嵌入相关的代码，也可以在页面装入的时候加载这些列表信息。代码，也可以在页面装入的时候加载这些列表信息。其语法形式如下：其语法形式如下：上-页 下-页 返回5.3 Web服务器控件服务器控件 例例5.17代码如代码如T-14上-页 下-页 返回5.3 Web服务器控件服务器控件 浏览网页，可以看到如浏览网页，可以看到如图图5-20所示的页面。所示的页面。5.3.12 Panel控件控件 Panel控件是一个容器控件，用于在控件是一个容器控件，用于在Web页面上将一组页面上将一组控件作为一个整体进行统一管理，相当于控件作为一个整体进行统一管理，相当于HTML中的中的元素。通过设置元素。通过设
25、置Panel控件的控件的Visible属性可以隐藏或显示属性可以隐藏或显示Panel控件内所有控件。控件内所有控件。5.3.13 Table控件控件 Table控件是一个表格控件，用于在控件是一个表格控件，用于在Web页面上创建表页面上创建表格，功能与格，功能与HTML的的表格类似。表格类似。上-页 下-页 返回5.3 Web服务器控件服务器控件5.3.14 Calendar控件控件 Calendar控件是用于显示一个日历的控件，在控件是用于显示一个日历的控件，在Web网网页上显示为一个日历表。用户可以查看和选择星期几、一个页上显示为一个日历表。用户可以查看和选择星期几、一个月的第几周，或者一
26、年的第几个月，为了更加直观地介绍月的第几周，或者一年的第几个月，为了更加直观地介绍Calendar控件。控件。例例5.18代码如代码如T-15 浏览网页，可以看到如浏览网页，可以看到如图图5-21所示的页面。所示的页面。5.3.15 AdRotator控件控件 AdRotator控件是一个广告条控件，在控件是一个广告条控件，在Web网页上显示网页上显示为一个带有超链接的广告条样式的图像。为一个带有超链接的广告条样式的图像。上-页 下-页 返回5.3 Web服务器控件服务器控件建好信息文件后，就可以使用建好信息文件后，就可以使用AdRotator控件了，其中主要控件了，其中主要使用了使用了Adv
27、ertisements属性来指定信息文件即可。属性来指定信息文件即可。例例5.19代码如代码如T-165.3.16验证控件验证控件 在浏览网页时，经常会遇到需要输入用户信息的情况，例在浏览网页时，经常会遇到需要输入用户信息的情况，例如网上考试报名时，需要填写如网上考试报名时，需要填写个人信息。如果输入的信息不符合一定的格式，将会出现错个人信息。如果输入的信息不符合一定的格式，将会出现错误提示，这就是验证控件的功能。误提示，这就是验证控件的功能。ASP.NET提供的验证控件如表提供的验证控件如表5.10所示。所示。上-页 下-页 返回5.3 Web服务器控件服务器控件 除除ValidationS
28、ummary控件外，其他验证控件具有以控件外，其他验证控件具有以下基本属性，如下基本属性，如表表5.11所示。所示。5.3.17用户控件用户控件 除了使用除了使用ASP.NET内置控件外，用户还可以定义自己的内置控件外，用户还可以定义自己的控件，这称为用户控件，也称为控件，这称为用户控件，也称为pagelets。用户控件的编。用户控件的编写方法与普通的写方法与普通的Web表单文件表单文件(.aspx)类似，只需把文件另类似，只需把文件另存为存为.ascx格式的文件即可。格式的文件即可。例例5.21代码如代码如T-17上-页 下-页 返回5.3 Web服务器控件服务器控件5.3.18数据绑定数据
29、绑定 在使用在使用Web服务器控件时，可以把动态数据绑定到控件服务器控件时，可以把动态数据绑定到控件上，这样就能够实现控件动态显示。在绑定数据时，需要为上，这样就能够实现控件动态显示。在绑定数据时，需要为控件的控件的DataSource属性指定数据源，然后调用控件的属性指定数据源，然后调用控件的DataBind方法执行绑定。方法执行绑定。例例5.23代码如代码如T-18 浏览网页，可以看到如浏览网页，可以看到如图图5-26所示的页面。所示的页面。上-页 返回图图5-1服务器控件示例服务器控件示例返回图图5-2 HTML服务器控件结构关系服务器控件结构关系返回图图5-3 HtmlAnchor控件
30、示例控件示例返回图图5-4 HtmlButton控件示例控件示例返回图图5-5 HtmlImage控件示例控件示例返回图图5-6上传控件示例上传控件示例返回图图5-7 HtmlInputImage控件示例控件示例返回图图5-8 InputHidden控件示例控件示例返回图图5-9 HtmlTable控件示例控件示例返回图图5-11 Label控件示例控件示例返回图图5-12 TeXtBoX控件示例控件示例返回图图 5-14 HyperLink控件示例控件示例返回图图5-15 LinkButton控件示例控件示例返回图图 5-18 RadioButtonList控件示例控件示例返回图图5-20
31、DropDownList控件示例控件示例返回图图5-21 Calendar控件示例控件示例返回图图5-26数据绑定显示结果数据绑定显示结果返回表表5.1 Web服务器控件相同属性列表服务器控件相同属性列表返回表表5.3 ImageAlign的属性值的属性值返回表表5.10 ASP.NET提供的验证控件提供的验证控件返回表表5.11验证控件的基本属性验证控件的基本属性返回T-1返回T-2返回T-3返回T-4返回T-4T-5返回T-6返回T-7下-页 返回T-7上-页 下-页 返回T-7上-页 下-页 返回T-7上-页 返回T-8返回T-9下-页 返回T-9上-页 返回T-10下-页 返回T-10上-页 返回T-11下-页 返回T-11上-页 返回T-12下-页 返回T-12上-页 返回T-13下-页 返回T-13上-页 返回T-14下-页 返回T-14上-页 返回T-15返回T-16返回T-17返回T-18返回