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