基于ASP-NET的Web应用开发单元3web服务器控件课件

WEB应用开发

单元3：Web服务器控件任务3：web应用程序的界面设计(1)WEB应用开发

单元3：Web服务器控件任务3：web应用程主要内容用户登录页面的设计1用户注册页面的设计2用户注册信息的验证3主要内容用户登录页面的设计1用户注册页面的设计2用户注册信息学习目标掌握web服务器控件的使用方法能够设计web控件的属性能够编写web控件的事件程序能够使用验证控件验证表单输入的数据学习目标掌握web服务器控件的使用方法概述提供的web服务器控件能实现会员登录、注册页面等具有人机交互的界面，通过设置控件的属性实现不同的外观、编写控件的事件代码实现用户需求的功能。web应用程序是B/S工作模式，用户通过浏览器访问web服务器上的应用程序共享信息。提供了一系列服务器控件。Web服务器控件功能全面，极大地简化和方便了开发人员的工作。概述提供的web服务器控件能实现会员登1.HTML标签都是静态的,服务器端的C#代码无法得到这些元素，也不能动态地为这些元素添加或修改属性。2.服务器控件就是页面上能够被服务器端代码访问和操作的任何控件，它们都具有runat=“server”属性，id属性是服务器端代码的访问操作控件的唯一标识。

ASP.NET服务器控件都是页面上的对象，采用事件驱动的编程模型，控件的事件处理发生在服务器而不是客户端，事件的处理需要进行客户端与服务器端的往返，因此，在某些情况下会影响性能。一、html控件与web服务器控件1.HTML标签都是静态的,服务器端的C#代码无法得到这些3.在ASP.NET中，Web控件是使用相应的标记来编写控件的。Web控件的标记有特定的格式：

<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>

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

<inputname="TextBox1"type="text"id="TextBox1"/>

4.使用Web控件，程序员不用详细了解HTML元素就可以设计页面。在VisualStudio中，程序员可以把Web控件拖拽到页面上来设计页面。

一、html控件与web服务器控件（续）3.在ASP.NET中，Web控件是使用相应的标记来编写控件5.将hmtl控件当成服务器端的控件使用如：html标记文本框

<inputid="Text1"type="text"/>加上属性:runat="server"

它就可以当成服务器端的控件使用了

<inputid="Text1"type="text"runat="server"/>一、html控件与web服务器控件5.将hmtl控件当成服务器端的控件使用一、html控件与w二、WEB服务器控件

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

Button、Label、LinkButton、ImageButton…

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

RequiredFieldValidator、RegularExpressionValidator…Rich控件：提供更加丰富的用户界面的控件

Calendar、AdRotator…

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

DataList、GridView…

导航控件

Menu、TreeView...

登录系列控件等

二、WEB服务器控件

固有控件：与一些简单的HTML元素二、WEB服务器控件（续）TextBox控件

属性名称说明Text获取或设置TextBox控件中的数据TextModeSingleLine单行，生成普通的文本框MultiLine多行，生成<textarea>标签Password密码，生成密码输入框，文本为●ReadOnly只读MaxLength设置文本输入框中最多允许的字符数AutoPostBack设置为True时，当用户更改内容后离开控件时，导致控件触发TextChanged事件AutoPostBack默认情况下设置为False.作用：建立单行文本输入框、密码输入、多行文本输入，通过TextMode属性来区别三种输入模式。二、WEB服务器控件（续）TextBox控件实例3-1.将文本框TextBox1中输入信息，显示在页面上(1)页面设计：在页面上添加一个TextBox1(2)利用文本框的TextChanged事件,双击TextBox1控件，编写CS代码protectedvoidTextBox1_TextChanged(objectsender,EventArgse){Response.Write(TextBox1.Text);}(3)运行：在文本框中任意输入文本信息回车后，观察结果。(4)运行时在文本框中输入信息后，将鼠标离开TextBox1,观察结果。(5)将TextBox1的AutoPostBack设置为true,观察结果

(AutoPostBack=true时，焦点离开该文本框控件时自动提交)实例3-1.将文本框TextBox1中输入信息，显示在页面上2.Label控件

属性说明Text在页面上显示信息作用：在页面上显示文本。可以显示静态的信息，也可以在运行时通过代码动态的修改文本信息。实例3-2.在页面上显示当前的日期(1)页面设计：在页面上添加一个标签LblDate(2)编写代码：protectedvoidPage_Load(objectsender,EventArgse){LblDate.Text=System.DateTime.Now.ToShortDateString();}（3）浏览运行页面（4）学生练习：显示短时间型和日期时间型二、WEB服务器控件（续）2.Label控件属性说明Text在页面上显示信息作用基于ASP-NET的Web应用开发单元3web服务器控件课件3.Button控件作用：接收用户的click事件，并执行相应的事件程序。4.LinkButton控件作用：同Button控件，只是外观上类似超级链接。5.ImageButton控件作用：基本功能同Button控件，只是在按钮上不仅可以显示一副图片，还可以获取图片的点击位置。.NET中默认单击按钮后信息是被提交到本页面进行处理的，通过PostBackUrl可以改变表单提交的目标页.二、WEB服务器控件（续）3.Button控件.NET中默认单击按钮后信息是被提交到本6.Image控件属性名称说明ImageUrl显示图像的UrlAlternateText图像不显示时的替代文字ImageAlign图像相对于页面其他元素的对齐二、WEB服务器控件（续）作用：显示图片6.Image控件属性名称说明ImageUrl显示图像的Ur三、任务1设计与实现会员登录功能：假设登录名为”abc”,密码为”123”。当用户输入正确时，单击“登录”，提示“登录成功”，否则提示“登录名或密码错误”；单击“注册”时，可以跳转到注册页面。三、任务1设计与实现会员登录功能：（1）页面设计，在站点下新建两个页面Login.aspx和Register.aspx

Login.aspx页面设计如下：控件名称ID相关属性设置TextBoxtxtNameTextBoxtxtPwdTextMode=passwrodButtonbtnLoginText=“登录”LinkButtonlbtnRegisterText=“注册”Register.aspx页面添加一行文本信息，标识它是注册页面（1）页面设计，在站点下新建两个页面Login.aspx和R(2)编写代码

protectedvoidbtnLogin_Click(objectsender,EventArgse){if(txtName.Text=="abc"&&txtPwd.Text=="123")Response.Write("<script>alert('登录成功!')</script>");elseResponse.Write("<script>alert('登录名或密码错误！')</script>");}protectedvoidlbtnReigster_Click(objectsender,EventArgse){Response.Redirect("~/Register.aspx");}(3)浏览页面，并观察结果(4)说明：ImagButton的用法与Button类似，只是多设置一个ImageUrl属性(2)编写代码(4)说明：ImagButton的用法与But7.HyperLink控件作用：在页面实现超链接，以文本或图片的形式呈现超链接。

属性名称说明Text链接的文本标签Target链接的目标窗口或框架。可能的值为_top、_self、_parent、_search或_blankNavigateURL单击链接时所链接到的页面的URLImageURL用来指定要进行链接的图片Url，若和Text属性同时存在，则ImageUrl优先,Text显示为<img>标签的alt属性注意：LinkBotton与HyperLink的区别：LinkButton:提交本页表单HyperLink:直接导致网页的跳转练习1：将任务1中的注册改成HyperLink来实现三、任务1（续）7.HyperLink控件属性名称说明Text链接的文本标补充内容:html控件转化成服务器端的控件使用的方法案例3:将文本框中输入的内容显示在页面(1)页面设计：在页面增加一个html标记的text，和一个web服务器控件Button，id为btnGetText(2)将文本转化为服务器端的控件(3)编写代码：单击按钮，在页面显示文本框中输入的内容。protectedvoidbtnGetText