实训2 Web应用程序的界面设计
一.实训目的：
1、掌握文本类型控件的常用属性，事件，方法的设置方法 2．能熟练掌握Label,TextBox,Button控件的使用
二.实训内容：
任务一：设计一个模拟的用户登录页面，当用户名文本框为空时，输出“请输入用户名“，当输入用户名，按Enter键或单击页面空白处时，则在页面中输出欢迎信息”尊敬的用户ⅩⅩⅩ你好！“
具体操作步骤： 1.建立网站： 2.设计页面
3.添加控件及置属性
各控件对象的属性设置： 控件 属性 TextBox1 ID AutoPostBack Label1 ID Text 4.编写事件代码 using System;
using System.Configuration; using System.Data; using System.Linq; using System.Web;
using System.Web.Security;
6
值 txtName True lblInfo 说明 文本框1的名字 文本修改后，数据自动回传给服务器 标签控件在程序中使用的名字 标签倥件初始状态不显示文本 using System.Web.UI;
using System.Web.UI.HtmlControls; using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
this.Title = \文本类型控件学习页面\ txtName.Focus();
if (txtName.Text.Trim() == \ {
lblInfo.Text = \请输入用户名\
} }
protected void TextBox1_TextChanged(object sender, EventArgs e) {
if (txtName.Text.Trim() == \ {
lblInfo.Text = \请输入用户名\ } else {
lblInfo.Text = \尊敬的用户\你好！\ } } }
程序说明：
1. 在asp.net中，字符串连接用“+“。 2. Focus( ) 此方法用于获取光标的焦点。
3. Trim( ) 为了避免用户输入若干空格来通过程序判断，所以在获取文本框的值时调用Trim( )方法，将字符串前后的空格移除，即从当前String 对象中移除所有前导空白字符和尾部空白字符，避免空格对程序产生的影响。
任务二：
创建一个“用户管理“的页面，要求当输入用户名，密码，联系电话，个
7
人描述后，单击”添加“按扭，用户管理信息就会在下方的Label控件中显示，程序运行效果如图：
具体操作步骤： 1.建立网站： 2.设计页面
3.添加控件及设置属性 4.编写事件代码
using System;
using System.Configuration; using System.Data; using System.Linq; using System.Web;
using System.Web.Security; using System.Web.UI;
using System.Web.UI.HtmlControls; using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page {
8
protected void Page_Load(object sender, EventArgs e) { }
protected void Button1_Click(object sender, EventArgs e)
{
if ((TextBox1.Text.Trim() == \
\|| (TextBox2.Text.Trim() == \|| (TextBox3.Text.Trim() == \
{ Label1.Text = \输入框不能为空,请输入完全\
else {
Label1.Text = TextBox1.Text +\你的密码是：\联系电
话：\+ \个人描述：\
} } }
三、思考与练习
1.如何灵活运用Label,TextBox,Button等控件。
9