第2章 ASP NET常用服务器标准控件1

第2章ASP.NET常用服务器标准控件《ASP.NET数据库网站设计教程（C#版）》配套教学资源本章内容：常用服务器标准控件，Web用户控件，ASP.NET网站中资源的路径。本章重点：Label、TextBox、Button、ImageButton、LinkButton、HyperLink、Image、RadioButton、RadioButtonList、CheckBox、CheckList、ListBox、DropDownList等控件。2.1常用标准控件2.1.1文本输入/输出控件1．Label控件语法格式如下：asp:LabelID=Label1runat=serverText=显示的文本…/asp:Label要更改标签中显示的文字，可修改Text属性，有两种方法。①设计时在Label控件的“属性”窗口中更改Text属性值。在工具箱的“标准”选项卡中，双击Label控件或者将其拖到页面上。在“属性”窗口的“外观”类别中，将该控件的Text属性设置为要显示的文本。可以把Label控件的Text属性设置为任意字符串（包括包含HTML标记的字符串）。例如，将Text属性设置为strongTest/strongbr/，则Label控件将以粗体显示单词“Test”然后换行。②通过编程方法在运行时动态更改显示的文本。注意：如果要显示静态文本，则应使用HTML标记，不要使用Label控件。2．TextBox控件语法格式如下：asp:TextBoxID=TextBox1runat=serverontextchanged=TextBox1_TextChanged…文本框中显示的文本/asp:TextBox【演练2-1】在文本框中输入用户名，然后单击网页中的其他地方或按Enter键后显示刚才输入的用户名，如图2-1所示。①设计页面。新建一个空网站（例如网站“C:\ex2_1”），添加一个Web窗体，窗体名为Default.aspx。切换到设计视图，在Default.aspx中添加一个TextBox控件和一个Label控件到表格中。设计视图如图2-2所示。②设置控件属性。在TextBox1控件的“属性”窗口中，把AutoPostBack属性值改为true。③编写事件过程代码。在页面的设计视图中，选中TextBox1控件，在“属性”窗口中单击“事件”按钮，在事件列表中双击TextChanged事件，如图2-2所示。打开Default.aspx.cs窗口，在TextBox1控件的TextChanged事件过程框架中输入以下代码：protectedvoidTextBox1_TextChanged(objectsender,EventArgse){Label1.Text=输入的用户名是：+TextBox1.Text;}④运行网站。单击“启用调试”按钮，运行当前Web窗体，在文本框中输入用户名，然后单击文本框以外的网页区域，或者按Enter键，显示如图2-1所示。2.1.2按钮控件使用按钮Web服务器控件，用户能够将页发送到服务器中并触发页上的事件。有3种按钮控件，每种按钮控件在网页上显示的方式都不同。1．Button控件语法格式如下：asp:ButtonID=Button1runat=serveronclick=Button1_ClickText=按钮上显示的文本…/【演练2-2】设计一个如图2-3所示的跟帖网页，评论被输入到一个多行文本框中，单击“发评论”按钮后，将显示在前面3个文本框中输入的文本。①设计页面。新建一个空网站，添加一个Web窗体，切换到设计视图，在Default.aspx窗体中添加3个TextBox控件、一个Button控件和一个Label控件，同时添加相关的静态文字，如图2-4所示。②设置控件属性。设置用于输入评论的TextBox1控件的TextMode属性值为MultiLine，Text属性值为空字符串；设置用于输入密码的TextBox3控件的TextMode属性值为Password；设置Button1控件的Text属性值为“发评论(Alt+S)”，AccessKey属性为S，可以按Alt+S快捷键访问；将Label1控件的Text属性的内容清空。③编写事件过程代码。在设计视图中，双击Button1控件，在Button1_Click事件过程框架中输入以下代码：protectedvoidButton1_Click(objectsender,EventArgse){Label1.Text=评论：+TextBox1.Text+br/;Label1.Text=Label1.Text+登录名：+TextBox2.Text+br/;Label1.Text=Label1.Text+密码：+TextBox3.Text;}④运行网站。单击“启用调试”按钮，运行当前Web窗体，在文本框中输入内容，按Alt+S快捷键，显示如图2-3所示。2．ImageButton控件语法格式如下：asp:ImageButtonID=ImageButton1runat=serverImageUrl=图像的URLonclick=ImageButton1_Click…/【演练2-3】网页第一次显示时显示一个初始图像按钮，同时显示一行提示，如图2-5所示。单击该图像按钮后，该图像按钮上显示初始图像后的第一个图像按钮，同时显示一行提示，如图2-6（a）所示；单击图像按钮显示第二个图像按钮，如图2-6（b）所示，即实现单击图像按钮交替显示图2-6（a）、（b）这两张图像。（1）设计页面新建网站，添加Web窗体，切换到设计视图，在Default.aspx中添加一个ImageButton控件和一个Label控件。（2）设置控件属性①右击网站名称，在快捷菜单中单击“新建文件夹”，如图2-7所示，输入文件夹名称“Images”。右击文件夹名称“Images”，在快捷菜单中单击“添加现有项”，如图2-8所示，浏览到“库→图片→公用图片→示例图片”，选中“水母”、“考拉”和“企鹅”图片，把这3张图片添加到“Images”文件夹中。②在设计视图中选中ImageButton1控件，先把图像按钮设置为适当大小，然后右击ImageButton1控件，在快捷菜单中单击“属性”，打开“属性”窗口。在“属性”窗口中单击ImageUrl属性后的浏览按钮，显示“选择图像”对话框，在“Images”文件夹中选择图像按钮上显示的初始图片文件，这里是水母图片。③在设计视图中选中Label1控件，在“属性”窗口中把Text属性值改为“水母，初始图片，单击切换到新图片”。（3）编写事件代码①在解决方案资源管理器中，双击Default.aspx.cs打开其窗口，在所有事件过程外声明窗体级变量，用静态变量保存单击的奇偶次数，代码为“staticboolflag=true;”，如图2-9所示。奇数次单击为true，偶数次单击为false。②创建图像按钮的单击事件，在设计视图中双击该图像按钮ImageButton1控件，打开该图像按钮的单击事件过程ImageButton1_Click框架，输入代码：protectedvoidImageButton1_Click(objectsender,ImageClickEventArgse){if(flag){//奇数次单击显示的图片Label1.Text=考拉，单击图片切换到另外一张;ImageButton1.ImageUrl=~/Images/Koala.jpg;flag=false;}else{//偶数次单击显示的图片Label1.Text=企鹅，单击图片切换到另外一张;ImageButton1.ImageUrl=~/Images/Penguins.jpg;flag=true;}}（4）运行网站运行Web窗体，第一次显示的网页如图2-5所示。单击图像按钮，显示如图2-6所示。3．LinkButton控件语法格式如下：asp:ID=LinkButton1runat=serveronclick=LinkButton1_Click…链接按钮上显示的文本/asp:LinkButton2.1.3超链接控件语法格式如下：asp:HyperLinkID=HyperLink1runat=server…链接上显示的文本/asp:HyperLink与大多数Web服务器控件不同，当用户单击HyperLink控件时并不会在服务器代码中触发事件（此控件没有事件）。此控件只执行导航。使用HyperLink控件的主要优点是可以在服务器代码中设置链接属性。下面的示例使用Button控件的Click事件显示在运行时设置的HyperLink控件的属性，并设置HyperLink控件的链接文本和目标页。在网页窗体中添加一个HyperLink控件和一个Button控件，Button控件的Click事件过程代码如下：protectedvoidButton1_Click(objectsender,System.EventArgse){this.HyperLink1.Text=Home;this.HyperLink1.NavigateUrl=}2.1.4图像控件语法格式如下：asp:ImageID=Image1runat=serverImageUrl=图像文件的URL…/说明：Image控件只显示图像，不支持任何事件。如果需要捕获图像上的鼠标单击事件，则使用ImageButton控件。如果在网页运行时不需要更改图像的属性，最好采用静态图像，直接把图像文件从本网站拖动到页面窗体中，创建的就是静态图像，其语法格式如下：imgalt=替换文本src=图像文件的URLstyle=图像的宽、高样式…/【演练2-4】用Image控件显示图片，单击Button控件切换图片。在演练2-3设计的网站中添加一个Web窗体Default_image.aspx，切换到设计视图，在窗体中添加一个Image控件、一个Label控件、一个Button控件。调整Image控件到合适大小，设置其ImageUrl属性为“~/Images/Jellyfish.jpg”。参考演练2-3编写Button控件的Click事件代码。【实训2-1】设计一个简单的算术计算器，在文本框中输入数值后，单击运算符按钮，在下面的只读文本框中将显示计算结果，如图2-47所示。2.5实训在VisualStudio中编写程序时，如果在设计视图中不小心双击了文本框，这时将进入该文本框的TextChanged事件代码，如下所示：protectedvoidTextBox1_TextChanged(objectsender,EventArgse){}因为本实训不需要编写该文本框的TextChanged事件代码，一般应把上面的事件过程框架删掉，此时按F5键或Ctrl+F5组合键运行网站，将会显示如图2-48所示的错误提示，同时“输出”窗格中显示出错来源为“ASP.default_aspx不包含TextBox1_TextChanged的定义……”。单击“Default.aspx”选项卡，切换到源视图，找到该文本框的HTML代码，能看到其中有一个属性ontextchanged=TextBox1_TextChanged，如图2-49所示，把它删掉后，就可以正常运行了。再见