《ASP.NET应用与开发技术教程 教学课件 PPT 作者 蒋忠仁 C6》由会员分享，可在线阅读，更多相关《ASP.NET应用与开发技术教程 教学课件 PPT 作者 蒋忠仁 C6（49页珍藏版）》请在金锄头文库上搜索。
1、第6章 Web控件的使用,第5章介绍的HTML控件是服务器控件的一种，本章将介绍另一种服务器控件：Web控件。Web控件可分成4大类：普通Web控件、增强Web控件、数据验证Web控件和数据绑定Web控件。本章将详细介绍普通Web控件的使用，包括提供文本显示与输入的Web控件的使用、提供选择的Web控件的使用、提供控制传送的Web控件的使用、与表格有关的Web控件的使用、Image控件的使用和Panel控件的使用。,6.1提供文本显示与输入的Web控件的使用 HTML控件能够完成普通Web控件的功能，为什么ASP.NET还要提供普通Web控件呢？ 6.1.1 提供文本显示与输入的Web控件简介
2、 1. Label控件 提供文本显示的普通Web控件是Label控件。它的语法如下： 或： 注意：在“asp:“和“Label“之间是不能有空格的。,Label控件常用的属性如表所示。 2. TextBox控件 提供文本输人的普通Web控件是TextBox控件。它的语法如下： ,注意：本章介绍的所有程序均须保存到C:Ich07目录下（如果Windows 2000安装在别的磁盘驱动器下，请读者依此进行设置），浏览时请在IE5.5的地址栏中输入http:/localhost/ 当用户在“E-mail”输人框中输人内容后，单击“提交”按钮，所输入的内容将会显示在下面的Label控件上。如右图所示。,
3、上述程序的执行过程如图6-3所示。 程序分析 1TextChanged事件 网页初次载入时，界面如图6.1所示。当在文本框中输入文字“”以后，单击“提交”按钮，导致网页重载，由于TextBox1的内容已经改变，因而引发TextChanged事件，执行该事件过程代码，将TextBoxl输入框中的内容显示在Label控件上。,2.Web控件与HTML标记之间的关系 相对于HTML控件而言，普通的Web控件虽然是一种完全面向对象的控件，但它在服务器上被ASP.NET解释以后，还是要传送给客户端的浏览器来显示，因而ASP.NET总是在服务器端将Web控件转译成对应的HTML标记，然后再传回客户端的浏览
4、器显示。 由上图的源代码可以看出，TextBox控件被转译成标记，而Label控件被转译成标记，普通的Web控件与HTML标记之间的对应关系如表6.3所示。,表6.3 Web控件与HTML标记之间的对应关系,6.1.2 TextBox控件的AutoPostBack属性的使用 有时在输入框中输入内容后，用户希望输入框内容的改变能立即得到响应，而不必等到单击“提交”按钮，导致网页重载后再响应。要想让输入框内容的改变立即得到响应，可通过设置TextBox控件的AutoPostBack属性来实现。 编写程序ch06_02.aspx，在其中设置TextBox控件的AutoPostBack属性为True，
5、这样就会将输人内容的改变自动反馈给服务器，并引发TextChanged事件来验证输入内容是否正确。 如果用户未输入用户名而直接输入E-mail，则会在网页上显示出错信息“用户名不可以为空，请重新输入！”；如果用户未输入E-mail或输入的E-mail中缺少符号“”，也会显示出错信息。如果输入正确，则在网页上显示输入的用户名及E-mail，如图6.6所示。,上述程序的执行过程如下图所示。,程序分析 （1） AutoPostBack属性 在上述程序中，由于将两个输入框的AutoPostBack属性的值设置为True，因而输入内容的改变会立即被自动反馈给服务器，并导致网页重载，执行TextBox控件
6、的TextChanged事件过程。 除了TextBox控件以外，还有CheckBox控件、CheckBoxList控件、RadioButton控件、RadioButtonList控件及ListBox控件也可设置它们的AutoPostBack属性。 （2）InStr函数 在上述代码中使用了函数InStr，代码为： InStr(2,E_mail.Text, “) 调用这个函数的作用是，在字符串E_mail.Text中，从第2个字符开始查找字符“”，如果找到，则返回第一次出现的位置否则返回0。弄懂了这个函数的作用，再来看看下面这段代码： IF InStr(2,E-mail.Text,“)=0 The
7、n Labell.Text=“E_mail输人中缺少，请重新输入！“ Exit Sub End IF 这段代码的作用是，判断在E_mail.Text中是否包含字符“”，如果没有，则显示出错信息。,6.1.3 TextBox控件的TextMode属性的使用 从表6.3可以看出,TextBox控件不仅可转译成“”，还可转译成“”或“”。也就是说，TextBox控件不仅可以作为单行文本输入框来使用，还可作为密码输入框和多行文本输入框来使用。 编写程序，在其中通过设置TextBox控件的TextMode属性，可以创建3种不同的文本输人框。网页的显示效果如图6.8所示，当单击“提交”按钮，网页的显示效果
8、如图6.9所示。,程序分析： TextBox控件可以被转译成、或，其外观分别对应着图6.8中的3个输入框。在什么情况下，将TextBox控件转译成这3种中的某一种，取决于它的TextMode属性。该属性的值可有3种选择： SingleLine 对应着。此为默认值，如果不设置TextMode属性，则默认为设置TextMode属性的值为SingleLine。 Password 对应着,即密码输入框，输入的文字一律以“*”显示。 MultiLine 对应着，可以多行多列输入文本。,6.2提供选择的Web控件的使用 提供选择的Web控件主要有RadioButton控件、RadioButtonList控
9、件、CheckBox控件、CheckBoxList控件、L1StBOX控件和DropDownList控件。 6.2.1 提供选择的Web控件简介 1RadioButton控件 RadioButton控件与标记的作用及用法基本一样，常用的属性和事件如表6.4所示。 2. RadioButtonList控件 RadioButtonList控件的作用与RadioButton控件的作用一样，但前者是一个单选按钮组，因而使用起来更简单方便。RadioButtonList控件常用的属性和事件如表6.5所示。,表6.4 RadioButton控件的属性和事件,表6.5 RadioButtonList控件的属
10、性和事件,3. CheckBox控件 除了没有GroupName属性以外，CheckBox控件常用的属性和事件与RadioButton控件的一样。 4. CheckBoxList控件 CheckBoxList控件常用的属性和事件与RadioButtonList控件的基本一样，稍有不同的是，由于CheckBoxList控件中的项目是可以复选的，因而其SelectedItem属性和SelectedIndex属性表示复选按钮列表中第1个被选中项的名称和序号。 5ListBox控件 ListBox控件常用的属性和事件为AutoPostBack属性、Items属性、SelectedIndex属性、Sel
11、ectedItem属性及SelectedIndexChanged事件，其作用及用法与RadioButtonList控件的同名属性的一样。 6. DropDownList控件 DronDownList控件常用的属性和事件与ListBox控件的一样。,6.2.2 RadioButton控件和RadioButtonList控件的使用 范例ch06_04.aspx：编写程序，在其中创建一个RadioButton控件有一个RadioButtonList控件。当单击“提交”按钮，网页被重载，用户所输入和选择的信息被显示在网页上。,程序分析： 在上述程序中，共布置有两组单选按钮，一组为“您最喜欢的书的类别：
12、”，对应着4个RadioButton控件，这4个控件的ID属性的值不同，但GroupName属性的值必须是一样的。 另一组单选按钮为“您最喜欢的付款方式：”，对应着一个RadioButtonList控件，通过设置来设置4个单选按钮项，但只需设置一个ID（即radPay )。相对而言，使用RadioButtonList控件比RadioButton控件更方便。以本范例为例，“您最喜欢的书的类别：”单选按钮组中共有4个单选按钮，那么，读取它们的值就必须使用4个IF语句。而读取第2组单选按钮的选取情况只需要一句语句，即： Result=Result“ 您最喜欢的付款方式：“radPay.Selecte
13、dltem.Text,在范例ch06_04.aspx中，RadioButtonList控件中的单选按钮是垂直方向排列的，可不可以水平方向排列呢？ 范例ch06_05.aspx：编写程序，在其中创建一个RadioButtonList控件，并设置它的RepeatDirection和RepeatColumns属性。当选中某个单选按钮后，网页被重载，用户所输入和选择的信息被显示在网页上。,程序分析： （1） 单选按钮组的排列方向 在范例4中，并没有设置RadioButtonList控件的RepeatDirection属性和RepeatColumns属性，因而单选按钮组是以垂直方向排列的。在本范例中，设
14、置RepeatDirection属性的值为“Horizontal”，再设置RepeatColumns属性的值为3，则单选按钮组是水平方向排列的，并且每行只排列3个。 （2） SelectedIndexChanged事件 由于将RadioButtonList控件的AutoPostBack属性的值设置为True，因而只要单选按钮组的选中状态发生了改变，就会导致网页重载，从而引发RadioButtonList控件的SelectedlndexChanged事件，并执行该事件过程，显示用户输入和选择的结果。,6.2.3 CheckBox控件和CheckBoxList的使用 范例ch06_06.aspx：
15、创建2个CheckBox控件和2个CheckBoxList控件。只有先选中“运动”复选按钮，其下面的复选按钮组才变得可选；同样，只有先选中“音乐”复选按钮，其下面的复选按钮组才变得可选。当选择完毕后，单击“提交”按钮，网页被重载，用户所选择的信息被显示在网页上。,程序流程图,6.2.4 ListBox控件和DropDownList控件的使用 范例ch06_07.aspx：创建1个ListBox控件和1个DropDownList控件。单击“提交”按钮，网页被重载，用户所选择的信息就被显示在网页上。,程序分析： ListBox控件与DropDownList控件的作用及用法非常相似，都通过来添加子项
16、，且都通过SelectedItem.Text来读取被选择项的内容。不同的是，前者是以平面列表的形式显示子项，而后者以弹出列表的形式显示子项。 注意： ListBox控件和DropDownList控件，包括前面介绍的RadioButtonList控件及CheckBoxList控件都可以通过调用它们的Items属性的Add方法来添加子项 。,6.3 提供控制传送的Web控件的使用 6.3.1 提供控制传送的Web控件简介 提供控制传送的Web控件主要有Button控件、LinkButton控件ImageButton控件及HyperLink控件。 1Button控件 Button控件常用的属性和方法如表所示。,2. Li
