服务器控件

第4章服务器控件4.1服务器控件概述4.2HTML服务器控件4.3Web服务器控件4.4本章小结4.1服务器控件概述4.1.1服务器控件分类ASP.NET的Server控制组件分为两种：HTML控制组件和Web控制组件。4.1.2服务器控件属性、事件和方法服务器控件是ASP.NET的特定对象，每一个控件都具有特定的属性、事件和方法4.1.3服务器控件层次结构ASP.NET服务器控件是从System.Web.UI.Control直接或间接派生的。ASP.NET服务器控件的主要作用是提供用户界面。服务器控件层次结构如图所示。4.2HTML服务器控件4.2.1HTML服务器控件的层次结构HTML服务器控件的主要功能是在Web页面上管理控件。图显示了HTML服务器控件的层次结构。HTML服务器控件提供以下功能：l可在服务器上使用熟悉的面向对象技术对其进行编程的对象模型。l提供一组事件，可以为其编写事件处理程序，方法与在基于客户端的窗体中大致相同，所不同的是事件处理是在服务器代码中完成的。l在客户端脚本中处理事件的能力。l自动维护控件状态。4.2HTML服务器控件l与验证控件进行交互，便于验证用户是否在控件输入了适当的信息。l数据绑定到一个或多个控件属性l直接可用的自定义属性。4.2.2HTML控件的基本语法HTML控件的基本语法：HTML标记Id=“控件名称”Runat=“Server”4.2.3HTML控件详解1.HTML服务器控件的共同属性几个共同的属性：(1)Innerhtml(2)InnerText(3)Disable(4)Visible(5)Value(6)Attributes(7)Style。2.HtmlAnchor控件HtmlAnchor控件的主要属性和事件如下：(1)Href属性：用来获取或设置在HtmlAnchor服务器控件中指定的链接的URL目标。(2)Title属性：用来获取或设置当鼠标指针放在HtmlAnchor控件上所显示的工具提示文本。(3)Name属性：获取或设置HtmlAnchor服务器控件中定义的书签名。(4)Target属性：获取或设置要将Web页内容加载到的目标窗口或框架。4.2HTML服务器控件(5)OnServerClick方法：用于指定在单击HtmlAnchor控件时引发的处理程序。例如：AId=HtmlAnchor1Href=aa.aspx'单击HtmlAnchor1时链接到的aa.aspxOnServerClick=AnchorBtn_Click'单击HtmlAnchor1时执行AnchorBtn_Click事件Ttarget=_blank'aa.aspx内容呈现在新的、不带框的窗口中Title=在新窗口中打开aa.aspx'当鼠标指针放在HtmlAnchor1上时显示Runat=Server/A3.HtmlInputButton控件HtmlInputButton控件的主要属性和事件如下：(1)Type属性：用来获取HtmlInputControl的类型。表列出了Type属性的各种不同可能值及其含义。(2)Value属性：用来设置按钮上的显示的文本内容。(3)OnServerClick方法：该事件当在Web页上单击HtmlInputButton控件时发生的处理程序。4.2HTML服务器控件【例4.1】使用HtmlAnchor和HtmlButton控件实现超链接及单击按钮的响应。设计步骤如下：(1)在VS.NET中创建项目WebExamp4_1。(2)设计项目主页面WebForm1.aspx，包含5个Html服务器控件，分别是：2个HtmlAnchor控件、1个Text控件和2个HtmlButton控件。当单击2个HtmlAnchor控件时，分别转到“新浪”和“搜狐”网站，单击HtmlButton控件时，在Text控件中显示相关信息。各控件的属性设置见下表。(3)在WebForm1.aspx界面的空白处双击，进入程序编辑窗口，在Page_load()事件处理中输入以下程序代码：PrivateSubPage_Load(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesMyBase.Load'设置Anchor1和Anchor2的各项属性值Anchor1.InnerHtml=单击进入新浪网Anchor1.HRef==新浪Anchor2.InnerHtml=单击进入搜狐网，并在新窗口中打开Anchor2.HRef==_blank'打开新窗口Anchor2.Title=搜狐EndSublButton1_Click()事件处理中输入以下程序代码：PrivateSubButton1_Click(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesButton1.Click'设置当按下Button1时在Text1上显示的内容Text1.Value=您单击了按钮1EndSubl在Button2_Click()事件处理中输入以下程序代码：PrivateSubButton2_Click(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesButton2.Click'设置当按下Button2时在Text1上显示的内容Text1.Value=您单击了按钮2EndSub(4)编译执行程序，运行结果如图所示。4.2HTML服务器控件(a)程序运行初始界面(b)单击Anchor1时进入新浪网站(c)单击Anchor2时进入搜狐网站4.2HTML服务器控件4.HtmlInputImage控件HtmlInputImage控件主要属性和事件如下：(1)Align属性(2)Alt属性(3)Src属性(4)OnServerClick方法5.HtmlInputText控件HtmlInputText控件的主要属性和事件如下：(1)Size属性(2)MaxLength属性(3)Value属性(4)Type属性(5)ServerChange事件(6)OnServerChange方法6.HtmlTextArea控件HtmlInputText控件在控件工具箱中的图标为。文本框的尺寸由Cols和Rows属性控制。7.HtmlImage控件HtmlImage控件的主要属性如下：(1)Align属性：各种可能的取值及其说明见表。(2)Src属性(3)Alt属性(4)Border属性(5)Height属性(6)Width属性4.2HTML服务器控件【例4.2】使用HtmlImage、HtmlInputText和HtmlInputButton控件实现以下功能：验证用户的输入是否正确。如果用户输入的用户名或密码错误，显示错误信息，并显示一张哭丧的脸；如果用户输入的用户名或密码正确，则显示欢迎信息，并显示一张欢笑的脸。设计步骤如下：(1)在VS.NET中创建项目WebExamp4_2(2)设计项目主页面WebForm1.aspx,各控件的主要属性设置见表。(3)双击Submit1按钮，在Submit1_ServerClick()事件处理中输入以下程序代码：PrivateSubSubmit1_ServerClick(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesSubmit1.ServerClickIfname.Value=guestAndpassword.Value=123456Then'正确的用户名为guest，密码为123456message.InnerHtml=“恭喜你，欢迎使用本系统”IMG1.Src=c:smile.bmp'设置IMG1的图像源为c:smile.bmpIMG1.Alt=“笑脸”'若图像不可用，在IMG1中显示笑脸Elsemessage.InnerHtml=用户名或密码错误，请重新输入IMG1.Src=c:cry.bmpIMG1.Alt=哭脸EndIfEndSub在Reset1_ServerClick()事件处理中输入以下程序代码：4.2HTML服务器控件PrivateSubReset1_ServerClick(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesReset1.ServerClick控件的属性设置‘用户名和密码置空name.Value=password.Value=EndSub(4)编译、运行程序。程序的运行结果见图。用户名或密码不正确时的显示界面4.2HTML服务器控件8.HtmlInputCheckBox控件HtmlInputCheckBox控件的主要属性和事件如下：(1)Checked属性(2)OnServerChange方法9.HtmlInputRadioButton控件HtmlInputRadioButton控件的主要属性和事件如下：(1)Checked属性(2)Name属性(3)Value属性(4)ServerChange事件(5)OnServerChange方法10.HtmlSelect控件该控件的主要属性和事件如下：(1)Multiple属性(2)Size属性(3)SelectedIndex属性(4)Items属性(5)Value属性(6)DataSource属性(7)DataValueField属性(8)DataTextField属性(9)OnServerChange方法11.其他HTML服务器控件其他HTML服务器控件对应的HTML元素及用途见右表。4.3Web服务器控件4.3.1Web服务器控件的层次结构图4.7显示了System.Web.UI.WebControls名称空间中控件的层次结构。图4.7Web服务器控件的层次结构4.3.2Web服务器控件基本语法Web服务器控件的基本语法：ASP:控件Id=“控件名称”Runat=“Server”属性1=“属性设置值1”属性2=“属性设置值2”……/ASP:控件或者ASP:控件Id=“控件名称”Runat=“Server”/属性1=“属性设置值1”属性2=“属性设置值2”……/4.3Web服务器控件4.3.3Web服务器控件详解1.Button控件Button控件的使用语法：ASP:Button属性设置/ASP:Button或者ASP:Button属性设置/Button控件主要属性和事件如下：(1)Enabled属性(2)Text属性(3)ToolTip属性(4)CommandName属性(5)CommandArgument属性(6)OnClick事件2.HyperLink控件HyperLink控件的使用语法：ASP:Hyperlink属性设置/ASP:Hyperlink或者ASP:Hyperlink属性设置/HyperLink控件的主要属性如下：(1)Text属性(2)ImageUrl属性(3)NavigateUrl属性(4)Target属性4.3Web服务器控件3.LinkButton控件LinkButton控件的使用语法：ASP:LinkButton属性设置/ASP:LinkButton或者ASP:LinkButton属性设置/LinkButton控件的主要属性和事件如下:(1)Text属性(2)Enabled属性(3)ToolTip属性(4)CommandName属性(5)CommandArgument属性(6)Command事件4.ImageButton控件ImageButton控件使用语法：ASP:ImageButton属性设置/ASP:ImageButton或者AS