【文档说明】基于ASP-NET的Web应用开发单元3web服务器控件课件.ppt，共(21)页，1.844 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-45218.html

以下为本文档部分文字说明：

WEB应用开发单元3：Web服务器控件任务3：web应用程序的界面设计(1)主要内容用户登录页面的设计1用户注册页面的设计2用户注册信息的验证3'LOGO'COMPANYLOGOTYPEINSERT学习目标•掌握web服务器控件的使用方法•

能够设计web控件的属性•能够编写web控件的事件程序•能够使用验证控件验证表单输入的数据'LOGO'COMPANYLOGOTYPEINSERT概述asp.net提供的web服务器控件能实现会员登录、注册页面等具有

人机交互的界面，通过设置控件的属性实现不同的外观、编写控件的事件代码实现用户需求的功能。web应用程序是B/S工作模式，用户通过浏览器访问web服务器上的应用程序共享信息。asp.net提供了一系列服务器控件。Web服务器控件功能全面，极大地简化和方便了开发人员的工作。1.HT

ML标签都是静态的,服务器端的C#代码无法得到这些元素，也不能动态地为这些元素添加或修改属性。2.服务器控件就是页面上能够被服务器端代码访问和操作的任何控件，它们都具有runat=“server”属性，id属性是服务器端代码的访问操作控件的

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

控件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服务器控件（续）5.将hmtl控件当成服务器端的控件使用如：html标记文本框<inputid="Text1"type="text"/>加上属性:runat="server"它就可以当成服务器端的控

件使用了<inputid="Text1"type="text"runat="server"/>一、html控件与web服务器控件二、WEB服务器控件➢固有控件：与一些简单的HTML元素相对应的控件Button、Label、LinkButton、ImageButton…➢验证控件：验证用户输入的控

件RequiredFieldValidator、RegularExpressionValidator…➢Rich控件：提供更加丰富的用户界面的控件Calendar、AdRotator…➢列表绑定控件：显示数据列表DataList、GridView…➢导航控件Menu、TreeView...

➢登录系列控件等.........二、WEB服务器控件（续）1.TextBox控件属性名称说明Text获取或设置TextBox控件中的数据TextModeSingleLine单行，生成普通的文本框MultiLine多行，生成<t

extarea>标签Password密码，生成密码输入框，文本为●ReadOnly只读MaxLength设置文本输入框中最多允许的字符数AutoPostBack设置为True时，当用户更改内容后离开控件时，导

致控件触发TextChanged事件AutoPostBack默认情况下设置为False.作用：建立单行文本输入框、密码输入、多行文本输入，通过TextMode属性来区别三种输入模式。实例3-1.将文本框TextBo

x1中输入信息，显示在页面上(1)页面设计：在页面上添加一个TextBox1(2)利用文本框的TextChanged事件,双击TextBox1控件，编写CS代码protectedvoidTextBox1_TextChanged(objectsender,EventArgse){Respo

nse.Write(TextBox1.Text);}(3)运行：在文本框中任意输入文本信息回车后，观察结果。(4)运行时在文本框中输入信息后，将鼠标离开TextBox1,观察结果。(5)将TextBox1的AutoPostBack设置为true,观察结果(AutoPostBac

k=true时，焦点离开该文本框控件时自动提交)2.Label控件属性说明Text在页面上显示信息作用：在页面上显示文本。可以显示静态的信息，也可以在运行时通过代码动态的修改文本信息。实例3-2.在页面上显示当前的日期(1)页面设计

：在页面上添加一个标签LblDate(2)编写代码：protectedvoidPage_Load(objectsender,EventArgse){LblDate.Text=System.DateTime.Now.ToShortDateString();}（3）浏览运行页面（4）学生练习：显示

短时间型和日期时间型二、WEB服务器控件（续）3.Button控件作用：接收用户的click事件，并执行相应的事件程序。4.LinkButton控件作用：同Button控件，只是外观上类似超级链接。5.ImageButton控件作用：基本

功能同Button控件，只是在按钮上不仅可以显示一副图片，还可以获取图片的点击位置。.NET中默认单击按钮后信息是被提交到本页面进行处理的，通过PostBackUrl可以改变表单提交的目标页.二、WEB服务器控件（续）6.Image控

件属性名称说明ImageUrl显示图像的UrlAlternateText图像不显示时的替代文字ImageAlign图像相对于页面其他元素的对齐二、WEB服务器控件（续）作用：显示图片三、任务1设计与实现会员登录功

能：假设登录名为”abc”,密码为”123”。当用户输入正确时，单击“登录”，提示“登录成功”，否则提示“登录名或密码错误”；单击“注册”时，可以跳转到注册页面。（1）页面设计，在站点下新建两个页面Login.aspx和Register.aspx⚫Login.aspx页面设计如下：

控件名称ID相关属性设置TextBoxtxtNameTextBoxtxtPwdTextMode=passwrodButtonbtnLoginText=“登录”LinkButtonlbtnRegister

Text=“注册”⚫Register.aspx页面添加一行文本信息，标识它是注册页面(2)编写代码protectedvoidbtnLogin_Click(objectsender,EventArgse){if(txtName.Text=="abc"&&txtPwd.Text=="123"

)Response.Write("<script>alert('登录成功!')</script>");elseResponse.Write("<script>alert('登录名或密码错误！')</script>");}protectedv

oidlbtnReigster_Click(objectsender,EventArgse){Response.Redirect("~/Register.aspx");}(3)浏览页面，并观察结果(4)说明：I

magButton的用法与Button类似，只是多设置一个ImageUrl属性7.HyperLink控件作用：在页面实现超链接，以文本或图片的形式呈现超链接。属性名称说明Text链接的文本标签Target链接的目标窗口或

框架。可能的值为_top、_self、_parent、_search或_blankNavigateURL单击链接时所链接到的页面的URLImageURL用来指定要进行链接的图片Url，若和Text属性同时存在，则ImageUrl优先,Text显示为<img>标签的alt属

性注意：LinkBotton与HyperLink的区别：LinkButton:提交本页表单HyperLink:直接导致网页的跳转练习1：将任务1中的注册改成HyperLink来实现三、任务1（续）补充内容:html控

件转化成服务器端的控件使用的方法案例3:将文本框中输入的内容显示在页面(1)页面设计：在页面增加一个html标记的text，和一个web服务器控件Button，id为btnGetText(2)将文本转化为服务器端的控件(3

)编写代码：单击按钮，在页面显示文本框中输入的内容。protectedvoidbtnGetText_Click(objectsender,EventArgse){Response.Write(Text1.Value);}四、小结•了解了HTML控件与WEB服务器控件的使用区别•学习了几个基本控

件的使用方法•学习了事件处理的模式•巩固了asp.net页面运行的机制Thankyou