教学材料《Web应用开发》-第五章

5.1服务器控件简介服务器控件是一种服务器端组件，它封装了用户界面及其相关的功能。ASP.NET服务器控件直接或间接地从System.Web.UI.Control类派生来的。ASP.NET服务器控件包括Web服务器控件、HTML服务器控件、验证控件和用户控件等。ASP.NET服务器控件的语法特点是包含runat="server"属性。下一页返回5.1服务器控件简介5.1.1服务器控件分类本章主要介绍ASP.NET提供的以下4种类型的服务器控件。1.HTML服务器控件HTML服务器控件是拥有能够让服务器访问，以及能够在服务器上进行编写属性的HTML元素。页面上的任何HTML元素都会被转换成HTML服务器控件，转换是一个简单的过程，至少要转换一个HTML元素为有着附加属性runat="server"的控件，如果想要在代码中引用控件，应该给它指定一个ID属性。上一页下一页返回5.1服务器控件简介2.Web服务器控件Web服务器控件是一系列与HTML控件设计所不同的控件，它是有着复杂行为的控件。它们不单单是一对一映射HTML服务器控件的，Web服务器控件包括传统的窗体控件，如按钮和文本框等控件，也包括复杂的控件，如表格、日历和菜单控件等。上一页下一页返回5.1服务器控件简介3.验证控件在Web应用程序中，大多是对数据的收集、维护和查询，这样一来对数据的有效性验证就非常重要，验证就是检查数据是否符合一系列规则。ASP.NET不仅把窗体的验证作为服务器控件引入，还使这些控件智能化，如果浏览器支持JavaScript，验证就在客户端进行；如果客户机不支持用于验证的JavaScript，这些JavaScript就被忽略，验证就应在服务器上进行。上一页下一页返回5.1服务器控件简介4.用户控件除了上述提供的控件外，在程序开发过程中，还可以使用自己定义和封装好的控件，这种控件称为用户控件。比如各个Web系统都有好多登录模块，可以利用标签、文本框、命令按钮等控件封装成一个登录控件，需要使用的时候只要添加这个用户控件就可以了，这样增加了程序的重用性，为程序开发节约了时间。上一页下一页返回5.1服务器控件简介5.1.2添加服务器控件添加上述服务器控件到窗体页面中可以通过拖放和代码编程两种方式实现。1.利用拖放方式添加控件利用拖放的方式将服务器控件添加到Web窗体中是最简单也是开发效率最高的一种方法，如图5-1所示，向Default.aspx窗体中拖放添加一个Button控件。上一页下一页返回5.1服务器控件简介下面介绍利用拖放方式添加服务器控件的操作步骤。①如图5-1所示，将设计器切换到“设计”视图模式下。②在工具箱找到要添加的Button控件，一般情况下工具箱隐藏在左上角，为了操作方便，这里将工具箱取消隐藏，如图5-1所示。③单击选中Button控件，并按住鼠标左键不放，拖动鼠标到需要放置控件的地方松开鼠标，这时就将Button控件添加到窗体的合适位置上了。上一页下一页返回5.1服务器控件简介2.利用代码编程方式添加控件编程开发人员经常采用自行编写代码的方式将服务器控件添加到Web窗体中，如图5-2所示，利用编写代码的方式向窗体中添加Button控件。上一页下一页返回5.1服务器控件简介利用代码编程方式添加服务器控件的操作步骤有以下几点。①如图5-2所示，将设计器调整到“源”视图模式下。②在<form></form>之间编写代码，代码格式要符合该控件的语法格式要求，下面是添加Button控件的代码：<asp:ButtonID="myButton“runat="server“Text=“

提交

"/>

上一页下一页返回5.1服务器控件简介③当切换到“设计”视图或运行该窗体的时候就会发现窗体中添加了一个Button控件。还可以在程序运行的时候通过事先编写的代码动态地生成一些服务器控件，但需要将服务器控件添加到一些容器中，如用Panel或Placeholder控件可作为容器，关于利用容器动态添加控件的具体例子参照5.6.8Placeholder控件一节中的例5-43。上一页下一页返回5.1服务器控件简介5.1.3设置服务器控件属性服务器控件的外观和功能的实现基本上都是通过设置控件的属性来完成的，每种控件都有一套自己的属性。属性的设置和修改可以通过两种方式实现：利用控件的属性窗口设置属性和利用代码编程的方式设置属性。1.利用属性窗口设置控件属性MicrosoftVisualStudio2005是一个非常优秀的、可视化的集成开发工具，通过其提供的一些集成工具能帮助简化程序开发的难度，提高程序开发的速度。服务器控件的属上一页下一页返回5.1服务器控件简介性可以利用集成的“属性”窗口来设置，利用“属性”窗口能够简单、快速设置控件的所有属性。该种方法是程序开发人员，更是初学ASP.NET学员易于掌握和乐于采用的一种常用的设置控件属性的方法，“属性”窗口如图5-3所示。下面介绍利用“属性”窗口设置属性的步骤。①在“设计”视图模式下选中要设置属性的控件。②正常情况下，“属性”窗口在设计窗口的右下角，如果“属性”窗口被关闭，可以采用以下两种方法打开属性窗口：第一上一页下一页返回5.1服务器控件简介种方法是，选中要设置的控件后，右击，在弹出的快捷菜单中选择“属性”命令；另一种方法是，选中要设置的控件后，选择“视图”子菜单中的“属性窗口”命令，也能打开该控件的“属性”窗口。③“属性”窗口中的属性可以按照“分类顺序”和“字符顺序”排列，如图5-3和图5-4所示，即是两种不同排列的设置TextBox1控件的属性窗口，可以根据自己的习惯选择不同的排列模式。上一页下一页返回5.1服务器控件简介④在“属性”窗口中选择要设置的属性，在其右侧中输入或选择该属性的属性值。对于有些不熟悉的属性可以参考“属性”窗口下面的提示，如图5-3所示，选中TextBox1控件的TextMode属性时，下面就显示该属性的功能“文本框的行为模式”，这样有助于对不熟悉属性的设置。上一页下一页返回5.1服务器控件简介2.利用代码方式设置控件属性也可以在“源”视图下通过直接编写代码的方式来设置控件的一些属性，下面的代码是通过代码的方式设置Textbox控件的背景颜色、边框颜色、高度和宽度等属性。<asp:TextboxID="TextBox1"//控件IDrunat="server"//设置服务器控件上一页下一页返回5.1服务器控件简介BackColor="Cyan"//设置Textbox控件的背景颜色为CyanBorderColor="Red"//设置Textbox控件的边框为RedHeight="20px"//设置Textbox控件的高Width="120px">//设置Textbox控件的宽</asp:TextBox>上一页下一页返回5.1服务器控件简介除了在设计器中利用代码的方式添加控件的属性，还可以在程序运行的时候通过代码设置或修改服务器控件的属性实现，利用这种方法能够动态地控制服务器控件的一些属性。实现上面设置Textbox控件的属性，可以编写如下的代码来实现：usingSystem.Drawing;//添加System.Drawing命名控件上一页下一页返回5.1服务器控件简介publicpartialclassDefault3:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){上一页下一页返回5.1服务器控件简介TextBox1.BackColor=Color.Cyan;//设置背景颜色TextBox1.BorderColor=Color.Red;//设置边框颜色TextBox1.Height=20;//设置控件高度TextBox1.Width=120;//设置控件宽度}}上一页下一页返回5.1服务器控件简介注：在编写GDI+应用程序的时候，用到的大部分的类都包含在System.Drawing命名空间内，其中有很多类是用来代表图像、画刷、画笔和字体的。上一页下一页返回5.1服务器控件简介5.1.4服务器控件的事件ASP.NET不是使用解释性的代码，而是使用基于事件驱动的。服务器控件属性无法实现的特殊功能，可以对其一些事件进行编程实现，当其事件被触发时，就执行事先编写的代码。ASP.NET编程中对于窗体来说最常见的事件是Page_Load，其框架结构如下所示：上一页下一页返回5.1服务器控件简介protectedvoidPage_Load(objectsender,EventArgse){//编写功能代码}上一页下一页返回5.1服务器控件简介对于一些命令按钮控件来说，最常见的事件是Click，其框架结构如下所示：protectedvoidButton1_Click(objectsender,EventArgse){//编写功能代码}上一页下一页返回5.1服务器控件简介那么如何编写服务器控件的这些事件？有以下两种方式可以实现。第一种方式：当编写的控件事件是最常用的事件时，可以在窗体的“设计”视图中双击要创建服务器端事件的控件，自动创建该事件的结构。例如，双击Button服务器控件，就会在代码编辑窗口中创建Button控件最常用的Click事件的结构。上一页下一页返回5.1服务器控件简介另一种方法：当要编写的控件事件不是该控件最常用的事件时，可以利用“属性”窗口来创建，如图5-5所示，在“属性”窗口的“事件”标签下选择要创建的事件，在其右侧的列表框中双击鼠标左键，就会在其程序文件中自动创建该事件结构。上一页下一页返回5.1服务器控件简介例如，DropDownList控件最常用的事件是SelectedIndexChanged事件，所以要是双击该控件的话，创建的就是SelectedIndexChanged事件。如果想创建TextChanged事件的话，就不能用鼠标双击该控件，应该在“属性”窗口的“事件”标签下，选中要创建的事件，在其右侧的列表框中双击鼠标左键，就会自动在其后台代码文件中创建DropDownList1_TextChanged事件的框架结构，如下所示：上一页下一页返回5.1服务器控件简介protectedvoidDropDownList1_TextChanged(objectsender,EventArgse){//编写相应事件代码}每种控件都有一些自己的事件，在这里就不一一赘述了，在讲解相应控件的时候会穿插介绍。上一页返回5.2HTML服务器控件5.2.1HTML服务器简介HTML服务器控件主要是考虑到与以前基于HTML代码编写的程序兼容性而保留的一组控件，所有的这些HTML服务器控件都是从System.Web.UI.HtmlControls这个基类继承而来的，但是每种控件又有各自的特点。Web窗体中添加的HTML控件都是静态的HTML元素，要想将其转换成HTML服务器控件，只需要修改其属性runat="server"即可。下一页返回5.2HTML服务器控件由于每个服务器控件都需要耗费服务器端的资源，如果控件中提交的数据不需要在服务器端进行处理的话，没有必要将其设为服务器控件，可以将其作为静态HTM元素在客户端用JavaScript或VBScript语言处理，这样不但节省服务器端资源，还能提高运行效率。HTML服务器控件主要具有以下功能。①可在服务器上使用熟悉的面向对象技术对其进行编程的对象模型，每个服务器控件都公开一些属性，可以使用这些属性在服务器代码中以编程方式来操作该控件的标记属性。上一页下一页返回5.2HTML服务器控件②提供一组事件，可以为其编写事件处理程序，方法与在基于客户端的窗体中大致相同，所不同的是事件处理是在服务器代码中完成的。③自动维护控件状态，在网页到服务器的往返过程中，将自动对用户在HTML服务器控件中输入的值进行维护并发送回浏览器。④与ASP.NET验证控件进行交互，因此可以验证用户是否已在控件中输入了适当的信息。上一页下一页返回5.2HTML服务器控件⑤数据可以绑定到一个或多个控件属性。由于所有的HTML服务器控件都是从System.Web.UI.HtmlControls这个基类继承而来的,虽然各个控件都有各自不同的特点和功能，但是大多数控件之间都有一些相同的属性，见表5-1。上一页下一页返回5.2HTML服务器控件5.2.2常用HTML服务器控件简介ASP.NET2.0中共提供了15个HTML控件，本节主要介绍其中常用的12个控件，见表5-2。下面对上述控件分别进行简单介绍。1.Input（Text）控件和Input（Password）控件Input（Text）控件和Input（Password）控件是HtmlInputText类的两个实例。上一页下一页返回5.2HTML服务器控件当type="text"时，为标准的文本框控件；当type=“password”时，则为密码文本框，输入的文本会用“*”号代替。在很多网站的登录界面中都用到了这两种控件，两种控件的语法格式如下：<inputid="TextID“type="text“runat="server"/><inputid="PasswordID“type="password“runat="server"/>上一页下一页返回5.2HTML服务器控件Input（Text）控件和Input（Password）控件常用的属性见表5-3。［例5-1］下面用一个示例介绍两种控件的使用方法。（1）启动VisualStudio.NET2005，创建名为Chapter5项目。上一页下一页返回5.2HTML服务器控件

（2）在该项目下创建一个名为HTML-InputText.aspx的窗体文件，并向该窗体中添加一个Input（Text）和一个名为

HTML-InputText.aspx的窗体文件，并向该窗体中添加一个Input(Text)

和一个

Input(Password)，并将两控件的

runat

属性设为

“server”。（3）通过代码修改两控件的MaxLength属性，代码如下：protectedvoidPage_Load(objectsender,EventArgse)上一页下一页返回5.2HTML服务器控件{Text1.MaxLength=20;//设置文本框允许输入最大字符数Password1.MaxLength=20;//设置密码文本框允许输入最大字符数}上一页下一页返回5.2HTML服务器控件（4）按F5键运行，如图5-6所示。程序说明：当输入文本的长度达到MaxLength设置的数值时，则终止继续向控件输入文本，这样能保证数据的完整性。2.Input（Button）控件、Input（Reset）控件和Input（Submit）控件上一页下一页返回5.2HTML服务器控件Input（Button）控件、Input（Reset）控件和Input（Submit）控件是HtmlInputButton类的三个实例。在HTML中，当type="button"、type="submit"、type="reset"时，分别用来建立命令按钮、提交（submit）按钮和重置（reset）按钮。当设置runat="server"时，三个按钮控件就成为服务器控件，下面是三种控件的语法格式。Input（Button）控件命令格式：上一页下一页返回5.2HTML服务器控件

<inputid="ButtonID"type="button“value=

"button“runat="server"/>Input(Reset)

控件命令格式：

<inputid="ResetID"type="reset“value=

"reset“runat="server"/>Input（Submit）

控件命令格式：上一页下一页返回5.2HTML服务器控件<inputid="SubmitID“type="submit“value="submit“runat="server"/>Input（Button）控件、Input（Reset）控件和Input（Submit）控件的常用属性见表5-4。［例5-2］下面用一个示例介绍此类控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-Button.aspx的窗体文件，并向该窗体中添加上一页下一页返回5.2HTML服务器控件

一个Input（Text）控件、一个Input（Password）控件、一个Input（Button）控件和一个Input（Reset）。将四个控件的runat属性设为“server”，将Input（Button）控件的Value属性改为“登录”，将Input（Reset）控件的Value属性改为“重填”，再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，并将其Text属性默认值删除。上一页下一页返回5.2HTML服务器控件（2）对“登录”按钮编写如下代码：protectedvoidButton1_ServerClick(objectsender,EventArgse){Label1.Text="您输入的用户名是：";//给Label控件Text属性赋值Label1.Text+=Text1.Value+"<br>";//追加赋值上一页下一页返回5.2HTML服务器控件Label1.Text+="您输入的密码是：";//追加赋值Label1.Text+=Password1.Value+"<br>";//追加赋值}（3）按F5键运行，单击“重填”按钮，会将输错的用户名和密码清空，当单击“登录”按钮，会把输入的用户名和密码显示在页面上，如图5-7所示。上一页下一页返回5.2HTML服务器控件3.Input（File）控件Input（File）控件是HtmlInputFile类的一个实例，该控件能够实现将客户端文件上传到服务器端，该控件的语法如下所示：

<inputid="FileID“type="file“runat="server"/>上一页下一页返回5.2HTML服务器控件Input（File）控件常用的属性见表5-5。［例5-3］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-InputFile.aspx的窗体文件，并向该窗体中添加一个Input（File）控件和一个Input（Button）控件。将两个控件的runat属性设为“server”将Input（Button）控件的Value属性改为“上传”。再向窗体中上一页下一页返回5.2HTML服务器控件

添加一个Label控件，用于显示提交的用户名和密码信息，并将其Text属性默认值删除。（2）对“上传”按钮编写如下代码：protectedvoidButton1_ServerClick(objectsender,EventArgse){if(File1.PostedFile.ContentType!="application/msword")上一页下一页返回5.2HTML服务器控件

//判断上传的文件类型Label1.Text="您要上传的不是Word文档！";elseLabel1.Text="您要上传的文档是："+File1.PostedFile.FileName;}上一页下一页返回5.2HTML服务器控件（3）按F5键运行，单击“浏览”按钮，选择要上传的文件后单击“上传”按钮，当选择的不是Word文档时就会报错，如果选择的是Word文档，则显示Word文档的路径和文档名，如图5-8所示。程序说明：①File1.PostedFile.ContentType，可以获得要上传文件的文件类型；上一页下一页返回5.2HTML服务器控件②application/msword，Word文档类型；③File1.PostedFile.FileName，可以获得要上传文件的路径和文件名。4.Input（Checkbox）控件Input（Checkbox）控件是HtmlInputCheckBox类的一个实例。复选框和复选框之间是相互独立的，用户可以同时选中多个复选框。用Checked属性来标识该控件是否被选中，当复选框被选中，该值为True，否则为False。上一页下一页返回5.2HTML服务器控件在实际应用中，该控件经常被用于一些信息调查中的多项选择。该类控件的语法格式如下所示：<inputid=“CheckboxID”type=“checkbox”runat="server"/>Input（Checkbox）控件的常用属性见表5-6。上一页下一页返回5.2HTML服务器控件［例5-4］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-InputCheckBox.aspx的窗体文件，并向该窗体中添加七个Input（CheckBox）控件、一个Input（Button）控件，将八个控件的runat属性设为“server”，将Input（Button）控件的Value属性改为“提交”。再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，并将其Text属性默认值删除。上一页下一页返回5.2HTML服务器控件（2）对“提交”按钮编写如下代码：protectedvoidButton1_ServerClick(objectsender,EventArgse){inti=0;//统计选择喜欢运动的数量Label1.Text="您喜欢的体育运动有：";if(Checkbox1.Checked==true)//选择登山{上一页下一页返回5.2HTML服务器控件Label1.Text+="登山";//Label控件显示内容追加登山i=i+1;//喜欢运动数量增1}if(Checkbox2.Checked==true)//选择游泳{Label1.Text+="游泳";//Label控件显示内容追加游泳上一页下一页返回5.2HTML服务器控件i=i+1;//喜欢运动数量增1}if(Checkbox3.Checked==true)//选择跑步{Label1.Text+="跑步";//Label控件显示内容追加跑步i=i+1;//喜欢运动数量增1}上一页下一页返回5.2HTML服务器控件if(Checkbox4.Checked==true)//选择乒乓球{Label1.Text+="乒乓球";//Label控件显示内容追加乒乓球i=i+1;//喜欢运动数量增1}if(Checkbox5.Checked==true)//选择篮球上一页下一页返回5.2HTML服务器控件{Label1.Text+="篮球";//Label控件显示内容追加篮球i=i+1;//喜欢运动数量增1}if(Checkbox6.Checked==true)//选择足球{Label1.Text+="足球";//Label控件显示内容追加足球上一页下一页返回5.2HTML服务器控件i=i+1;//喜欢运动数量增1}if(Checkbox7.Checked==true)//选择网球{Label1.Text+="网球";//Label控件显示内容追加网球i=i+1;//喜欢运动数量增1}上一页下一页返回5.2HTML服务器控件Label1.Text+=i.ToString()+"项！";//最后将选择的总数量追加输出}（3）按F5键运行，如图5-9所示。5.Input（Radio）控件Input（Radio）控件是HtmlInputRadioButton类的一个实例。在同一个组群中的单选按钮，一次只能选中一个。上一页下一页返回5.2HTML服务器控件

在Input（Radio）控件中，其Name属性具有划分组群的作用，同一组群的单选按钮其Name属性值相同。Input（Radio）控件用Checked属性来判断组群中的哪个单选按钮控件被选中，被选中后该控件的Checked属性为True，否则为False。该控件的语法格式如下所示：上一页下一页返回5.2HTML服务器控件<inputid=“RadioID”type=“radio”runat=“server”name="GroupName"/>Input（Radio）控件的常用属性见表5-7。［例5-5］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-InputRadio.aspx的窗体文件，并向该窗体中添加三个Input（Radio）控件、一个Input（Button）上一页下一页返回5.2HTML服务器控件

控件，将四个控件的runat属性设为“server”，将三个Input（Radio）控件的name属性改为yao，将Input（Button）控件的Value属性改为“提交”。再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，并将其Text属性默认值删除。（2）对“提交”按钮编写如下代码：上一页下一页返回5.2HTML服务器控件protectedvoidSubmit1_ServerClick(objectsender,EventArgse){if(Radio1.Checked==true)//选中“能”单选按钮Label1.Text="您认为姚明“能”拿到总冠军！";if(Radio2.Checked==true)//选中“不能”单选按钮上一页下一页返回5.2HTML服务器控件Label1.Text="您认为姚明“不能”拿到总冠军！";if(Radio3.Checked==true)//选中“不好说”单选按钮Label1.Text="您认为“不好说”！";}（3）按F5键运行，如图5-10所示。程序说明：为了区分页面中多组单选按钮，应将同一组单选按钮的Name属性设置为相同值。上一页下一页返回5.2HTML服务器控件6.TextArea控件TextArea控件是HtmlTextArea类的一个实例。利用该控件能够输入和编辑一段文本，该控件通过Cols和Rows属性控制控件中文本的行数和列数。各种论坛页面中发表个人意见和观点时，广泛使用TextArea控件，TextArea控件的语法格式如下所示：

<textareaid="TextAreaID“runat="server“cols="列数"rows="行数"></textarea>上一页下一页返回5.2HTML服务器控件TextArea控件的常用属性见表5-8。［例5-6］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-TextArea.aspx的窗体文件，并向该窗体中添加三个TextArea控件、一个Input（Button）控件，将两个控件的runat属性设为“server”，将Input（Button）控件的Value属性改为“提交建议”。再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，并将其上一页下一页返回5.2HTML服务器控件Text属性默认值删除。（2）对“提交建议”按钮编写如下代码：protectedvoidButton1_ServerClick(objectsender,EventArgse){Label1.Text="您的建议是：";上一页下一页返回5.2HTML服务器控件

Label1.Text+=TextArea1.Value;//将TextArea控件中的内容添加到Label控件中}（3）按F5键运行，如图5-11所示。7.Select控件Select

控件是HtmlSelect

类的一个实例。

Select控件创建好后，运行的时候，由于选项列表框中的选项都是事先上一页下一页返回5.2HTML服务器控件

添加好的，使用者只需要在列表中选择相应的选项。列表框在一定程度上简化了数据录入，提高了数据录入的速度，给用户带来了极大的方便。Select控件的语法如下所示：<selectId="selectID"//控件IDrunat=“server”//标识为服务器控件Multiple="False|True"//是否一次可以选择多项上一页下一页返回5.2HTML服务器控件DataSourceID="string"//使用的数据源IDDataTextField="string"//数据源中的一个将被显示在下拉列表中的字段OnServerChange="eventName"//选择项发生变化时将被执行的函数名称>上一页下一页返回5.2HTML服务器控件<option>value1</option>//添加列表项内容<option>value2</option>//添加列表项内容……</select>Select控件的常用属性见表5-9。除了在<option>value1</option>中可以添加列表项内容外，还可以在页面运行的时候添加列表框选项内容，有两种命令形式添加选项，格式如下：上一页下一页返回5.2HTML服务器控件①SelectID.Items.Add("选项内容")；②SelectID.Items.Add(newListItem("选项内容"))。Select控件比较适合选项固定，且内容较多的选项组合，如国家、省份、城市、民族、政治面目、车的品牌、车型等，这些都是当今动态网站中常见的。上一页下一页返回5.2HTML服务器控件在网站的开发设计过程中可以将这些固定的内容存储在数据库中，然后在网页中用Select控件绑定数据库中的这些字段，这样一来控件中的选项内容就不需要手工录入，而且只要保证数据库中的内容完整、正确，Select控件中选项的内容的正确性就不用担心。上一页下一页返回5.2HTML服务器控件［例5-7］下面用一个示例介绍Select控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-Select.aspx的窗体文件，并向该窗体中添加一个Select控件和一个Input(Button)控件，将两个控件的runat属性设为“server”，将Input(Button)控件的Value属性改为“提交”。再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，并将其Text属性默认值删除。上一页下一页返回5.2HTML服务器控件（2）对“提交”按钮和“窗体”编写如下代码：protectedvoidPage_Load(objectsender,EventArgse)//对窗体编程{if(!IsPostBack)//是否提交过页面{Select1.Items.Add("北京市");//向Select控件中添加选项上一页下一页返回5.2HTML服务器控件Select1.Items.Add("上海市");//向Select控件中添加选项Select1.Items.Add("天津市");//向Select控件中添加选项Select1.Items.Add("重庆市");//向Select控件中添加选项上一页下一页返回5.2HTML服务器控件Select1.Items.Add("广州市");//向Select控件中添加选项Select1.Items.Add("深圳市");//向Select控件中添加选项Select1.Items.Add("香港");//向Select控件中添加选项Select1.Items.Add("澳门");//向Select控件中添加选项上一页下一页返回5.2HTML服务器控件}}protectedvoidSubmit1_ServerClick(objectsender,EventArgse)//对提交按钮编程上一页下一页返回5.2HTML服务器控件{Label1.Text="您选择来自"+Select1.Value+"！";//显示选择的城市名称}（3）按F5键运行，如图5-12所示。程序说明：上一页下一页返回5.2HTML服务器控件IsPostBack是Page类的一个属性，返回值为一个布尔值，一般在Page_Load事件中使用。当页面是第一次打开时其值为False，若当前页面为一个提交后的页面时其值为True。8.Input（Hidden）控件Input（Hidden）控件是HtmlInputHidden类的一个实例。当页面中的一些数据信息不想用变量、Cookie或者上一页下一页返回5.2HTML服务器控件Session等保存时，可以将这些数据信息暂时存放在Input（Hidden）控件中。与其他控件的区别是，Input（Hidden）控件是将数据以不呈现的方式在页面级保存信息。该控件的语法格式如下所示：

<inputid="HiddenID"type="hidden"runat="server"/>Input（Hidden）控件的常用属性见表5-10。上一页下一页返回5.2HTML服务器控件［例5-8］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-InputHidden.aspx的窗体文件，并向该窗体中添加三个Input（Radio）控件、一个Input（Button）控件，将四个控件的runat属性设为“server”，将三个Input（Radio）控件的name属性改为yao，将Input（Button）控件的Value属性改为“提交”。再向窗体中添加一个Label控件，用于显示提交的用户名和密码信息，上一页下一页返回5.2HTML服务器控件

并将其Text属性默认值删除。（2）对“提交”按钮和“窗体”编写如下代码：protectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack)//是否提交过页面上一页下一页返回5.2HTML服务器控件idden1.Value=DateTime.Now.ToString();//保存系统初始化时间}protectedvoidSubmit1_ServerClick(objectsender,EventArgse){Label1.Text="页面初始化时间："+Hidden1.Value;//Label1显示Hidden中的时间上一页下一页返回5.2HTML服务器控件Label2.Text="刷新后系统时间为"+DateTime.Now.ToString();//显示系统当前时间}（3）按F5键运行，当按刷新页面按钮时，初始化的时间有Hidden控件保存始终保持不变，如图5-13所示。上一页下一页返回5.2HTML服务器控件9.Table控件Table控件用来控制<table>元素，在HTML中，<table>用来建立一个表格。通过Table表格控件可以将整个Web窗体页面划分成不同的功能区，该控件的语法格式如下所示：<tableid="TableID"runat="server"><tr>//代表一行上一页下一页返回5.2HTML服务器控件<td></td>//代表一行中的一个单元格</tr></table>HtmlTable控件的常用属性见表5-11。［例5?9］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为HTML-Table.aspx的窗体文件，并向该窗体中添加上一页下一页返回5.2HTML服务器控件

一个Table控件，删除多余行和列，保留三行两列，将Table控件的runat属性设为“server”。再向Table控件中添加一个Input（Text）控件、一个Input（Password）控件和一个Input（Button）控件来制作一个登录窗口。（2）对窗体编程如下所示：protectedvoidPage_Load(objectsender,EventArgse)上一页下一页返回5.2HTML服务器控件{Table1.Border=1;//设置表格边框宽度Table1.CellPadding=1;//设置单元格边界与其中内容之间的间距Table1.CellSpacing=1;//设置单元格之间的间距}（3）该窗体的HTML源代码如下所示：上一页下一页返回5.2HTML服务器控件<htmlxmlns="/1999/xhtml"><headrunat="server"><title>HTML-Table</title></head><body>上一页下一页返回5.2HTML服务器控件<formid="form1"runat="server"><div>HTML-Table控件<br/><tablestyle="width:274px;height:92px"runat="server"id="Table1">//表格开始上一页下一页返回5.2HTML服务器控件<tr>//表格第一行<tdstyle="width:139px;height:28px;">用户名</td>//第一行的第一列<tdstyle="width:257px;height:28px">//第一行的第二列<inputid="Text1"type="text"/>//第二列中插入一个</td>上一页下一页返回5.2HTML服务器控件</tr>//第一行结束<tr>//表格第二行<tdstyle="width:139px">密码</td>//第二行第一列<tdstyle="width:257px">//第二行第二列，插入一个密码文本框上一页下一页返回5.2HTML服务器控件<inputid="Password1"style="width:147px“type="password"/></td></tr>//第二行结束<tr>//表格第三行<tdcolspan="2"align="center"style="height:20px">//合并两个单元格上一页下一页返回5.2HTML服务器控件<inputid="Button1"type="button"value="登陆"style="width:52px"/></td>//在合并后的单元格中添加一个Button命令按钮</tr></table>//表格结束上一页下一页返回5.2HTML服务器控件</div></form></body></html>（4）按F5键运行，如图5-14所示。上一页返回5.3Web服务器标准控件5.3.1

Web服务器控件简介

Web服务器控件直接或间接地从System.Web.UI.Control类继承派生而来的。Web服务器控件比HTML服务器控件更丰富、更抽象。Web服务器控件在ASP.NET页上用asp标记为前缀，例如<asp:Buttonrunat="server"/>。Web服务器控件除了提供HTML服务器控件的功能外，还提供以下功能。①功能丰富的对象模型，该模型具有类型安全编程功能。下一页返回5.3Web服务器标准控件②自动浏览器检测，控件可以检测浏览器的功能并呈现适当的标记。③对于某些控件，可以指定控件的事件是立即发送到服务器，还是先缓存然后在提交该页时引发。④支持主题，可以使用主题为站点中的控件定义一致的外观。⑤可将事件从嵌套控件（例如表中的按钮）传递到容器控件。

上一页下一页返回5.3Web服务器标准控件由于所有的Web服务器控件都是从System.Web.UI.Control这个基类继承而来的，虽然各个控件都有各自不同的特点和功能，但是大多数控件之间都有一些相同的属性，见表5-12。上一页下一页返回5.3Web服务器标准控件5.3.2常用Web服务器控件本节主要介绍Web服务器控件中常用的13种服务器控件，见表5-13。5.3.3Label控件Label控件（标签控件）主要用于向用户提供描述性文本。通过Label控件中显示的信息，用户可以清楚地分清楚各个控件要填写的内容。Label控件中的内容是只读的，但是可以在代码中修改Text属性来修改Label控件显示的内容。上一页下一页返回5.3Web服务器标准控件

Label控件的语法格式为：<asp:LabelID="LabelID"//控件标识名runat="server"//标注为服务器端控件Text="LabelText"//控件显示文本Width="npx"//控件宽度></asp:Label>上一页下一页返回5.3Web服务器标准控件Label控件的常用属性见表5-14。［例5-10］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为label.aspx的窗体文件，向窗体中添加一个Label控件，在Label1的属性窗口中将其Text属性内容清除，将Visible属性改为False。（2）在窗体的Load事件中用命令的方式修改Label控件的相关属性，代码如下：上一页下一页返回5.3Web服务器标准控件usingSystem.Drawing;//添加命名空间publicpartialclasslabel:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){上一页下一页返回5.3Web服务器标准控件Label1.Visible=true;//设置Lable控件Visible属性Label1.BackColor=Color.Yellow;//修改Lable控件的背景颜色Label1.ForeColor=Color.Red;//修改Lable控件的字体颜色Label1.Text="Hello!";//修改Lable控件的显示内容}}上一页下一页返回5.3Web服务器标准控件（3）按F5键运行，如图5-15所示。程序说明：①Text属性控制Label控件中显示的内容；②添加usingSystem.Drawing命名空间为了设置颜色。上一页下一页返回5.3Web服务器标准控件5.3.4Button控件Botton控件功能是将客户端的信息提交给服务器，并针对提交上来的数据执行事先编好的业务逻辑，ASP.NET提供了3种按钮控件：普通Button控件、ImageButton控件、LinkButton控件，这3种控件基本功能相近，但还是有些区别，下面简单介绍这3种控件：1.普通Button控件普通Button控件是网页设计中使用率较高的控件之一，如用户使用各类注册页面注册信息时，当填写好相关信息后上一页下一页返回5.3Web服务器标准控件需要用按钮，将数据发送到服务器端处理。该控件的语法格式如下：<asp:ButtonID="ButtonID"//控件标识名runat="server"//标注为服务器端控件Text="Buttontext"//控件显示文本内容/>上一页下一页返回5.3Web服务器标准控件Button控件的常用属性见表5-15。Button控件在实际运行中基本上都是用单击操作的，所以对于Button控件来说，要想通过单击按钮来实现一些业务功能的话，应该将业务逻辑代码编在Button控件的Click事件中。该事件的代码框架如下所示:protectedvoidButtonID_Click(objectsender,EventArgse)上一页下一页返回5.3Web服务器标准控件{…//业务逻辑代码}［例5-11］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为button.aspx的窗体文件，向窗体中添加一个Label控件和一个Button控件，通过对Button控件编程实现控制Label控件显示内容。上一页下一页返回5.3Web服务器标准控件（2）在Button控件的Click事件中编写代码如下：protectedvoidButton1_Click(objectsender,EventArgse){Label1.Visible=true;//设置Lable控件Visible属性Label1.BackColor=Color.Yellow;//修改Lable控件的背景颜色上一页下一页返回5.3Web服务器标准控件Label1.ForeColor=Color.Red;//修改Lable控件的字体颜色Label1.Text="通过命令按钮修改Label控件中的内容和设置!";//修改Lable控件的内容}（3）按F5键运行，当单击命令按钮时，Label控件中显示事先设置的内容，如图5-16所示。上一页下一页返回5.3Web服务器标准控件2.ImageButton控件ImageButton控件与Button控件的使用方法和功能基本相同，最大的不同在于ImageButton控件是用图片来作为按钮，该控件的语法格式为：<asp:ImageButtonID="ImageButtonID"//控件标识名runat="server"//标注为服务器端控件ImageUrl="ImageUrl"//图片的地址和图片名/>上一页下一页返回5.3Web服务器标准控件ImageButton控件属性见表5-16。［例5-12］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为ImageButton.aspx的窗体文件，向窗体中添加一个ImageButton控件和两个Label控件，当单击ImageButton控件的某个位置的时候，将其X和Y坐标分别显示在两个Label控件中。上一页下一页返回5.3Web服务器标准控件（2）在ImageButton控件的Click事件下编写代码如下：protectedvoidImageButton1_Click(objectsender,ImageClickEventArgse){intx=e.X;//获取X坐标inty=e.Y;//获取Y坐标上一页下一页返回5.3Web服务器标准控件Label1.Text="鼠标点击点的X坐标为："+x.ToString();Label2.Text="鼠标点击点的Y坐标为："+y.ToString();}（3）按F5键运行，当单击图片的任何位置时，两个Label控件中显示鼠标的坐标位置，如图5-17所示。上一页下一页返回5.3Web服务器标准控件3.LinkButton控件LinkButton控件是一个具有超级链接外观和普通按钮功能的控件，它实现的功能与Button控件基本相同。当这个链接被点击的时候，页面就会向服务器端传递信息，并且在服务器端来处理相应的事件。该控件的语法格式为：<asp:LinkButtonID="LinkButton1"//控件标识名runat="server"//标注为服务器端控件上一页下一页返回5.3Web服务器标准控件PostBackUrl="PostBackUrl"//单击按钮时所发所到的URLToolTip="ToolTipText"//当鼠标指针停在控件上时显示的文本/>LinkButton控件属性见表5-17。［例5-13］下面用一个示例介绍该控件的使用方法。上一页下一页返回5.3Web服务器标准控件（1）打开Chapter5项目，在该项目下创建一个名为LinkButton.aspx的窗体文件，向窗体中添加一个LinkButton控件，当单击该控件的时候链接到Button.aspx页面中。（2）LinkButton.aspx页面的源代码如下所示：<%@PageLanguage="C#"AutoEventWireup="true"上一页下一页返回5.3Web服务器标准控件CodeFile="LinkButton.aspx.cs"Inherits="LinkButton"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">上一页下一页返回5.3Web服务器标准控件<headrunat="server"><title>LinkButton控件</title></head><body><formid="form1"runat="server"><div><asp:LinkButtonID="LinkButton1"runat="server"Width="103px"上一页下一页返回5.3Web服务器标准控件PostBackUrl="~/button.aspx"ToolTip="链接到Button.aspx"BorderStyle="Double">Button.aspx</asp:LinkButton></div></form></body></html>上一页下一页返回5.3Web服务器标准控件（3）按F5键运行，当鼠标放到LinkButton控件上的时候显示ToolTip中设置的内容，如图5-18所示。上一页下一页返回5.3Web服务器标准控件5.3.5TextBox控件TextBox控件（文本框控件）主要用于数据的输入，也可用于信息的显示。网络上很多提交信息的页面大多数都用到了TextBox控件，如各个网站的登录模块中输入用户名和密码几乎都用的是TextBox控件。TextBox控件使用语法为：<asp:TextBoxID="TextBoxID"//控件标识名runat="server"//标注为服务器端控件上一页下一页返回5.3Web服务器标准控件<asp:RadioButtonID="RadioButtonID"//控件标识名runat="server"//标注为服务器端控件GroupName="RadioButtonGroup"//指定单选按钮所属的组名Target="Target"//显示链接网页的目标窗口或框架的ID上一页下一页返回5.3Web服务器标准控件<ASP:ImageId="ImageID"//控件标识名Runat="Server"//标注为服务器端控件ImageUrl="ImageUr"//图片地址和图片名AlternateText="AlternateText"//图形没有正常加载时所替代的文字ImageAlign="align"//对齐方式/>上一页下一页返回5.3Web服务器标准控件TextMode="Password"//设置该文本框为密码文本框></asp:TextBox>TextBox控件分为单行文本、密码和多行文本框3种，可以通过TextMode属性进行设置：①当该属性值为SingleLine时，为单行文本框，该值为默认选项；上一页下一页返回5.3Web服务器标准控件②当该属性值为Password时，为密码形式显示，其设置如图5-19所示；③当该属性值为MultiLine时为多行文本框。TextBox控件的常用属性见表5-18。TextBox控件最重要的事件是TextChanged事件，该事件触发的条件是，当TextBox控件中的内容发生改变的时候触发。上一页下一页返回5.3Web服务器标准控件［例5-14］下面用一个示例介绍该控件的使用方法。（1）打开Chapter5项目，在该项目下创建一个名为TextBox.aspx的窗体文件，并向该窗体中添加两个TextBox控件和两个Button控件，制作一个系统登录窗口。（2）通过代码将第二个TextBox控件的TextMode属性改为Password，代码如下：上一页下一页返回5.3Web服务器标准控件protectedvoidPage_Load(objectsender,EventArgse){TextBox2.TextMode=TextBoxMode.Password;//设置密码形式显示模式}（3）按F5键运行，如图5-20所示。上一页下一页返回5.3Web服务器标准控件5.3.6Image控件Imange控件是用来控制在网页上显示图片，通过Image控件能够控制图片显示的位置和格式，更好的美化网页。该控件语法格式如下所示：<ASP:ImageId="ImageID"//控件标识名Runat="Server"//标注为服务器端控件ImageUrl="ImageUr"//图片地址和图片名上一页下一页返回5.3Web服务器标准控件AlternateText="AlternateText"//图形没有正常加载时所替代的文字ImageAlign="align"//对齐方式/>Image控件属性见表5-19。［例5-15］下面用一个示例介绍该控件的使用方法。上一页下一页返回5.3Web服务器标准控件（1）打开Chapter5项目，在该项目下创建一个名为Image.aspx的窗体文件，向窗体中添加一个Image控件，并绑定链接一个图片。（2）Image.aspx页面的源代码如下所示：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Image.aspx.cs"Inherits="Image"%>上一页下一页返回5.3Web服务器标准控件<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">上一页下一页返回5.3Web服务器标准控件<headrunat="server"><title>Image控件</title></head><body><formid="form1"runat="server"><div><asp:ImageID="Image1"runat="server"Height="326px"Width="525px"上一页下一页返回5.3Web服务器标准控件ImageUrl="~/Image/04.jpg"//图片的路径和图片名AlternateText="图像无法正常显示"//无法显示时替代的文本ImageAlign="Left"//对齐方式/></div></form>上一页下一页返回5.3Web服务器标准控件</body></html>（3）按F5键运行，效果图略。程序说明：①ImageUrl指定Image控件显示的图片；②当ImageUrl制定的图片无法正常显示的时候，上一页下一页返回5.3Web服务器标准控件用AlternateText属性设定的值“图像无法正常显示”代替显示。5.3.7HyperLink控件通过HyperLink控件可以在网页上创建链接，通过链接，用户可以在各个网页之间自由转换。HyperLink控件的链接对象可以是文本链接，也可以是图片链接。与大多数ASP.NET控件不同，用户单击HyperLink控件并不会在服上一页下一页返回5.3Web服务器标准控件

务器代码中引发事件，此控件只起到导航的作用。HyperLink控件有以下优点。①HyperLink控件可以在服务器代码中设置链接属性，可以基于网页中的条件动态更改链接文本或目标网页。②HyperLink控件可以使用数据绑定来指定链接的目标URL。该控件的语法格式如下所示：上一页下一页返回5.3Web服务器标准控件<asp:HyperLinkID="HyperLinkID"//控件标识名runat="server"//标注为服务器端控件ImageUrl="ImageUrl"//图片所在地址NavigateUrl="NavigateUrl"//要链接到的网页的URL上一页下一页返回5.3Web服务器标准控件Target="Target"//显示链接网页的目标窗口或框架的IDText="HyperLinkText"//链接显示的文本内容/>HyperLink控件属性见表5-20。［例5-16］下面用一个示例介绍该控件的使用方法。上一页下一页返回5.3Web服务器标准控件（1）打开Chapter5项目，在该项目下创建一个名为HyperLink.aspx的窗体文件，向窗体中添加一个HyperLink控件，并链接一个图片。（2）HyperLink.aspx页面的源代码如下所示：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="HyperLink.aspx.cs"Inherits上一页下一页返回5.3Web服务器标准控件（1）打开Chapter5项目，在该项目下创建一个名为HyperLink.aspx的窗体文件，向窗体中添加一个HyperLink控件，并链接一个图片。（2）HyperLink.aspx页面的源代码如下所示：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="HyperLink.aspx.cs"Inherits上一页下一页返回5.3Web服务器标准控件="HyperLink"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">上一页下一页返回5.3Web服务器标准控件<headrunat="server"><title>HyperLink控件</title></head><body><formid="form1"runat="server"><div><asp:HyperLinkID="HyperLink1"runat="server"Height="1px"Width="243px"上一页下一页返回5.3Web服务器标准控件ImageUrl="~/Image/FH3.JPG"//图片所在地址Navig