《ASP.NET数据库网站设计教程（C#版）》

Presentation on theme: "《ASP.NET数据库网站设计教程（C#版）》"— Presentation transcript:

1 《ASP.NET数据库网站设计教程（C#版）》
配套教学资源 第2章 ASP.NET常用服务器标准控件 本章内容：常用服务器标准控件，Web用户控件，ASP.NET网站中资源的路径。 本章重点：Label、TextBox、Button、ImageButton、LinkButton、HyperLink、Image、RadioButton、RadioButtonList、CheckBox、CheckList、ListBox、DropDownList等控件。

2 2.1 常用标准控件 2.1.1 文本输入/输出控件 1．Label控件 语法格式如下：
2.1 常用标准控件 文本输入/输出控件 1．Label控件 语法格式如下： <asp:Label ID="Label1" runat="server" Text="显示的文本" … ></asp:Label>

3 要更改标签中显示的文字，可修改Text属性，有两种方法。
① 设计时在Label控件的“属性”窗口中更改Text属性值。 在工具箱的“标准”选项卡中，双击Label控件或者将其拖到页面上。 在“属性”窗口的“外观”类别中，将该控件的Text属性设置为要显示的文本。 可以把Label控件的Text属性设置为任意字符串（包括包含HTML标记的字符串）。例如，将Text属性设置为<strong>Test</strong><br />，则Label控件将以粗体显示单词“Test”然后换行。 ② 通过编程方法在运行时动态更改显示的文本。 注意：如果要显示静态文本，则应使用HTML标记，不要使用Label控件。

4 2．TextBox控件 语法格式如下： <asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged" … > 文本框中显示的文本</asp:TextBox>

5 【演练2-1】 在文本框中输入用户名，然后单击网页中的其他地方或按Enter键后显示刚才输入的用户名，如图2-1所示。
① 设计页面。新建一个空网站（例如网站“C:\ex2_1”），添加一个Web窗体，窗体名为Default.aspx。切换到设计视图，在Default.aspx中添加一个TextBox控件和一个Label控件到表格中。设计视图如图2-2所示。

6

7 ② 设置控件属性。在TextBox1控件的“属性”窗口中，把AutoPostBack属性值改为true。
③ 编写事件过程代码。在页面的设计视图中，选中TextBox1控件，在“属性”窗口中单击“事件”按钮 ，在事件列表中双击TextChanged事件，如图2-2所示。 打开Default.aspx.cs窗口，在TextBox1控件的TextChanged事件过程框架中输入以下代码： protected void TextBox1_TextChanged(object sender, EventArgs e) { Label1.Text = "输入的用户名是："+TextBox1.Text; } ④ 运行网站。单击“启用调试”按钮 ， 运行当前Web窗体，在文本框中输入用户名，然后单击文本框以外的网页区域，或者按Enter键，显示如图2-1所示。

8 按钮控件 使用按钮Web服务器控件，用户能够将页发送到服务器中并触发页上的事件。有3种按钮控件，每种按钮控件在网页上显示的方式都不同。 1．Button控件 语法格式如下： <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="按钮上显示的文本" … />

9 【演练2-2】 设计一个如图2-3所示的跟帖网页，评论被输入到一个多行文本框中，单击“发评论”按钮后，将显示在前面3个文本框中输入的文本。

10 ① 设计页面。新建一个空网站，添加一个Web窗体，切换到设计视图，在Default
① 设计页面。新建一个空网站，添加一个Web窗体，切换到设计视图，在Default.aspx窗体中添加3个TextBox控件、一个Button控件和一个Label控件，同时添加相关的静态文字，如图2-4所示。

11 ② 设置控件属性。设置用于输入评论的TextBox1控件的TextMode属性值为MultiLine，Text属性值为空字符串；设置用于输入密码的TextBox3控件的TextMode属性值为Password；设置Button1控件的Text属性值为“发评论(Alt+S)”，AccessKey属性为S，可以按Alt+S快捷键访问；将Label1控件的Text属性的内容清空。 ③ 编写事件过程代码。在设计视图中，双击Button1控件，在Button1_Click事件过程框架中输入以下代码： protected void Button1_Click(object sender, EventArgs e) { Label1.Text="评论："+TextBox1.Text+"<br />"; Label1.Text = Label1.Text + "登录名：" + TextBox2.Text + "<br />"; Label1.Text = Label1.Text + "密码：" + TextBox3.Text; } ④ 运行网站。单击“启用调试”按钮 ， 运行当前Web窗体，在文本框中输入内容，按Alt+S快捷键，显示如图2-3所示。

12 2．ImageButton控件 语法格式如下： <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="图像的URL" onclick="ImageButton1_Click" … />

13 【演练2-3】 网页第一次显示时显示一个初始图像按钮，同时显示一行提示，如图2-5所示。单击该图像按钮后，该图像按钮上显示初始图像后的第一个图像按钮，同时显示一行提示，如图2-6（a）所示；单击图像按钮显示第二个图像按钮，如图2-6（b）所示，即实现单击图像按钮交替显示图2-6（a）、（b）这两张图像。

14 （1）设计页面 新建网站，添加Web窗体，切换到设计视图，在Default.aspx中添加一个ImageButton控件和一个Label控件。 （2）设置控件属性 ① 右击网站名称，在快捷菜单中单击“新建文件夹”，如图2-7所示，输入文件夹名称“Images”。

15 右击文件夹名称“Images”，在快捷菜单中单击“添加现有项”，如图2-8所示，浏览到“库→图片→公用图片→示例图片”，选中“水母”、“考拉”和“企鹅”图片，把这3张图片添加到“Images”文件夹中。

16 ② 在设计视图中选中ImageButton1控件，先把图像按钮设置为适当大小，然后右击ImageButton1控件，在快捷菜单中单击“属性”，打开“属性”窗口。在“属性”窗口中单击ImageUrl属性后的浏览 按钮，显示“选择图像”对话框，在“Images”文件夹中选择图像按钮上显示的初始图片文件，这里是水母图片。 ③ 在设计视图中选中Label1控件，在“属性”窗口中把Text属性值改为“水母，初始图片，单击切换到新图片”。

17 （3）编写事件代码 ① 在解决方案资源管理器中，双击Default.aspx.cs打开其窗口，在所有事件过程外声明窗体级变量，用静态变量保存单击的奇偶次数，代码为“static bool flag = true;”，如图2-9所示。奇数次单击为true，偶数次单击为false。

18 ② 创建图像按钮的单击事件，在设计视图中双击该图像按钮ImageButton1控件，打开该图像按钮的单击事件过程ImageButton1_Click框架，输入代码：
protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { 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所示。

19 3．LinkButton控件 语法格式如下： <asp:ID="LinkButton1" runat="server" onclick="LinkButton1_Click" … >链接按钮上显示的文本</asp:LinkButton>

20 超链接控件 语法格式如下： <asp:HyperLink ID=" HyperLink1" runat="server" …>链接上显示的文本</asp:HyperLink> 与大多数Web服务器控件不同，当用户单击HyperLink控件时并不会在服务器代码中触发事件（此控件没有事件）。此控件只执行导航。使用HyperLink控件的主要优点是可以在服务器代码中设置链接属性。

21 下面的示例使用Button控件的Click事件显示在运行时设置的HyperLink控件的属性，并设置HyperLink控件的链接文本和目标页。在网页窗体中添加一个HyperLink控件和一个Button控件，Button控件的Click事件过程代码如下： protected void Button1_Click (object sender, System.EventArgs e) { this.HyperLink1.Text = "Home"; this.HyperLink1.NavigateUrl = " }

22 图像控件 语法格式如下： <asp:Image ID="Image1" runat="server" ImageUrl="图像文件的URL" … /> 说明：Image控件只显示图像，不支持任何事件。如果需要捕获图像上的鼠标单击事件，则使用ImageButton控件。 如果在网页运行时不需要更改图像的属性，最好采用静态图像，直接把图像文件从本网站拖动到页面窗体中，创建的就是静态图像，其语法格式如下： <img alt="替换文本" src="图像文件的URL" style="图像的宽、高样式" … />

23 【演练2-4】 用Image控件显示图片，单击Button控件切换图片。在演练2-3设计的网站中添加一个Web窗体Default_image
【演练2-4】 用Image控件显示图片，单击Button控件切换图片。在演练2-3设计的网站中添加一个Web窗体Default_image.aspx，切换到设计视图，在窗体中添加一个Image控件、一个Label控件、一个Button控件。调整Image控件到合适大小，设置其ImageUrl属性为“~/Images/Jellyfish.jpg”。参考演练2-3编写Button控件的Click事件代码。

24 2.5 实训 【实训2-1】 设计一个简单的算术计算器，在文本框中输入数值后，单击运算符按钮，在下面的只读文本框中将显示计算结果，如图2-47所示。

25 在Visual Studio中编写程序时，如果在设计视图中不小心双击了文本框，这时将进入该文本框的TextChanged事件代码，如下所示：
protected void TextBox1_TextChanged(object sender, EventArgs e) { } 因为本实训不需要编写该文本框的TextChanged事件代码，一般应把上面的事件过程框架删掉，此时按F5键或Ctrl+F5组合键运行网站，将会显示如图2-48所示的错误提示，同时“输出”窗格中显示出错来源为“ASP.default_aspx不包含TextBox1_TextChanged的定义……”。

26

27 单击“Default.aspx”选项卡，切换到源视图，找到该文本框的HTML代码，能看到其中有一个属性ontextchanged="TextBox1_TextChanged"，如图2-49所示，把它删掉后，就可以正常运行了。

28 再见