![ASP.NET从入门到精通(第5版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/771/27111771/b_27111771.jpg)
3.1 文本类型控件
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P65_12146.jpg?sign=1739325940-Ve2XFLy2CyDPcMaW2L6Ev3n2gGKUtsLQ-0-de98aa3f59c09615376b05a5d234c27b)
视频讲解
3.1.1 Label控件
1. Label控件概述
Label控件又称标签控件,主要用于显示用户不能编辑的文本,如标题或提示等。如图3.1所示为Label控件。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P65_12135.jpg?sign=1739325940-aowkIJoYOERJ10Jlpbd8u4Md1sVbd1Rr-0-11504dd94c5e35e92addda0d28b3d662)
图3.1 Label控件
说明
Label控件可以用于显示固定的文本内容,或者根据程序的逻辑判断显示动态文本。
Label控件的常用属性及说明如表3.1所示。
表3.1 Label控件的常用属性及说明
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-T65_12158.jpg?sign=1739325940-NMWlCOQ1NZRhU7usOrlOWxCjw3cfQz4n-0-25573bc87417efa163bf9dc4b82f6dfa)
2. 设置Label控件的外观
设置Label控件外观的常用方法有两种,即通过属性面板设置和通过引用CSS样式设置。下面分别进行介绍。
1)通过属性面板设置Label控件的外观
通过属性面板设置Label控件的外观,只需更改Label控件的外观属性即可。具体属性的设置及其效果如图3.2所示。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P66_91141.jpg?sign=1739325940-XK3C1h5LDcXvRywB98Nn0u17ZIsVqzQZ-0-8af446a5b382a655434d8de5b32f40dc)
图3.2 通过属性窗口设置Label控件的外观
注意
(1)通过属性面板设置Label控件的外观,也可以通过HTML代码实现,具体代码如下:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P66_90529.jpg?sign=1739325940-L8ZQ7oGwJJmx62pTSp6cmfDTa7VeWYqc-0-3d15a10294e8b2ce1c8b68df5a06893c)
(2)以下所有控件的外观属性都可以通过属性面板进行设置,以后将不再赘述。
2)通过引用CSS样式设置Label控件的外观
【例3.1】通过引用CSS样式设置Label控件的外观。(示例位置:mr\TM\03\01)
下面的示例主要通过引用CSS样式设置Label控件的外观,示例运行结果如图3.3所示。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P66_14912.jpg?sign=1739325940-jHHDxK07ekBDTepBe7bzzr6nJcwrO569-0-8a43aa06fc171b770af2d0d8e3e67078)
图3.3 通过引用CSS样式设置Label控件的外观
程序实现的主要步骤如下。
(1)新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个Label控件。
(2)在该网站上右击,在弹出的快捷菜单中选择“添加新项”命令,将弹出“添加新项”对话框,在该对话框中选择“样式表”,默认名称为StyleSheet.css。单击“添加”按钮,为该网站添加一个CSS样式文件,在该文件中添加如下代码,为Label控件设置外观样式:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P66_86460.jpg?sign=1739325940-K95lnN47oPWQaE4AU0tTHSfyOl5jlunJ-0-c75a605d5ce1b9157805f98dce68225e)
(3)将Default.aspx页切换到HTML视图中,在<head></head>节中编写如下代码,引用已编写好的CSS样式文件:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P67_86462.jpg?sign=1739325940-PLOEmYXaKdUYDREluwiUQLf8PjzWqaUY-0-be5fdc7283a6af12d0b2b77e76f68b1f)
(4)在属性面板中设置Label控件的CssClass属性为stylecs(stylecs为样式名)。
3. 使用Label控件显示文本信息
【例3.2】使用Label控件显示文本信息。(示例位置:mr\TM\03\02)
下面的示例主要通过设置Label控件的Text属性,显示静态的文本信息,如显示“明日网站欢迎您的光临”字样,示例运行结果如图3.4所示。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P67_12208.jpg?sign=1739325940-3LnBvWVM5Sjkp2OBxw2t3sdCn8Tk7JH7-0-9fa9255fbd6636c72442dd60348bf669)
图3.4 使用Label控件显示文本信息
程序实现的主要步骤如下。
(1)新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个Label控件。
(2)打开属性面板,设置Label控件的Text属性值为“明日网站欢迎您的光临”,并对Label控件的外观属性进行适当的修改。
技巧
通过编程方式也可以设置Label控件的文本,代码如下:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P67_90533.jpg?sign=1739325940-DxXygN4agn85AEj248XbVYejWCZaTOLH-0-e8aa9acdbdd5827af73a24589ed0f927)
其中,Label1为Label控件的ID属性值。
3.1.2 TextBox控件
1. TextBox控件概述
TextBox控件又称文本框控件,用于输入或显示文本。TextBox控件通常用于可编辑文本,但也可以通过设置其属性值,使其成为只读控件。如图3.5所示为TextBox控件。
TextBox控件相当于一个写字板,可以对输入的文本进行更改;而Label控件相当于一个提示板,不能对文本进行编辑。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P68_86469.jpg?sign=1739325940-QjtfHadDS2AfEp3KpstpqmN9r8f16rfQ-0-5661bc787c63dc8c2d6094f955d448b2)
图3.5 TextBox控件
说明
TextBox控件可用于显示或者输入单行文本、多行文本以及密码格式的文本。
TextBox控件的常用属性及说明如表3.2所示。
表3.2 TextBox控件的常用属性及说明
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-T68_15045.jpg?sign=1739325940-mNaUK0yuMWUS6KUHUpFkcq1wndzN0e71-0-922c8eab367328d7ac5bfe4abb3a96a1)
TextBox控件大部分属性设置和Label控件类似,具体可参见Label控件属性设置,下面主要介绍TextMode属性。
TextMode属性主要用于控制TextBox控件的文本显示方式,该属性的设置选项有以下3种。
- ☑ 单行(SingleLine):用户只能在一行中输入信息,还可以通过设置TextBox的Columns属性值限制文本的宽度;通过设置MaxLength属性值限制输入的最大字符数。
- ☑ 多行(MultiLine):文本很长时,允许用户输入多行文本并执行换行,还可以通过设置TextBox的Rows属性值,限制文本框显示的行数。
- ☑ 密码(Password):将用户输入的字符用黑点(●)屏蔽,以隐藏这些信息。
2. 使用TextBox控件制作会员登录界面
【例3.3】使用TextBox控件制作会员登录界面。(示例位置:mr\TM\03\03)
下面的示例主要通过设置TextBox控件的TextMode属性值,制作会员登录界面。执行程序,并在两个TextBox文本框中输入文字,示例运行结果如图3.6所示。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P69_12327.jpg?sign=1739325940-pWRkUMRYhdj2YBr91pH6VDC96HMXpnEU-0-83f144978bbc897456731e20a69032f1)
图3.6 使用TextBox控件制作会员登录界面
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加2个TextBox控件,它们的属性设置如表3.3所示。
表3.3 TextBox控件属性设置
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-T69_12433.jpg?sign=1739325940-zz2QCwozESEUj0pLdaHUYzt9s5Omrdb8-0-3c10f04f0bbc02643ce4734cdf886afd)
3. 使用TextBox控件制作用户注册界面
【例3.4】使用TextBox控件制作用户注册界面。(示例位置:mr\TM\03\04)
下面的示例主要通过设置TextBox控件的TextMode属性值,制作会员注册界面。执行程序,并在TextBox文本框中输入文字,示例运行结果如图3.7所示。
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加6个TextBox控件,它们的属性设置如表3.4所示。
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P69_12423.jpg?sign=1739325940-gXLVcvLcZiTiBXRoGJfXM33aasgIlj5T-0-568966a0d3edee623a29c25ac317f543)
图3.7 使用TextBox控件制作用户注册界面
表3.4 TextBox控件属性设置
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-T69_12435.jpg?sign=1739325940-yKJLYcul6eVZoXBOzOv7wGsi3kpKJZSq-0-5252c04f78c590b5e22a6149e5a38c78)
技巧
虽然VB中的关键字不能作为变量名,但可将关键字嵌入变量名中。例如,print是非法变量名,但print_3或print3都是合法的变量名。
1. 制作不可编辑的文本框
对于TextBox文本框中的信息,默认情况下是可以编辑的,但在制作Web页面时(如显示用户详细信息页),有时需要只显示文本框中的信息,而不需要修改TextBox中的信息。实现该功能,可以将TextBox控件的ReadOnly属性设置为true。代码如下:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P70_90539.jpg?sign=1739325940-5mX3T9GyTwEKpcvpjnpxLpfbAyYq3gAY-0-c15173df875d944158688c4545409984)
2. 限制文本框的输入字符长度
在制作Web页面,如在制作用户登录页面时,有时希望用户输入的密码只为6个字符,可以将输入密码的TextBox文本框的MaxLength属性值设置为6。代码如下:
![](https://epubservercos.yuewen.com/745A13/15477657604593106/epubprivate/OEBPS/Images/Figure-P70_90541.jpg?sign=1739325940-qNhJN3AMv56hwSkktBxkdFrzURVAd3OC-0-98e34bdb6132a6ca17120602205eb603)