- ASP.NET从入门到精通(第5版)
- 明日科技
- 1902字
- 2025-02-25 17:24:12
3.1 文本类型控件

视频讲解
3.1.1 Label控件
1. Label控件概述
Label控件又称标签控件,主要用于显示用户不能编辑的文本,如标题或提示等。如图3.1所示为Label控件。

图3.1 Label控件
说明
Label控件可以用于显示固定的文本内容,或者根据程序的逻辑判断显示动态文本。
Label控件的常用属性及说明如表3.1所示。
表3.1 Label控件的常用属性及说明

2. 设置Label控件的外观
设置Label控件外观的常用方法有两种,即通过属性面板设置和通过引用CSS样式设置。下面分别进行介绍。
1)通过属性面板设置Label控件的外观
通过属性面板设置Label控件的外观,只需更改Label控件的外观属性即可。具体属性的设置及其效果如图3.2所示。

图3.2 通过属性窗口设置Label控件的外观
注意
(1)通过属性面板设置Label控件的外观,也可以通过HTML代码实现,具体代码如下:

(2)以下所有控件的外观属性都可以通过属性面板进行设置,以后将不再赘述。
2)通过引用CSS样式设置Label控件的外观
【例3.1】通过引用CSS样式设置Label控件的外观。(示例位置:mr\TM\03\01)
下面的示例主要通过引用CSS样式设置Label控件的外观,示例运行结果如图3.3所示。

图3.3 通过引用CSS样式设置Label控件的外观
程序实现的主要步骤如下。
(1)新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个Label控件。
(2)在该网站上右击,在弹出的快捷菜单中选择“添加新项”命令,将弹出“添加新项”对话框,在该对话框中选择“样式表”,默认名称为StyleSheet.css。单击“添加”按钮,为该网站添加一个CSS样式文件,在该文件中添加如下代码,为Label控件设置外观样式:

(3)将Default.aspx页切换到HTML视图中,在<head></head>节中编写如下代码,引用已编写好的CSS样式文件:

(4)在属性面板中设置Label控件的CssClass属性为stylecs(stylecs为样式名)。
3. 使用Label控件显示文本信息
【例3.2】使用Label控件显示文本信息。(示例位置:mr\TM\03\02)
下面的示例主要通过设置Label控件的Text属性,显示静态的文本信息,如显示“明日网站欢迎您的光临”字样,示例运行结果如图3.4所示。

图3.4 使用Label控件显示文本信息
程序实现的主要步骤如下。
(1)新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个Label控件。
(2)打开属性面板,设置Label控件的Text属性值为“明日网站欢迎您的光临”,并对Label控件的外观属性进行适当的修改。
技巧
通过编程方式也可以设置Label控件的文本,代码如下:

其中,Label1为Label控件的ID属性值。
3.1.2 TextBox控件
1. TextBox控件概述
TextBox控件又称文本框控件,用于输入或显示文本。TextBox控件通常用于可编辑文本,但也可以通过设置其属性值,使其成为只读控件。如图3.5所示为TextBox控件。
TextBox控件相当于一个写字板,可以对输入的文本进行更改;而Label控件相当于一个提示板,不能对文本进行编辑。

图3.5 TextBox控件
说明
TextBox控件可用于显示或者输入单行文本、多行文本以及密码格式的文本。
TextBox控件的常用属性及说明如表3.2所示。
表3.2 TextBox控件的常用属性及说明

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所示。

图3.6 使用TextBox控件制作会员登录界面
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加2个TextBox控件,它们的属性设置如表3.3所示。
表3.3 TextBox控件属性设置

3. 使用TextBox控件制作用户注册界面
【例3.4】使用TextBox控件制作用户注册界面。(示例位置:mr\TM\03\04)
下面的示例主要通过设置TextBox控件的TextMode属性值,制作会员注册界面。执行程序,并在TextBox文本框中输入文字,示例运行结果如图3.7所示。
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加6个TextBox控件,它们的属性设置如表3.4所示。

图3.7 使用TextBox控件制作用户注册界面
表3.4 TextBox控件属性设置

技巧
虽然VB中的关键字不能作为变量名,但可将关键字嵌入变量名中。例如,print是非法变量名,但print_3或print3都是合法的变量名。
1. 制作不可编辑的文本框
对于TextBox文本框中的信息,默认情况下是可以编辑的,但在制作Web页面时(如显示用户详细信息页),有时需要只显示文本框中的信息,而不需要修改TextBox中的信息。实现该功能,可以将TextBox控件的ReadOnly属性设置为true。代码如下:

2. 限制文本框的输入字符长度
在制作Web页面,如在制作用户登录页面时,有时希望用户输入的密码只为6个字符,可以将输入密码的TextBox文本框的MaxLength属性值设置为6。代码如下:
