81网页中的控件类型.docx
- 文档编号:29002357
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:34
- 大小:215.18KB
81网页中的控件类型.docx
《81网页中的控件类型.docx》由会员分享,可在线阅读,更多相关《81网页中的控件类型.docx(34页珍藏版)》请在冰豆网上搜索。
81网页中的控件类型
第8章网页标准控件
控件是一种类,绝大多数控件都具有可视的界面,能够在程序运行中显示出其外观。
利用控件进行可视化设计既直观又方便,可以实现“所见即所得”(WhatYouSeeIsWhatYouGet,简称为WYSIWYG)的效果。
程序设计的主要内容是选择和设置控件以及对控件的事件编写处理代码。
本章将介绍网页中最常用的几个标准网页控件。
目的在于学会这些常用控件的使用方法。
其他控件在后续的章节中介绍。
8.1网页中的控件类型
ASP.NET的类库中包括大量的控件,根据功能可以将它们分成以下几种类型。
标准控件:
这些控件属于服务器控件。
除窗体页中常用的按钮、文本框等控件以外,还有一些特殊用途的控件,例如,显示日历的控件等。
网页标准控件与HTML元素标记之间不存在一对一的对应关系。
验证控件:
用于检验用户的输入。
例如,验证是否缺少必须填入的字段;输入的数据格式是否符合要求;输入的数据是否在指定的范围内等。
用户控件及自定义控件:
这些控件都是由程序设计者自行定义的控件,是对系统控件的扩展。
用户控件可以在项目内不同网页中重复使用,从而提高了程序设计的效率,同时还能使各网页的显示风格一致。
HTML控件:
默认情况下它属于客户端(浏览器端)控件,但也可以将其转换成服务器端控件。
每个控件对应于一个HTML元素的标记。
数据源控件
这类控件可以针对各种数据源实现数据绑定功能,这包括微软的SQLServer和Access,以及其他关系型数据库、XML文件和代码中实现的类。
数据视图控件
这类控件呈现为各种列表和表格,它们可以绑定到数据源以显示和编辑数据。
个性化控件
这类控件允许用户个性化地展示自己的站点,包括重新调整网页本身等。
用户信息会被自动地、透明地保存,并从一个会话持续到下一个会话。
登录控件和安全控件
这类控件实现站点中的普通登录功能,并维护用户的密码。
组合控件:
由多个标准控件组合而成,能够完成如客户认证等比较复杂的功能。
ASP.NET2.0增加了近60个控件,其中有不少是功能强大的组合控件,从而大大提高了快速开发的能力。
8.2HTML控件转换成服务器控件
HTML控件是从基类System.Web.UI.HtmlControls.HtmlControl直接或间接派生的类,并且都直接映射到HTML元素上。
默认情况下HTML控件属于浏览器端控件,服务器无法控制。
这些元素被视为传递给浏览器的不透明的文本。
这些不透明的文本被传送到浏览器后由浏览器下载并负责解释、执行。
但是,为了适应ASP.NET应用的需要,可以将HTML元素转换成HTML服务器控件,从而在服务器端对它们进行编程和处理。
将HTML控件转换成服务器控件非常简单。
下面举例说明。
例如,想将一个TextField浏览器端控件转换成服务器端控件,转换的方法如下:
用手工方法在控件的定义中增加runat="server"属性,该控件就变成了服务器端控件。
如果原来的HTML控件中没有id属性时,也应该补上。
增加上述属性后,控件的定义如下:
HTML控件的功能在前面HTML章节中已经详细介绍,这里不再作讨论
8.3网页标准控件功能和格式
在ASP.NET2.0的【工具箱】中,只有HTML选项卡中的控件是浏览器端控件,其他各种控件都是服务器控件。
其中【标准】选项卡中的控件是常用的控件。
在类库中,所有的网页控件都是从System.Web.UI.Control.WebControls直接或间接派生而来的。
1.网页标准控件的功能
在【工具箱】的【标准】选项卡中包括有几十个标准控件。
这些控件中既有传统的窗体控件,例如,按钮、选择控件、文本框等,还有用来显示数据、选择日期等比较复杂的控件。
其中,有的控件还具有很高的智能,例如:
能自动检测浏览器的类型,并根据浏览器的类型提供不同的输出。
能够使用模板来定义控件的外观。
可以选择事件信息传送的方式,是立即发送给服务器,还是先缓存然后再和其他信息一起传送给服务器。
有的控件可将事件信息从嵌套控件(例如表中的按钮)传递到它的容器控件。
2.定义标准控件的格式
定义网页标准控件的格式如下:
Controlid="name"runat="server"/> 其中asp代表命名空间,所有的Web服务器控件的命名空间都是asp;Control代表控件的类型;id代表控件的标志;runat="server"代表这是一个服务器控件,默认情况下,所有标准控件都是服务器控件。 例如,定义Label、TextBox、Button等网页控件的代码如下。 Labelid="Label1"runat="server"/> TextBoxid="TextBox1"runat="server"/> Buttonid="Button1"runat="server"/> 8.4.设置控件的属性和事件处理程序 开发人员通过从“工具箱”窗口拖放控件到设计页面上,并利用属性浏览器为其设置属性和事件。 大多数控件都拥有一些共有的属性与事件,例如ID、Text属性以及Click事件等。 让我们通过几个简单的控件来熟悉为控件设置属性和添加事件的基本方法。 首先,创建一个ASP.NET网站,切换到Default.aspx页面的“设计”视图,从“工具箱”的“标准”组中将一个Label控件拖放到页面上。 右击该控件,在菜单中选择【属性】,展开“属性”窗口(图11-1)。 在设置Label控件的属性前,先对“属性”窗口做一个了解。 图11-2中标出了“属性”窗口中最上面一行的四个按钮的作用。 靠左边的两个按钮用于指定属性和事件排序的方式,通常使用按字母顺序排列便于查找。 后面的两个按钮则是在属性与事件列表间切换时使用。 接下来,就可以在属性列表中为Label控件设置属性了。 图11-3是以Label控件的外观的属性值: BackColor(背景色)、BorderColor(边框颜色)、BorderStyle(边框样式)、BorderWidth(边框宽度)、Font(字体)、ForeColor(前景色)、Height(高度)等为例。 图 11-1 图 11-2 图 11-3 之前在“属性”窗口中所做的设置,也可以在该视图中手动添加。 代码清单111 设置Label控件属性 Labelrunat="server"ID="Label1"Text="Appearance" BackColor="Blue"BorderColor="Yellow"BorderWidth="2px" Font-Bold="True"Font-Names="Verdana"ForeColor="White"> Label> 控件 属性名称 属性值 Label ID lbName Text 请输入您的姓名: TextBox ID tbName Button ID btSubmit Text 提交 Label ID lbResult Text 置空 在本示例中,将Label控件的Text属性设为“请输入您的姓名: ”,然后添加TextBox、Button和另外一个Label控件至页面。 选中Button控件,在其“属性”窗口中将Text属性值设置为“提交”。 更详细的控件属性设置见右侧的表。 其余样式按图11-4布局。 图 11-4 切换回“源”视图,此时的HTML标记丰富了许多(如图11-5所示)。 图 11-5 所有服务器控件使用“asp: ”作为前缀,并包括一个runat=“server”的属性。 这表明当页面运行时它们由ASP.NET在服务器端进行处理。 接下来为Button控件添加处理事件。 返回“设计”视图,双击Button控件,或者是选中Button控件,在“属性”窗口中点击事件标记 ,双击Click事件右侧的文本框(图11-6)。 此时,集成开发环境将在编辑器的单独窗口中打开Default.aspx.cs文件,其中包含Button按钮的Click事件处理程序框架,键入如下代码: 代码清单11-2 protectedvoidbtSubmit_Click(objectsender,EventArgse) { lbResult=tbName.Text+",欢迎您! "; } 现在按下Ctrl+F5在浏览器中运行该页。 在文本框中输入名称并单击提交按钮。 输入的名称将显示在Label控件中(图11-7)。 图 11-7 8.5.标准控件介绍 标准的服务器控件的作用比较广泛,本节重点介绍标准控件中常用控件的使用方法和技巧。 (1)标签控件 Label标签控件是最简单的控件,该控件的功能就是输出文本。 向Web窗体页添加Label服务器控件步骤如下: 1.从工具箱的“标准”选项卡中,将Label控件拖到页面上。 2.在“属性”窗口的“外观”类别中,将该控件的Text属性设置为要显示的文本。 文本也可以利用程序动态地设定。 定义的语法如下: labelid="Label1"runat="server">输出文本 label> 或 labelid="Label1"runat="server"Text="输出文本"/> 其中: “asp”为标准控件区别于HTML控件而添加的标记,在使用标准控件时,每个控件名称前都必须加上“asp”; 可以在文本属性中包括HTML标记,例如,在Text属性中,可以通过在文本中放置标记来对文本加粗。 Label1.Text="Label标签控件"; 运行程序后,文本“Label标签控件”加粗显示,这表明Label控件文本属性中的HTML标记是要被解释的。 (2)文本框控件 TextBox文本框控件为用户提供了一种向网页中输入信息(包括文本、数字和日期)的方法。 定义的格式如下: Textboxid="TextBox1"Text="请在这里输入数据"Column="25"MaxLengh="35"runat="server"/> TextBox控件有一个重要的属性: TextMode。 该属性包括3个选项。 SingleLine: 单行编辑框; MultiLine: 带滚动条的多行文本框; PassWord: 密码输入框,所有输入字符都用特殊字符(例如“*”)来显示。 Maxlength属性设置TextBox控件可以接收的最大字符数。 (3)按钮控件 标准控件中提供了三种按钮: 普通按钮(Button)、超链接按钮(LinkButton)和图片按钮(ImageButton)。 它们之间功能相同,只有外观上有区别。 Button的外观与传统按钮的外观相同;LinkButton的外观与超链接字符串相同;ImageButton按钮用图形方式显示外观,其图像通过ImageURL属性来设置。 三种按钮的功能都与HTML的提交按钮(SubmitButton)相似,即每当这些按钮被单击(Click)时,就将缓冲区中的事件信息一并提交给服务器。 定义按钮的语法如下: Buttonid="Button1"runat="server"Text="按钮"> Button> LINKbuttonid="LinkButton1"runat="server">链接按钮 LinkButton> ImageButtonid="ImageButton1"runat="servervImageUrl="…"> 用鼠标双击LinkButton按钮,然后在隐藏文件中给按钮的Click事件写出以下程序,该按钮即可通过服务器转向新的网页,从而起到“超链接”的作用。 privatevoidLinkButton1_Click(objectsender,System.EventArgse) { Response.Redirect("其他窗体的URL"); } 另外,三种按钮都有一个PostBackUrl属性,利用这个属性可以将按钮变成“返回”按钮。 即先将该属性设置成某个网页的URL,以后单击该按钮时就会直接转向该网页。 实例: 使用超链接按钮来提交用户登入信息,实现步骤如下。 (1)在网站中添加新的“Web窗体”,在新建的页面中,选择“设计”视图。 (2)在页面中输入“请输入用户名和密码: ”、“用户名”和“密码: ” (3)在“用户名”和“密码: ”右侧分别添加文本框控件TextBox1和TextBox2,并在文本框控件TextBox2的“属性”窗口设置“TextMode”属性值为Password。 (4)在页面中添加两个LinkButton控件,并分别在“属性”窗口中设置Text属性为“重写”和“确定”。 (5)添加“标准”选项卡中的Label控件到页面中,在“属性”窗口中的“Font”属性下设置控件的字形(Bold)为粗体,并删除Text属性值。 页面设计效果如图所示。 (6)在页面中双击“重写”按钮,生成LinkButton1_Click事件,并切换到显示逻辑代码的“源”视图中,在该窗口中输入事件共能实现代码,如下所示: protectedvoidLinkButton1_Click(objectsender,EventArgse) { TextBox1.Text=""; TextBox2.Text=""; } 代码的作用是清空文本框中的内容。 其实我们可以用HTML的“重写”按钮代替LinkButton控件,只要把“Input(Reset)”HTML按钮加入到页面中,就可以实现重写的功能,不过要注意: “Input(Reset)”控件必学放在文本框所在的 (7)切换到“设计”视图,双击“确定”按钮生成LinkButton2_Click事件,并切换到“源”视图中,在该窗口中输入事件共能实现代码,如下所示: protectedvoidLinkButton2_Click(objectsender,EventArgse) { if(TextBox1.Text=="") { Response.Write(" "); return; } if(TextBox2.Text=="") { Response.Write(" "); return; } if(TextBox1.Text! ="ZhangSan") { Response.Write(" "); TextBox1.Text=""; return; } if(TextBox2.Text! ="123456") { Response.Write(" "); TextBox2.Text=""; return; } Label1.Text="用户身份验证成功! "; } (8)在“.aspx”页面中单击右键,在弹出的“快捷菜单”中选择“在浏览器中查看”,即可浏览页面运行结果。 (4)复选控件 CheckBox复选框控件和CheckBoxList复选框列表控件为用户提供了在真/假、是/否或开/关选项之间进行选择的方法。 CheckBox是单个控件,可以单独使用。 使用单个CheckBox控件时,更容易控制页面上的布局。 例如,可以在各个复选框之间包含文本。 也可以单独控制复选框的字体和颜色。 该控件的常用属性如下: Checked用于判断或设定该项目是否被选中,如果Checked控件被选中,该属性返回值为TRUE,否这返回值为FALSE。 GroupName用于判断或设定按钮所属的组,如果多个CheckBox复选框控件的GroupName值相同,那么他们属于同一组。 Text用于设置控件的文本标签,默认值为空。 TextAlign用于判断或设定CheckBox控件的文本标签在选取框的左方还是在右方。 ,默认值是右方(Right); 而CheckBoxList复选框列表控件可以将多个CheckBox组合在一起使用。 如果想用数据库中的数据创建一系列复选框,则CheckBoxList控件是较好的选择。 使用CheckBoxList时要给控件增添选项。 方法是先选择该控件,然后找到控件的Items属性,单击右边的省略号按钮,将弹出如图7.1所示的对话框。 HTML中的CheckBox控件只能用于静态处理,而网页控件中的CheckBox可以进行数据绑定操作,所以通常用于动态数据绑定。 关于数据绑定,将在以后的章节中介绍。 CheckBoxList控件的常用属性如下: RepeatColumns获取或设置要在CheckBoxList控件中显示的列数。 RepeatDirection获取或设置一个值,该值指示控件是垂直显示还是水平显示。 SelectedIndex获取或设置列表中选定项的索引值。 SelectedItem获取列表控件中选定项的参数。 (继承自ListControl。 ) SelectedValue获取列表控件中选定项的值,或选择列表控件中包含指定值的项。 SelectedItems由于CheckBoxList控件可复选,被选取的项目被加入ListItems集合中;;本属性可传回ListItems集合,只读。 Text获取或设置ListControl控件的SelectedValue属性。 (继承自ListControl。 ) TextAlign获取或设置组内复选框的文本对齐方式。 实例: 使用CheckBox控件进行多门课程选择。 在页面中添加四个CheckBox控件: CheckBox1、CheckBox2、CheckBox3、CheckBox4,一个按钮控件Button1,一个Label控件Label1。 页面设计效果如图所示。 其功能的“源”视图中BODY代码如下, 请选择你要选修的课程: CheckBoxID="CheckBox1"runat="server"Text="动态网站设计"/> CheckBoxID="CheckBox2"runat="server"Text="编译原理"/> CheckBoxID="CheckBox3"runat="server"Text="数据库原理"/> CheckBoxID="CheckBox4"runat="server"Text="软件工程"/> ButtonID="Button1"runat="server"Text="选择"OnClick="Button1_Click"/> LabelID="Label1"runat="server"> Label> 后置代码.cs文件中按钮的Button1_Click事件如下: protectedvoidButton1_Click(objectsender,EventArgse) { stringstr="你要选修的课程是: "; if(CheckBox1.Checked) str+=CheckBox1.Text+""; if(CheckBox2.Checked) str+=CheckBox2.Text+""; if(CheckBox3.Checked) str+=CheckBox3.Text+""; if(CheckBox4.Checked) str+=CheckBox4.Text; Label1.Text=str; } 实例: 动态添加复选框 本例使用复选框列表实现选择课程,并可动态添加课程,在页面中添加文本框控件TextBox1和TextBox2,按钮控件Button1,CheckBoxList控件CheckBoxList1,Label控件Label1。 页面设计效果如图所示。 其功能的“源”视图中BODY代码如下, 课程名称(text): TextBoxID="TextBox1"runat="server"> TextBox> 课程编码(value): TextBoxID="TextBox2"runat="server"> TextBox> ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="添加课程"/> 请选择课程: CheckBoxListID="CheckBoxList1"runat="server"AutoPostBack="True"OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" RepeatDirection="Horizontal"> CheckBoxList> LabelID="Label1"runat="server"> Label> CheckBoxList控件中的AutoPostBack属性设定用户选择不同的项目时,是否要自动触发OnSelectedIndexChanged事件,当AutoPostBack="true"时,服务器控件将发生自动回传,而不需通过按钮控件的Click事件引发;当AutoPostBack="false",则回传必须经过类似Click的事件引发。 下面要讲到的“单选控件”、“Select控件”也有AutoPostBack属性,功能相同。 按钮的Button1_Click事件和复选框列表的CheckBoxList1_SelectedIndexChanged事件如下: protectedvoidButton1_Click(objectsender,EventArgse) { CheckBoxList1.Items.Add(newListItem(TextBox1.Text,TextBox2.Text));
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 81 网页 中的 控件 类型