ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编第四讲 登录页面和注册页面设计 教学内容 一、控件概述 二、登录页面和注册页面 三、Label控件 四、TextBox控件 五、Button控件 六、登录页面设计 七、注册页面设计 ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编2教学目标v了解ASP.NET控件的基本知识； v 掌握Label控件、TextBox控件和Button控件的使用；v 掌握登录页面设计方法； v 掌握注册页面设计方法。ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编3一、控件概述 （1/7）v在ASP.NET页面中，可以使用两种类型的控件：HTML 控件和Web窗体控件。 v(一)HTML控件 HTML控件由HTML标签转化而来，主要用来在网页上显 示静态信息。由于提供了各种类型的HTML控件，使用它们 来展示信息就显得十分的方便，对于文字、表格、图像等都 有对应的控件可以选择。 由于HTML控件由HTML标签转化而来，它作为客户端项 表现出来，因而不能为其编写服务器代码。然而也可以将 HTML控件作为服务器控件使用，这时需要在其HTML标签内 加上属性runat=server,就可以为其编写程序代码了。 ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编4向Web Form页面加入HTML控件：在集成开发环境中 ，将工具箱切换到HTML组，然后将要使用的控件拖入页面 即可。若要将其作为服务器控件使用，右击该控件，勾选“ 作为服务器控件运行” ，使得开发器自动在该控件的标签内 加上“runat=server”属性，在页面的设计视图上，该控件的 左上角增加了一个绿色的小三角标记。 在HTML控件的属性窗口可以设置属性。属性窗口上没 有闪电标记，表明它没有事件，不能为其编写事件处理程 序。然而当HTML控件作为服务器控件运行时，却可以在.cs 文件中为其编写一个服务器方法。例如在网页上有一个 HTML的文本框控件Text1，将其为服务器控件运行后，双 击它就会切换的C#代码编辑窗口，可以为它编写 Text1_ServerChange处理程序。 一、控件概述 （2/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编5private void Text1_ServerChange(object sender, System.EventArgs e) /加入处理程序代码 所有的服务器控件都需要占用系统资源，若不需要为 其编写服务器代码，就没有必要将其转化为服务器控件 。若已经转化了，将其转换回来就是，方法是在页面的 控件上击右键，于弹出菜单上去掉“作为服务器控件运行” 的勾选，或者在其HTML标记上去掉runat=”server”属性 。 一、控件概述 （3/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编6v(二) Web服务器控件 Web窗体控件是服务器控件，它是ASP.NET中功能强大 的编程单元，每种Web窗体控件都是一个类。常见控件有： 静态文本控件：如Label控件。 数据输入和显示控件：如TextBox控件。 提交控件：如Button、LinkButton和ImageButton控件。 列表控件：如DropDownList和ListBox控件。 选择控件：如CheckBox、CheckBoxList、RadioButton和 RadioButtonList控件。 数据绑定控件：如DataGrid、DataList和Repeater控件。 图像控件：如Image控件。 月历控件：如Calendar控件。 广告控件：如AdRotator控件。 验证控件：如RequiredFieldValidator控件等。 一、控件概述 （4/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编7v(三) HTML控件和Web窗体控件的选用 在一个Web Form网页上可以同时使用HTML控件和 Web窗体控件，两类控件中有一些控件的功能是对应的，如 都有Label控件。在选择控件时如何把握呢？ 1.使用HTML控件 如果需要将已有的ASP网页转换成ASP.NET网页，则可 选择HTML控件。由于HTML服务器控件可以方便地对应于 HTML项，所有的HTML设计环境都会支持它。 当控件需要与客户端互动时，则使用HTML服务器控件 。 有些HTML控件功能在Web窗体控件中找不到对应控件 时，就只能使用HTML控件。例如常常使用Table HTML控件 在页面上定位，使用File Field HTML控件浏览文件目录和选 择文件，这两个HTML控件在Web窗体控件中找不到合适的对 应控件。 一、控件概述 （5/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编8v2.使用Web窗体控件 熟悉VB一类的程序开发工具的Windows程序员，可 选用Web窗体控件。因为在ASP.NET网页中使用Web窗体控 件时，其编程方法与Windows窗体控件没有什么区别，就是 设置或获取控件的属性，调用控件的方法，为控件的事件编 写处理程序。初学者使用Web窗体控件也容易上手。 希望控件的功能强大时选用Web窗体控件。象 DataGrid一类的数据绑定控件，它不仅有丰富的手段来美化 外观，还可以在其内嵌套子控件，实现非常复杂的功能。还 有象Calendar月历控件，AdRotator广告控件等，没有任何 HTML控件可以实现对应的功能。 需要验证数据时使用Web窗体控件。Web窗体控件中 有多个数据验证控件，使用它们可以方便地验证数据的格式 、非空、范围等而不必编写任何程序代码。一、控件概述 （6/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编9(四) 控件使用的步骤1.加入控件到页面 2.调整控件的位置与大小 3.设置或获取控件的属性 4.编写事件处理程序一、控件概述 （7/7）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编10二、登录页面和注册页面 （1/3）v(一)登录页面 登录页面是 多数网站都有的 页面，其功能是 为了防止非法用 户进入网站的某 些页面。下图是 常见的登录页面 的形式。ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编11v(二)注册页面注册页面也是多数网站都有的页面，其功能是为了 获取用户的资料并保存下来。下图是常见的注册页面的 形式。 二、登录页面和注册页面 （2/3）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编12v(三)登录页面和注册页面设计步骤1.建立ASP.NET应用程序项目。 2.向页面中加入Web服务器控件，这里用到了Label 控件、TextBox控件和Button控件。 3.设置页面和控件的属性。 4.将页面连接到数据库。 5.编写后台代码访问数据库，核对用户名和密码或 者将用户的资料保存到数据库。 二、登录页面和注册页面 （3/3）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编13三、Label控件 （1/4）Label控件称为标签，或静态文本，它的文本是可以由程 序代码改变的，但程序运行后不能由用户改变。Label控件主 要用作显示文本，作用在于提示信息（提示输入、提示错误 ）和展示文本信息。 v(一)HTML标记 姓名标记了一个Label控件，其 ID为Label1，为Web服务器控 件，在页面上显示“姓名”两个汉字。 v(二)常用属性 ID属性：用于惟一标识该控件，默认值为类名Label之后 加上“1”、“2”等。可以在其属性窗口修改这个属性值。如将 Label1修改为LabelName，表示用来显示姓名。ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编14Text属性: 设置控件显示在页面上的文本内容，上面的 HTML标记中的“姓名”就是Text属性值。Text属性值的类型为 string，默认值与控件类型名相同。设置或获取Text属性的 C#语法如下： Object.Text=字符串; /给Text属性赋值 或者： 字符串变量= Object.Text; /获取Text属性 其中Object表示当前控件的名字。例如： Label1.Text=”姓名”； /使在控件上显示“姓名”二字 或者：string name=Label1.Text; /将控件的文本赋给一个 变量name 三、Label控件 （2/4）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编15BorderStyle属性: 设置控件的边框风格。默认值为 NotSet，无边框。可以设置为Solid(实线框)等。 BorderColor属性：设置控件的边框颜色。默认值为 Black，黑色。 BackColor属性: 设置控件的背景颜色。默认值为White， 白色。 ForeColor属性: 设置控件的文本颜色。默认值为Black， 黑色 Font属性：设置控件的字体。属性窗口的属性列表中， Font属性名前有一个“+”标记，单击它可以展开其子项，包括 Name(字体名称)、Size（大小）、Bold(是否粗体)、Italic（是 否斜体）、Overline(是否带上划线)、Underline(是否带下划线 )、Strikeout(是否带删除线)等。 三、Label控件 （3/4）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编16Enabled属性：设置控件是否可用。当值为true时（默认 ），在浏览器中可用，呈指定的色彩显示；当值为false时，呈 灰色显示，表示不可用。 Visible属性：设置控件是否可见。当值为true时（默认） ，在浏览器中可见，否则不可见。 ToolTip属性：设置当鼠标放在控件上时显示的工具提示 信息。这个属性对于以图像方式显示的控件特别有效，有时用 户可能不清楚某个控件的功用，当鼠标移动到其上时，看了工 具提示信息自然明白。 上述的属性中，有很多属性是大多数控件都有的。若之后 的控件也具有这些属性时就不再重复说明了。 (三)事件 Label控件也有一些事件，一般很少为Label控件编写事件 处理程序。 三、Label控件 （4/4）ASP.NETASP.NET程序设计程序设计 李德奇主编李德奇主编17四、TextBox控件（1/5） TextBox控件称为文本框，主要用来接受用户的输入， 当然也可以用于输出信息。 v(一)HTML标记 标记了一个TextBox控件，ID属性为TextBox1，为Web 服务器控件，没有默认的文本。 v(二)常用属性 Text属性: 设置或获取文本框的文本内容。当用来接受 用户的输入时，需要获取该属性值为程序代