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