第四章Web控件使用学习内容从本章开始,将介绍用ASP.NET开发Web数据库应用的一些常用控件。控件本质上是具有图形接口的组件,它能提供组件所提供的功能并提供用户交互。本章主要介绍HTML服务器控件、Web服务器控件、Web服务器验证控件和服务器控件绑定。学习目标了解:Web控件的基本概念和分类;了解:主要的服务器验证控件;应用:能够创建简单的Web控件;应用:能够将Web控件添加到Web窗体。一、Web服务器控件ASP.NET服务器控件是在服务器端运行并封装用户界面及其他相关功能的组件,主要包括HTML服务器控件和Web服务器控件。这些控件在服务器端存在,并会在初始化时,根据客户端的浏览器版本,自动生成适合浏览器的HTML代码。二、HTML控件HTML是超文本链接标记语言英文缩写。我们平时所说的网页就由HTML组成。网页上提供的输入框、选择框等,就是HTML控件。为了与HTML服务器控件区分,我们将这种控件称为传统的HTML控件。传统的HTML控件只需经过简单的改变就可以成为HTML服务器控件,从而提供服务器控件的强大功能。二、HTML控件(一)从一个实例开始案例4-1简单的ASP.NET页1、创建一个新项目打开VisualStudio.NET,然后,新建一个项目,项目类型选择[Visual]Basic项目],模板选择[ASP.NETWeb应用程序]。2、添加代码在打开该项目后,选择WebForm1.aspx的HTML视图。输入如下代码:3、按[F5]运行!doctypehtmlpublic“-//w3c/dtdhtml4.01transitional//en”“”scriptlanguage=“vb”runat=“server”Privatesubaspcn_onclick(byvalsenderassystem.object,byvaleassystem.eventargs)If(page.ispostback)thenlabel1.text=select1.value.tostringendifEndsub/scripthtmlheadmetahttp-equiv=“content_type”content=“text/html;charset=gb2312”titleselect演示程序/title/headbodyformid=“form1”method=“post”runat=“server”p请选择您想购买的产品:/ppselectid=“select1”name=“select1”runat=“server”optionselected《手机》/optionoption《黑客帝国》/optionoption《双雄》/optionoption《黑白森林》/optionoption《无间道》/option/select/ppasp:buttontext=“提交”onclick=“aspcn_onclick”runat=“server”id=“button2”/p/pp/pp/pp您选取的是:asp:labelid=“label1”runat=“server”width=“96px”text=“暂无”/asp:label/p/form/body/html二、HTML控件在该实例中,主要操作的是aspcn_onclick子程序,而这个程序是由名为button2的button控件激发的。程序的主要作用,就是通过label1.text=select1.value.tostring将我们在select1中选择的选项值赋给label控件label1。二、HTML控件(二)HTML服务器控件的概念HTML服务器控件是HTML元素,这些元素包含使其自身在服务器上可见并可编程的属性。任意HTML元素都可以通过添加RUNAT=“SERVER”属性转换为HTML服务器控件。二、HTML控件(三)HTML服务器控件的类别和使用HTML服务器控件是在原有的HTML标记的基础上,加上runat=“server”属性后编程的服务器控件,并都是从System.Web.UI.HtmlControl直接或间接派生来的,运行在服务器上,并直接映射到受大多数浏览器支持的标准HTML标记。其层次关系如图4-2所示。P41HTML服务器控件的详细使用说明如表4-1所示。P42三、Web服务器控件(一)Web服务器控件的层次Web服务器控件不只包含窗体类型的控件,例如按钮和文本框,还包括提供在网格中显示数据等常用窗体功能的控件,甚至一些特殊用途的控件,例如日历。Web服务器控件是ASP.NET内置的服务器端控件。大多数Web服务器控件从基类System.Web.UI.WebControls.WebControl派生的,其层次结构如图4-3所示。P43三、Web服务器控件(二)基本Web服务器控件1.Literal控件Literal控件无需添加任何HTML元素即可将静态文本呈现在Web页上。并可以通过服务器代码以编程方式静态控制文本。与下面讲到的LabelWeb服务器控件不同,Literal控件不将任何HTML元素添加到文本上。LiteralWeb服务器控件的语法结构为:asp:Literalid=“Literal1”Text=“”runat=“server”/三、Web服务器控件(二)基本Web服务器控件2.Label控件Label控件用于在页面中显示只读的静态文本或数据绑定的文本。通常当希望在运行时更改页面中的文本(比如响应按钮单击)时使用Label控件。可以在设计是从设计器中,或者在运行时从程序中设置Label控件的文本。asp:Labelrunat=“server”Text=“”/asp:label三、Web服务器控件(二)基本Web服务器控件3.TextBox控件TextBox控件为用户提供了一种向Web窗体页中键入信息的方法。我们可以使用多种方式(单行文本、多行文本,以星号(*)屏蔽的密码格式)来配置TextBoxWeb服务器控件。asp:TextBoxrunat=“server”Text=“TextBox1”/asp:TextBox三、Web服务器控件案例4-2使用基本的Web服务器控件步骤1、创建一个新项目打开VisualStudio.NET,然后,新建一个项目,项目类型选择[Visual]Basic项目],模板选择[ASP.NETWeb应用程序]。步骤2、添加代码在打开该项目后,选择WebForm1.aspx的HTML视图。输入如下代码:步骤3、按[F5]运行后,在文本框输入“河北省宁晋县”,按[TAB]键,就会得到如图4-4的效果。P45!doctypehtmlpublic“-//w3c/dtdhtml4.0transitional//en”htmlscriptlanguage=“vb”runat=“server”Privatesubtextbox1_textchanged(byvalsenderassystem.object,byvaleassystem.eventargs)lbl1.text=textbox1.textEndsub/scriptheadtitle使用基本的Web服务器控件/title/headbodyformrunat=“server”method=“post”id=“form1”b籍贯:/basp:textboxid=“textbox1”autopostback=“true”maxlength=“24”ontextchanged=“textbox1_textchanged”runat=“server”/pb您的籍贯为:/basp:labelid=“lbl1”runat=“server”width=“96px”/asp:labelbrbrbrasp:literalid=“literal1”text=“欢迎使用中华人民共和国户籍管理系统”runat=“server”//form/body/html三、Web服务器控件(二)基本Web服务器控件4.Image控件ImageWeb服务器控件用于在Web窗体页上显示图像,并使用自己的代码管理这些图像。其语法结构为:asp:imagerunat=“server”ImageUrl=“net.gif”/asp:image注意:与大多数其它Web服务器控件不同,Image控件不支持任何事件。例如,它对点击鼠标不作相应。三、Web服务器控件(三)按钮类控件1、HyperLInk控件HyperLinkWeb服务器控件提供了一种使用服务器代码在Web页上创建和操作连接的方法,使用户可以在应用程序中在页之间移动。其语法结构:asp:HyperLinkrunat=“server”Text=“”NavigateUrl=“**.aspx”/asp:HyperLink注意:与大多数Web服务器控件不同,当用户单击HyperLink控件时并不会在服务器代码中引发事件,只执行导航。三、Web服务器控件2.Button控件ButtonWeb服务器控件有三种类型:标准命令按钮(Button控件)、超级链接样式按钮(LinkButton控件)和图形化按钮(ImageButton控件)。使用说明参看表4-2三、Web服务器控件控件说明ButtonWeb服务器控件标准的命令按钮,呈现为一个HTML提交按钮LInkButtonWeb服务器控件呈现为页面中的一个超级链接;但它包含使窗体被发回服务器的客户端脚本ImageButtonWeb服务器控件将图形指定为按钮,提供丰富的按钮外观,根据用户在图形中单击的位置实现图像映射三、Web服务器控件其语法结构分别为:asp:Buttonrunat=“server”text=“”/asp:Buttonasp:LinkButtonrunat=“server”text=“”/asp:Buttonasp:ImageButtonrunat=“server”ImageUrl=“a.gif”/asp:Button三、Web服务器控件(四)列表类控件1.DropDownList控件用于创建下拉列表框。它不支持多重选择模式。其语法结构为:asp:DropDownListrunat=“server”asp:listitemtext=“choice1”value=“1”selected=“true”/asp:listitemtext=“choice2”value=“2”//asp:DropDownList三、Web服务器控件(四)列表类控件2.ListBox控件用于创建允许单项或多项选择的列表框服务器控件。其语法结构为:asp:ListBoxrunat=“server”selectmode=“multiple”asp:listitemtext=“choice1”value=“1”selected=“true”/asp:listitemtext=“choice2”value=“2”//asp:listbox三、Web服务器控件(五)选择类控件1.CheckBox和CheckBoxListWeb服务器控件CheckBox控件用于往Web页面中添加复选框。而CheckBoxList控件则是单一控件,可作为复选框列表项集合的父控件。使用单个CheckBox控件,可以更好地控制页面上复选框的布局,也可以单独控制复选框的字体和颜色。而如果想用数据库中的数据创建一系列复选框,则CheckBoxList控件是较好的选择。三、Web服务器控件(五)选择类控件asp