基于ASP NET的Web应用开发情境三任务2会员登录页面设计

《WEB应用开发》课程教案

主要教学内容

1.任务2

任务描述：设计与实现会员登录功能。

假设登录名为”abc”,密码为”123”。当用户输入正确时，单击“登录”，提示“登录成功”，否则提示“登录名或密码错误”；单击“注册”时，可以跳转到注册页面,运行界面如下图。

2.基本知识与技能

2.1 html控件与web服务器控件概述

2.1.1 HTML标签的特点

HTML标签是静态的, 服务器端的C#代码无法得到这些元素，也不能动态地为这些元素添加或修改属性。

2.1.2 web服务器控件的特点

web服务器控件就是页面上能够被服务器端代码访问和操作的任何控件，它们都具有runat=“server”属性，id属性是服务器端代码的访问操作控件的唯一标识。

服务器控件都是页面上的对象，采用事件驱动的编程模型，控件的事件处理发生在服务器而不是客户端，事件的处理需要进行客户端与服务器端的往返，因此，在某些情况下会影响性能。

2.1.3 Web控件的书写格式

在中，Web控件是使用相应的标记来编写控件的。Web控件的标记有特定的格式：

当客户端请求该控件所在.aspx页面时，服务器返回给客户端的代码为：

2.1.4 使用Web控件对程序员的要求

使用Web控件，程序员不用详细了解HTML元素就可以设计页面。在Visual Studio中，

程序员可以把Web控件拖拽到页面上来设计页面。

2.1.5将hmtl控件当成服务器端的控件使用

如：html标记文本框

加上属性:runat= " server " 它就可以当成服务器端的控件使用了

2.2服务器控件的介绍

Web服务器控件的类别有：

固有控件：与一些简单的 HTML 元素相对应的控件

如：Button、Label、LinkButton、ImageButton…

验证控件：验证用户输入的控件

如： RequiredFieldValidator、RegularExpressionValidator…

Rich 控件：提供更加丰富的用户界面的控件

如： Calendar、AdRotator…

列表绑定控件：显示数据列表

如： DataList、GridView…

导航控件

如：Menu、TreeView...

登录系列控件等

.........

2.3 web服务器控件的使用

2.3.1 TextBox控件

(1)作用

建立单行文本输入框、密码输入、多行文本输入，通过TextMode属性来区别三种输入模式。

(2)常用属性的介绍

Text: 获取或设置 TextBox 控件中的数据

TextMode: 获取或设置文本的行为模式

ReadOnly:是否可以更改文本框中的文本

MaxLength：设置文本输入框中最多允许的字符数

AutoPostBack：设置为 True 时，当用户更改内容后离开控件时，导致控件触发TextChanged事件， AutoPostBack默认情况下设置为 False.

以上属性边演示边讲解,学生同步操作

(3)案例1

将文本框TextBox1中输入信息，显示在页面上

页面设计：在页面上添加一个TextBox1

利用文本框的TextChanged事件

protected void TextBox1_TextChanged(object sender, EventArgs e)

{

Response.Write(TextBox1.Text);

}

运行：在文本框中任意输入文本信息回车后，观察结果。

运行时在文本框中输入信息后，将鼠标离开TextBox1,观察结果。

将TextBox1的AutoPostBack设置为true,观察结果

(AutoPostBack=true时，焦点离开该文本框控件时自动提交)

(4)学生同步练习

将文本框TextBox1中输入信息，显示在页面上

教案辅导并答疑

2.3.2 Label控件

(1)作用

在页面上显示文本。可以显示静态的信息，也可以在运行时通过代码动态的修改文本信息。

(2)常用属性的介绍

Text属性：在页面上显示信息

(3)实例2.在页面上显示当前的日期

页面设计：在页面上添加一个标签LblDate

编写代码：

protected void Page_Load(object sender, EventArgs e)

{

LblDate.Text = System.DateTime.Now.ToShortDateString();

}

浏览运行页面

学生同步练习：在页面上显示当前的日期。

学生练习：显示短时间型和日期时间型

2.3.3 Button控件

作用：接收用户的click事件，并执行相应的事件程序。