1、WEBWEB应用开发应用开发单元单元3 3：WebWeb服务器控件服务器控件任务3：web应用程序的界面设计(1)主要内容用户登录页面的设计用户登录页面的设计1用户注册页面的设计2用户注册信息的验证3学习目标掌握web服务器控件的使用方法能够设计web控件的属性能够编写web控件的事件程序能够使用验证控件验证表单输入的数据概述 提供的web服务器控件能实现会员登录、注册页面等具有人机交互的界面，通过设置控件的属性实现不同的外观、编写控件的事件代码实现用户需求的功能。web应用程序是B/S工作模式，用户通过浏览器访问web服务器上的应用程序共享信息。提供了一系列服务器控件。Web服务器控件功能全
2、面，极大地简化和方便了开发人员的工作。1.HTMLHTML标签标签都是静态的,服务器端的C#代码无法得到这些元素，也不能动态地为这些元素添加或修改属性。2.服务器控件服务器控件就是页面上能够被服务器端代码访问和操作的任何控件，它们都具有runat=“server”属性，id属性是服务器端代码的访问操作控件的唯一标识。ASP.NET服务器控件都是页面上的对象，采用事件驱动的编程模型，控件的事件处理发生在服务器而不是客户端，事件的处理需要进行客户端与服务器端的往返，因此，在某些情况下会影响性能。一、html控件与web服务器控件3.在ASP.NET中，Web控件是使用相应的标记来编写控件的。Web
3、控件的标记有特定的格式：当客户端请求该控件所在.aspx页面时，服务器返回给客户端的代码为：4.使用Web控件，程序员不用详细了解HTML元素就可以设计页面。在Visual Studio中，程序员可以把Web控件拖拽到页面上来设计页面。一、html控件与web服务器控件（续）5.将hmtl控件当成服务器端的控件使用如：html标记文本框 加上属性:runat=server 它就可以当成服务器端 的控件使用了 一、html控件与web服务器控件二、WEB服务器控件固有控件：与一些简单的 HTML 元素相对应的控件 Button、Label、LinkButton、ImageButton 验证控件：
4、验证用户输入的控件 RequiredFieldValidator、RegularExpressionValidator Rich 控件：提供更加丰富的用户界面的控件 Calendar、AdRotator 列表绑定控件：显示数据列表 DataList、GridView 导航控件 Menu、TreeView.登录系列控件等 .二、WEB服务器控件（续）1.1.TextBoxTextBox控件控件 属性名称说 明Text获取或设置 TextBox 控件中的数据TextMode SingleLineSingleLine单行，生成普通的文本框单行，生成普通的文本框MultiLineMultiLine多行
5、，生成多行，生成标签标签PasswordPassword密码，生成密码输入框，文本为密码，生成密码输入框，文本为ReadOnly 只读MaxLengthMaxLength设置文本输入框中最多允许的字符数AutoPostBack 设置为 True 时，当用户更改内容后离开控件时，导致控件触发 TextChanged事件 AutoPostBack默认情况下设置为 False.作用：建立单行文本输入框、密码输入、多行文本输入，通过TextMode属性来区别三种输入模式。实例3-1.将文本框TextBox1中输入信息，显示在页面上(1)页面设计：在页面上添加一个TextBox1(2)利用文本框的Tex
6、tChanged事件,双击TextBox1控件，编写CS代码protected void TextBox1_TextChanged(object sender,EventArgs e)Response.Write(TextBox1.Text);(3)运行：在文本框中任意输入文本信息回车后，观察结果。(4)运行时在文本框中输入信息后，将鼠标离开TextBox1,观察结果。(5)将TextBox1的AutoPostBack设置为true,观察结果 (AutoPostBack=true时，焦点离开该文本框控件时自动提交)2.Label2.Label控件控件 属 性说 明Text在页面上显示信息作用：
7、在页面上显示文本。可以显示静态的信息，也可以在运行时通过代码动态的修改文本信息。实例3-2.在页面上显示当前的日期(1)页面设计：在页面上添加一个标签LblDate(2)编写代码：protected void Page_Load(object sender,EventArgs e)LblDate.Text=System.DateTime.Now.ToShortDateString();（3）浏览运行页面（4）学生练习：显示短时间型和日期时间型二、WEB服务器控件（续）3.Button3.Button控件控件作用：接收用户的click事件，并执行相应的事件程序。4.LinkButton4.Lin
8、kButton控件控件作用：同Button控件，只是外观上类似超级链接。5.ImageButton5.ImageButton控件控件作用：基本功能同Button控件，只是在按钮上不仅可以显示一副图片，还可以获取图片的点击位置。.NET.NET中默认单击按钮后信息是被提交到本页面进行处中默认单击按钮后信息是被提交到本页面进行处理的，通过理的，通过PostBackUrlPostBackUrl可以改变表单提交的目标页可以改变表单提交的目标页.二、WEB服务器控件（续）6.Image6.Image控件控件属性名称属性名称说明说明ImageUrl显示图像的UrlAlternateText图像不显示时的替
9、代文字ImageAlign图像相对于页面其他元素的对齐二、WEB服务器控件（续）作用：显示图片三、任务1 设计与实现会员登录功能：假设登录名为”abc”,密码为”123”。当用户输入正确时，单击“登录”，提示“登录成功”，否则提示“登录名或密码错误”；单击“注册”时，可以跳转到注册页面。（1）页面设计，在站点下新建两个页面Login.aspx和Register.aspxl Login.aspx页面设计如下：控件名称ID相关属性设置TextBoxtxtNameTextBoxtxtPwdTextMode=passwrodButtonbtnLoginText=“登录”LinkButtonlbtnRe
10、gisterText=“注册”lRegister.aspx页面添加一行文本信息，标识它是注册页面(2)编写代码 protected void btnLogin_Click(object sender,EventArgs e)if(txtName.Text=abc&txtPwd.Text=123)Response.Write(alert(登录成功!);else Response.Write(alert(登录名或密码错误！);protected void lbtnReigster_Click(object sender,EventArgs e)Response.Redirect(/Register
11、.aspx);(3)浏览页面，并观察结果(4)说明：ImagButton的用法与Button类似，只是多设置一个ImageUrl属性7.HyperLink7.HyperLink控件控件作用：在页面实现超链接，以文本或图片的形式呈现超链接。属性名称属性名称说明说明Text链接的文本标签Target 链接的目标窗口或框架。可能的值为 _top、_self、_parent、_search 或 _blankNavigateURL 单击链接时所链接到的页面的 URLImageURL 用来指定要进行链接的图片Url，若和Text属性同时存在，则ImageUrl优先,Text显示为标签的alt属性注意：注意
12、：LinkBottonLinkBotton与与HyperLinkHyperLink的区别：的区别：LinkButton:LinkButton:提交本页表单提交本页表单 HyperLink:HyperLink:直接导致网页的跳转直接导致网页的跳转练习1：将任务1中的注册改成HyperLink来实现三、任务1（续）补充内容:html控件转化成服务器端的控件使用的方法案例3:将文本框中输入的内容显示在页面(1)页面设计：在页面增加一个html标记的text，和一个web服务器控件Button，id为btnGetText(2)将文本转化为服务器端的控件(3)编写代码：单击按钮，在页面显示文本框中输入的内容。protected void btnGetText_Click(object sender,EventArgs e)Response.Write(Text1.Value);四、小结 了解了HTML控件与WEB服务器控件的使用区别 学习了几个基本控件的使用方法 学习了事件处理的模式 巩固了页面运行的机制Thank you
