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

,*,Click To Edit Title Style,*,*,Click To Edit Title Style,Click To Edit Title Style,*,LOGO,COMPANY LOGOTYPE INSERT,Click To Edit Title Style,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,控件的标记有特定的格式：,当客户端请求该控件所在,.aspx,页面时，服务器返回给客户端的代码为：,4.,使用,Web,控件，程序员不用详细了解,HTML,元素就可以设计页面。在,Visual Studio,中，程序员可以把,Web,控件拖拽到页面上来设计页面。,一、,html,控件与,web,服务器控件（续）,3.在ASP.NET中，Web控件是使用相应的标记来编写控件,5.,将,hmtl,控件当成服务器端的控件使用,如：,html,标记文本框,加上属性,: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,控件中的数据,TextMode,SingleLine,单行，生成普通的文本框,MultiLine,多行，生成,标签,Password,密码，生成密码输入框，文本为,ReadOnly,只读,MaxLength,设置文本输入框中最多允许的字符数,AutoPostBack,设置为,True,时，当用户更改内容后离开控件时，导致控件触发,TextChanged,事件,AutoPostBack,默认情况下设置为,False.,作用：建立单行文本输入框、密码输入、多行文本输入，通过,TextMode,属性来区别三种输入模式,。,二、WEB服务器控件（续）TextBox控件,实例,3-1.,将文本框,TextBox1,中输入信息，显示在页面上,(1),页面设计：在页面上添加一个,TextBox1,(2),利用文本框的,TextChanged,事件,双击,TextBox1,控件，编写,CS,代码,protected void TextBox1_TextChanged(object sender,EventArgs e),Response.Write(TextBox1.Text);,(3),运行：在文本框中任意输入文本信息回车后，观察结果。,(4),运行时在文本框中输入信息后，将鼠标离开,TextBox1,观察结果。,(5),将,TextBox1,的,AutoPostBack,设置为,true,观察结果,(AutoPostBack=true,时，焦点离开该文本框控件时自动提交,),实例3-1.将文本框TextBox1中输入信息，显示在页面上,2.Label,控件,属 性,说 明,Text,在页面上显示信息,作用：在页面上显示文本。可以显示静态的信息，也可以在运行时通过代码动态的修改文本信息。,实例,3-2.,在页面上显示当前的日期,(1),页面设计：在页面上添加一个标签,LblDate,(2),编写代码：,protected void Page_Load(object sender,EventArgs e),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,显示图像的,Url,AlternateText,图像不显示时的替代文字,ImageAlign,图像相对于页面其他元素的对齐,二、,WEB,服务器控件（续）,作用：显示图片,6.Image控件属性名称说明ImageUrl显示图像的Ur,三、任务,1,设计与实现会员登录功能：,假设登录名为,”abc”,密码为,”123”,。当用户输入正确时，单击“登录”，提示“登录成功”，否则提示“登录名或密码错误”；单击“注册”时，可以跳转到注册页面。,三、任务1 设计与实现会员登录功能：,（,1,）页面设计，在站点下新建两个页面,Login.aspx,和,Register.aspx,Login.aspx,页面设计如下：,控件名称,ID,相关属性设置,TextBox,txtName,TextBox,txtPwd,TextMode=passwrod,Button,btnLogin,Text=“,登录”,LinkButton,lbtnRegister,Text=“,注册”,Register.aspx,页面添加一行文本信息，标识它是注册页面,（1）页面设计，在站点下新建两个页面Login.aspx和R,(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.aspx);,(3),浏览页面，并观察结果,(4),说明：,ImagButton,的用法与,Button,类似，只是多设置一个,ImageUrl,属性,(2)编写代码(4)说明：ImagButton的用法与But,7.HyperLink,控件,作用：在页面实现超链接，以文本或图片的形式呈现超链接,。,属性名称,说明,Text,链接的文本标签,Target,链接的目标窗口或框架。可能的值为,_top,、,_self,、,_parent,、,_search,或,_blank,NavigateURL,单击链接时所链接到的页面的,URL,ImageURL,用来指定要进行链接的图片,Url,，若和,Text,属性同时存在，则,ImageUrl,优先,Text,显示为,标签的,alt,属性,注意：,LinkBotton,与,HyperLink,的区别：,LinkButton:,提交本页表单,HyperLink:,直接导致网页的跳转,练习,1,：将任务,1,中的注册改成,HyperLink,来实现,三、任务,1,（续）,7.HyperLink控件属性名称说明Text链接的文本标,补充内容,:html,控件转化成服务器端的控件使用的方法,案例,3:,将文本框中输入的内容显示在页面,(1),页面设计：在页面增加一个,html,标记的,text,，和一个,web,服务器控件,Button,，,id,为,btnGetText,(2),将文本转化为服务器端的控件,(3),编写代码：单击按钮，在页面显示文本框中输入的内容。,protected void btnGetText_Click(object sender,EventArgs e),Response.Write(Text1.Value);,补充内容:html控件转化成服务器端的控件使用的方法案例3:,四、小结,了解了,HTML,控件与,WEB,服务器控件的使用区别,学习了几个基本控件的使用方法,学习了事件处理的模式,巩固了,页面运行的机制,四、小结了解了HTML控件与WEB服务器控件的使用区别,Thank you,Thank you,