1、第四讲第四讲 登录页面和注册页面设计登录页面和注册页面设计 教学内容教学内容 一、控件概述一、控件概述二、登录页面和注册页面二、登录页面和注册页面 三、三、LabelLabel控件控件四、四、TextBoxTextBox控件控件 五、五、ButtonButton控件控件 六、登录页面设计六、登录页面设计 七、注册页面设计七、注册页面设计 教学目标教学目标v了解了解ASP.NET控件的基本知识；控件的基本知识； v 掌握掌握Label控件、控件、TextBox控件和控件和Button控件的使用；控件的使用；v 掌握登录页面设计方法；掌握登录页面设计方法； v 掌握注册页面设计方法。掌握注册页面设
2、计方法。一、控件概述一、控件概述 （1/7）v在ASP.NET页面中，可以使用两种类型的控件：HTML控件和Web窗体控件。 v(一一)HTML控件控件 HTML控件由HTML标签转化而来，主要用来在网页上显示静态信息。由于提供了各种类型的HTML控件，使用它们来展示信息就显得十分的方便，对于文字、表格、图像等都有对应的控件可以选择。 由于HTML控件由HTML标签转化而来，它作为客户端项表现出来，因而不能为其编写服务器代码。然而也可以将HTML控件作为服务器控件使用，这时需要在其HTML标签内加上属性runat=server,就可以为其编写程序代码了。 向Web Form页面加入HTML控件
3、：在集成开发环境中，将工具箱切换到HTML组，然后将要使用的控件拖入页面即可。若要将其作为服务器控件使用，右击该控件，勾选“作为服务器控件运行” ，使得开发器自动在该控件的标签内加上“runat=server”属性，在页面的设计视图上，该控件的左上角增加了一个绿色的小三角标记。在HTML控件的属性窗口可以设置属性。属性窗口上没有闪电标记，表明它没有事件，不能为其编写事件处理程序。然而当HTML控件作为服务器控件运行时，却可以在.cs文件中为其编写一个服务器方法。例如在网页上有一个HTML的文本框控件Text1，将其为服务器控件运行后，双击它就会切换的C#代码编辑窗口，可以为它编写Text1_S
4、erverChange处理程序。 一、控件概述一、控件概述 （2/7）private void Text1_ServerChange(object sender, System.EventArgs e) /加入处理程序代码 所有的服务器控件都需要占用系统资源，若不需要为其编写服务器代码，就没有必要将其转化为服务器控件。若已经转化了，将其转换回来就是，方法是在页面的控件上击右键，于弹出菜单上去掉“作为服务器控件运行”的勾选，或者在其HTML标记上去掉runat=”server”属性。 一、控件概述一、控件概述 （3/7）v(二二) Web服务器控件服务器控件 Web窗体控件是服务器控件，它是AS
5、P.NET中功能强大的编程单元，每种Web窗体控件都是一个类。常见控件有：静态文本控件静态文本控件：如Label控件。数据输入和显示控件数据输入和显示控件：如TextBox控件。提交控件提交控件：如Button、LinkButton和ImageButton控件。列表控件列表控件：如DropDownList和ListBox控件。选择控件选择控件：如CheckBox、CheckBoxList、RadioButton和RadioButtonList控件。数据绑定控件数据绑定控件：如DataGrid、DataList和Repeater控件。图像控件：图像控件：如Image控件。月历控件：月历控件：如C
6、alendar控件。广告控件广告控件：如AdRotator控件。验证控件验证控件：如RequiredFieldValidator控件等。 一、控件概述一、控件概述 （4/7）v(三三) HTML控件和控件和Web窗体控件的选用窗体控件的选用 在一个Web Form网页上可以同时使用HTML控件和Web窗体控件，两类控件中有一些控件的功能是对应的，如都有Label控件。在选择控件时如何把握呢？1.使用使用HTML控件控件 如果需要将已有的ASP网页转换成ASP.NET网页，则可选择HTML控件。由于HTML服务器控件可以方便地对应于HTML项，所有的HTML设计环境都会支持它。 当控件需要与客户
7、端互动时，则使用HTML服务器控件。 有些HTML控件功能在Web窗体控件中找不到对应控件时，就只能使用HTML控件。例如常常使用Table HTML控件在页面上定位，使用File Field HTML控件浏览文件目录和选择文件，这两个HTML控件在Web窗体控件中找不到合适的对应控件。 一、控件概述一、控件概述 （5/7）v2.使用使用Web窗体控件窗体控件 熟悉VB一类的程序开发工具的Windows程序员，可选用Web窗体控件。因为在ASP.NET网页中使用Web窗体控件时，其编程方法与Windows窗体控件没有什么区别，就是设置或获取控件的属性，调用控件的方法，为控件的事件编写处理程序。
8、初学者使用Web窗体控件也容易上手。 希望控件的功能强大时选用Web窗体控件。象DataGrid一类的数据绑定控件，它不仅有丰富的手段来美化外观，还可以在其内嵌套子控件，实现非常复杂的功能。还有象Calendar月历控件，AdRotator广告控件等，没有任何HTML控件可以实现对应的功能。 需要验证数据时使用Web窗体控件。Web窗体控件中有多个数据验证控件，使用它们可以方便地验证数据的格式、非空、范围等而不必编写任何程序代码。一、控件概述一、控件概述 （6/7） (四四) 控控件使用的步骤使用的步骤 1.加入控件到页面加入控件到页面 2.调整控件的位置与大小调整控件的位置与大小 3.设置或
9、获取控件的属性设置或获取控件的属性 4.编写事件处理程序编写事件处理程序 一、控件概述一、控件概述 （7/7）二、登录页面和注册页面二、登录页面和注册页面 （1/3）v(一一)登录页面登录页面 登录页面是多数网站都有的页面，其功能是为了防止非法用户进入网站的某些页面。下图是常见的登录页面的形式。v(二二)注册页面注册页面注册页面也是多数网站都有的页面，其功能是为了获取用户的资料并保存下来。下图是常见的注册页面的形式。 二、登录页面和注册页面二、登录页面和注册页面 （2/3）v(三三)登录页面和注册页面设计步骤登录页面和注册页面设计步骤1.建立ASP.NET应用程序项目。 2.向页面中加入Web
10、服务器控件，这里用到了Label控件、TextBox控件和Button控件。 3.设置页面和控件的属性。 4.将页面连接到数据库。 5.编写后台代码访问数据库，核对用户名和密码或者将用户的资料保存到数据库。 二、登录页面和注册页面二、登录页面和注册页面 （3/3）三、三、Label控件控件 （1/4） Label控件称为标签，或静态文本，它的文本是可以由程序代码改变的，但程序运行后不能由用户改变。Label控件主要用作显示文本，作用在于提示信息（提示输入、提示错误）和展示文本信息。 v(一一)HTML标记标记 姓名 标记了一个Label控件，其 ID为Label1，为Web服务器控件，在页面上
11、显示“姓名”两个汉字。 v(二)常用属性常用属性 ID属性：属性：用于惟一标识该控件，默认值为类名Label之后加上“1”、“2”等。可以在其属性窗口修改这个属性值。如将Label1修改为LabelName，表示用来显示姓名。Text属性属性: 设置控件显示在页面上的文本内容，上面的HTML标记中的“姓名”就是Text属性值。Text属性值的类型为string，默认值与控件类型名相同。设置或获取Text属性的C#语法如下： Object.Text=字符串; /给Text属性赋值 或者： 字符串变量= Object.Text; /获取Text属性 其中Object表示当前控件的名字。例如： La
12、bel1.Text=”姓名”； /使在控件上显示“姓名”二字 或者： string name=Label1.Text; /将控件的文本赋给一个变量name 三、三、Label控件控件 （2/4）BorderStyle属性属性: 设置控件的边框风格。默认值为NotSet，无边框。可以设置为Solid(实线框)等。 BorderColor属性：属性：设置控件的边框颜色。默认值为Black，黑色。 BackColor属性属性: 设置控件的背景颜色。默认值为White，白色。 ForeColor属性属性: 设置控件的文本颜色。默认值为Black，黑色 Font属性：属性：设置控件的字体。属性窗口的属性
13、列表中，Font属性名前有一个“+”标记，单击它可以展开其子项，包括Name(字体名称)、Size（大小）、Bold(是否粗体)、Italic（是否斜体）、Overline(是否带上划线)、Underline(是否带下划线)、Strikeout(是否带删除线)等。 三、三、Label控件控件 （3/4）Enabled属性：属性：设置控件是否可用。当值为true时（默认），在浏览器中可用，呈指定的色彩显示；当值为false时，呈灰色显示，表示不可用。Visible属性：属性：设置控件是否可见。当值为true时（默认），在浏览器中可见，否则不可见。 ToolTip属性：属性：设置当鼠标放在控件上时
14、显示的工具提示信息。这个属性对于以图像方式显示的控件特别有效，有时用户可能不清楚某个控件的功用，当鼠标移动到其上时，看了工具提示信息自然明白。 上述的属性中，有很多属性是大多数控件都有的。若之后的控件也具有这些属性时就不再重复说明了。 (三三)事件事件 Label控件也有一些事件，一般很少为Label控件编写事件处理程序。 三、三、Label控件控件 （4/4）四、四、TextBox控件控件（1/5） TextBox控件称为文本框，主要用来接受用户的输入，当然也可以用于输出信息。 v(一一)HTML标记标记 标记了一个TextBox控件，ID属性为TextBox1，为Web服务器控件，没有默认
15、的文本。 v(二)常用属性常用属性 Text属性属性: 设置或获取文本框的文本内容。当用来接受用户的输入时，需要获取该属性值为程序代码所用；当用于输出信息时，需要将该属性设置到需要显示的内容。 Text属性的C#语法如下： Object.Text=字符串; /给Text属性赋值 或者： 字符串变量= Object.Text; /获取Text属性 其中Object表示当前控件的名字。例如： TextBox1.Text=”张山”； /使在文本框内显示“张山”二字或者：string name= TextBox1.Text; /将文本框中的文本赋给一个变量name DataBindings属性：属性：
16、设置将文本框绑定到一个数据源，通常是绑定到某个数据表的某个字段。四、四、TextBox控件控件（2/5） TextMode属性：属性：设置文本框的行为模式。其值可为： SingleLine:单行模式（默认）。只能单行显示文本。 MultiLine:多行模式。可以多行显示文本。 Password:密码模式。该模式下任何输入或显示的文本都是一串“”。 MaxLength属性：属性：设置文本框可输入的最大字符数目。该属性对于输入邮政编码一类的数据可能需要设置。 ReadOnly属性：属性：设置或获取文本框是否只读。当该属性值为true时，文本框只可显示信息，不允许编辑修改信息。 AutoPostBa
17、ck属性：属性：设置文本修改后是否自动回传到服务器。当它为false（默认）时，该控件上发生的任何客户事件都不会回传到服务器，为该控件编写的任何客户事件处理程序代码都不会被执行。四、四、TextBox控件控件（3/5） (三)常用事件 TextChange事件当文本框内的文本改变时发生。TextBox控件有一个特例，它的TextChange事件为非回传事件，即使将其AutoPostBack属性设置为true，当文本框内的文本发生改变时也不会执行为TextChange事件编写的程序代码，而是将消息缓存起来，等到下一次提交发生时才会去执行TextChange事件处理程序代码。为何要将文本框的Tex
18、tChange事件规定为非回传事件呢？若非如此，每当在文本框中按下一输入键或删除键，就有该事件回传，可能引起网络的拥堵。四、四、TextBox控件控件（4/5） (四四)常用方法常用方法 DataBind方法：方法：将数据源绑定到控件。若已经将TextBox控件的某个属性（例如Text属性）绑定到了数据源，当数据源初始化或更新之后，一定要调用这个方法将数据源绑定到控件。否则，控件就不能显示数据，甚至连控件本身都不会显示。 Web Form网页本身也有这个方法，其作用是相同的。若在网页中调用了它自己的DataBind方法，则可以免去网页中每个控件对自身的DataBind方法的调用。 四、四、Te
19、xtBox控件控件（5/5） 五、五、Button控件控件 Button控件称为命令按钮，用来实现向服务器提交网页。 v(一一)HTML标记标记 标记了一个Button控件，ID属性为Button1，为Web服务器控件，标题文字为“提交”。 v(二二)常用属性常用属性 Text属性：属性：显示在命令按钮上的文本，一般用来说明按钮的功能，例如“登录”。 v(三三)常用事件常用事件 Click事件：在命令按钮上单击时激发。一定会为这个事件编写事件处理程序，若一个命令按钮被单击时什么事也不做，这个按钮是不需要的。 六、登录页面设计六、登录页面设计 （1/4）登录页面为用户从这里登录到某个页面而设计，
20、其设计内容就是核对用户名和密码。登录页面设计的主要技术是使用SQL语言的select命令从数据表查询符合条件的行。 (一一)设计数据库设计数据库 设计一个SQL Server数据库MMIS，其下设计一个数据表memberInfo，表的结构如右。向表内输入若干条记录。 列名 数据类型 长度 允许空 是否主键 账号 char 10 No Yes 姓名 char 10 No No 性别 char 2 No No 家庭住址 char 50 No No 联系电话 char 20 No No Email char 20 No No 密码 char 20 No No 取回密码问题 char 20 No No
21、 取回密码答案 char 20 No No (二二)设置数据库的访问设置数据库的访问权限权限 为了使ASP.NET应用程序能够匿名访问数据库MMIS，需要编辑登录用户ASPNET对它的访问权限。 (三三)设计页面设计页面 登录页面在浏览器中的效果如右图。 在页面内使用两个Label标签控件指示用户输入，两个TextBox文本框控件接收用户输入，一个Button命令按钮提交登录，还有一个Label标签控件（id=”LabelMessage”）用于显示登录成功与否的信息。 六、登录页面设计六、登录页面设计 （2/4）(四四)数据库连接数据库连接 使用数据连接向导将页面连接到数据库MMIS，连接步骤
22、见5.2.3节。此举在页面上创建3个ADO.NET对象：数据连接对象sqlConnection1，数据适配器对象sqlDataAdapter1和数据集对象dataSet11。 (五五)编写编写C#后台代码后台代码 在控件Button1上双击，切换到C#代码编辑窗口。 为了在程序中使用针对SQL Server的数据对象，首先在程序头部加入using System.Data.SqlClient;行，以导入名字空间SqlClient，否则程序中使用到以Sql开头的ADO.NET基类时不能通过编译。 编写命令按钮Button1_Click事件处理程序，在该段程序中实现对用户登录事务的处理。 六、登录页
23、面设计六、登录页面设计 （3/4） “登录”按钮被单击的程序代码private void Button1_Click(object sender, System.EventArgs e) string number=this.TextBoxNo.Text; string password=this.TextBoxPass.Text; SqlCommand myCommand=this.sqlConnection1.CreateCommand(); myCommand.CommandText=select * from memberInfo where 账号=+ number+and 密码=+p
24、assword+; this.sqlDataAdapter1.SelectCommand=myCommand; int n=this.sqlDataAdapter1.Fill(dataSet11,memberInfo); if(n=1) this.LabelMessage.Text=恭喜，您能够成功登录; else this.LabelMessage.Text=抱歉，您不能够成功登录; 六、登录页面设计六、登录页面设计 （4/4）七、注册页面设计七、注册页面设计（1/3） 所谓注册，实际上就是将用户输入的个人信息保存到一个数据表，以备后用。注册页面设计的主要技术是使用SQL语言的insert命
25、令插入记录到数据表。本小节的示例仍然使用6.2.4节的数据库MMIS的memberInfo数据表。 ( (一一) )设计页面设计页面 注册页面在浏览器中的效果如右图。(二二)数据库连接数据库连接 采用程序代码连接数据库并创建3个ADO.NET对象：数据连接对象sqlConnection1，数据适配器对象sqlDataAdapter1和数据集对象dataSet11。 static string connection=workstation id=localhost;initial +catalog=MMIS;persist security info=False; Private SqlConn
26、ection sqlConnection1=new SqlConnection(connection); private SqlDataAdapter sqlDataAdapter1=new SqlDataAdapter(); private DataSet dataSet11=new DataSet(); 这一段代码写在.cs文件的public class WebForm1 : System.Web.UI.Page类中的字段声明之后，将3个ADO.NET对象作为WebForm1类的字段，以便在该类的任何方法中都能访问得到。 七、注册页面设计七、注册页面设计（2/3） (三三)编写编写C#后台代码后台代码事件处理程序Button1_Click的几个要点。 在程序中需要检查“账号”的空值和重复，因为它为主键，插入记录时不能违反主键的非空和惟一性约束。“账号”为空或重复时不允许插入。 需要检查“密码”和“重复密码”是否相同，这两个值不相同时不允许插入。 使用SQL语言的Insert命令插入记录。 插入记录的代码需要采用异常处理格式编写，以便插入记录出现异常时得到处理。 七、注册页面设计七、注册页面设计（3/3）
