知识点：
理解 ASP.NET 的控件的分类、 掌握服务器控件和页面回发的原理、 掌握基本的 Web 服务器控件、 掌握服务器控件的客户端事件处理。
在第一课【使用ASP.NET开发Web项目】第一课——初识ASP.NET中，我么创建了第一个ASP.NET程序，也已经初步认识到了 ASP.NET WebForm 中的 Button、Label 和 TextBox 控件。Asp.net之所以开发方便和快捷，关键是它有一组强大的控件库，包括 HTML 控件、HTML 服务器控件和 Web服务器控件。
我们经常使用的是 Web 服务器控件，根据它们功能的侧重点不同，Web 服务器控件可以分为标准控件、具有强大数据绑定功能的数据控件、用于检测输入的验证控件等。通过本章的学习，可以掌握所有 ASP.NET 控件的共有特性、常用的标准控件及服务器控件的客户端事件处理的方式。
1、控件概述
在 ASP.NET 中，控件分为HTML 控件、HTML服务器控件和Web服务器控件。不管什么控件，最终会生成 HTML 代码，由浏览器根据 HTML 代码解析后呈现。
1.1 ASP.NET中的客户端和服务端
客户端一般由浏览器来充当，服务端一般由IIS 这类的服务器和网站代码来实现！ 用于提供浏览服务的服务器端软件，称为 Web 服务器。
常用的web服务器： IIS 微软集成在Windows Server 服务器上的 Web 服务器软件，全称为 Internet Information Server，又称互联网信息服务器。 ASP.NET Development Server 集成在 Visual Studio 2005 和 2008 中的 Web 服务器，可以处理本机的请求，用于 Web 应用程序开发中使用。
ASP.NET中客户端控件和服务端控件的区别
客户端控件：即普通Html控件，使用script控制操作，由客户端浏览器解释执行。服务端控件：即Asp.Net的控件，这些控件在服务器端解释执行，生成根据用户的浏览器而定的html元素。
1.2 HTML 控件
HTML 标签，比如是一个文本框标签，在 ASP.NET 中，这种标签称作 HTML 控件。ASP.NET 不会对这种控件做处理，即在客户端运行，我们也无法为 HTML 控件绑定服务器端事件，即在服务器端无法用代码捕获它，只能在客户端通过 javascript 等程序语言来控制。因为 HTML 控件不消耗服务器资源，所以如果仅仅强调客户端的应用，那么用 HTML 控件即可。
1.3 HTML 服务器控件
我们可以将 HTML 控件转换为 HTML 服务器控件，方法是在 HTML 标签中添加runat="server"的属性，这个属性声明了该控件在服务器端运行。在 ASP.NET 执行的过程中，ASP.NET 将创建包含runat="server"属性的元素实例，如果需要在后置代码中使用此实例，则需要为控件分配id 属性。
示例练习1：HTML服务器控件的使用
示例效果：用户在输入框里输入姓名，点击【确定】按钮时，输出针对该姓名的欢迎语。
第一步：在VS中新建asp.net web项目，并添加一个web窗体，使用HTML服务器控件，制作基本界面。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>
代码提示：
具有runat="server"属性的所有控件都必须放在具有runat="server"属性的 form 中。onserverclick是HTML服务器控件的单击事件。
第二步：在解决方案资源管理器中，找到当前WebForm1.aspx，点击左侧的三角形，双击打开文件WebForm1.aspx.cs，编写代码。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication18
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSure_ServerClick(object sender,EventArgs e)
{
Response.Write("欢迎您！" + txtName.Value);
}
}
}
注意：
这里的事件，需要自己在WebForm1.aspx.cs文件里写。
1.4 Web服务器控件
与HTML服务器控件不同，Web 服务器控件不是由 HTML 元素直接转换而来的，而是微软重新定义的一套控件。第一章使用的 TextBox、Label 和 Button 都是 Web 服务器控件。Web 服务器控件提供统一的编程模型、包含方法以及与之相关的事件处理程序，并且这些代码都在服务器端执行。在 ASP.NET 中，我们平时使用的都是 Web 服务器控件。Web 服务器控件的标签都是以“asp:” 开头，称为标记前缀，后面是控件类型，如：
注意：
虽然runat="server"是 Web 服务器控件的默认属性，但该属性不能省略不写，否则会出现编译错误。
1.5 HTML控件、HTML服务器控件、web服务器控件之间的区别
html控件：，运行在客户端 html服务器控件：，在服务器端运行 web服务器控件：
HTML 服务器控件和 Web 服务器控件都是在服务器端运行，它们通过设置 id 属性，在服务器端用id来自动捕获它们。
2、Web服务器控件的应用
2.1 显示文本控件
（1） Label控件
Label 控件是 ASP.NET 中最常用的控件之一，用于将文本内容显示在网页上，支持以编程方式动态修改显示的内容。Label 控件常用的成员如表所示。
示例练习2：Label控件的使用
示例效果：网页运行后，用户通过快捷键“Alt+U”，快速访问文本框。
第一步：在当前项目中，新添加一个web窗体，并命名为Example2，如下图所示
第二步：Web窗体添加成功后，默认打开源代码界面，我们可以单击下方的【设计】，切换界面。然后从工具箱里分别拖一个Label控件和一个TextBox控件，并进行相关属性设置。
TextBox控件：ID属性设置为：txtName Label控件： ID属性设置为：lblName，AccessKey属性设置为：U，AssociatedControlID属性设置为：txtName，Text属性设置为：用户名（U）
第三步：启动运行调试，查看效果。效果出现后，可以在VS中，回到【源代码】界面，查看代码的变化。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example2.aspx.cs" Inherits="WebApplication19.Example2" %>
注意：当我们在设计界面拖放控件，并设置属性时，会自动在aspx页面生成对应代码。
提示：Label控件的Text属性中如果包含HTML标签，则会被浏览器解析并执行。
思考：在浏览器中查看页面源代码，看看两个源代码之间有什么区别，为什么？
（2） TextBox控件
在页面中，使用 TextBox 控件收集用户输入的信息或者显示文本。它可以配置为单行、多行或者密码类型。TextBox 常用的成员如表所示。
示例练习3：TextBox控件的使用
示例效果：网页运行后，用户按照提示输入用户名、密码和留言，当用户留言结束离开TextBox控件时（失去焦点），触发OnTextChanged事件，显示欢迎语。
第一步：在当前项目中，新添加一个web窗体，并命名为Example3，然后在body里写一个4行2列的表格，做基础界面设计。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>
第二步：在head标签里，写一对style标签，写css样式，来控制表格的样式。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example3.aspx.cs" Inherits="WebApplication20.Example3" %>
第三步：点击【设计】，进入设计界面，选中留言对应的TextBox控件（ID属性被设置为txtContent），在属性面板点击【事件】，找到该控件的TextChanged事件，双击进入。（注意，这时候事件后面有事件名，是因为我们在第一步写源代码时，已经写好了事件名称。）
在txtContent_TextChanged事件中，编写代码：
protected void txtContent_TextChanged(object sender, EventArgs e)
{
lblInfo.Text = "您好：" + txtName.Text + "，您的留言是:" + txtContent.Text;
}
第四步：启动运行调试，查看效果。
示例代码分析：
（1）OnTextChanged 事件在输入焦点离开 TextBox 时才被引发。
（2）AutoPostBack 属性用于设置当触发文本框的 OnTextChanged 事件时，是否自动产生向服务器的回发。为了避免由于回发引起页面的刷新，默认把 AutoPostBack 属性设置为false。
（3）本例中，将用于输入留言的 TextBox 的 AutoPostBack 属性设置为 true，使 TextBox失去焦点后自动回发到服务器，以便立即处理 OnTextChanged 事件。
2.2 显示图片控件
开发网站时，常常用到各种图片。Image 控件用于在网页上呈现图片，最终生成元素，支持以编程的方式管理显示的图片。Image 控件常用成员如表所示。
示例练习4：Image控件的使用
示例效果：网页运行后，会随机显示一张图片，鼠标移动到图片上面，会出现该图片的说明性文字。刷新页面，会随机显示新的图片，同样，鼠标移动到该图片上也有提示文字。
第一步：在当前项目中，新添加一个web窗体，并命名为Example4，然后在设计界面，拖放一个Image控件，并设置属性。ID属性：imgWuhan、Height属性：200px、Width属性：300px
切换到源代码模式，会看到我们添加的Image控件，已经被自动添加。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example4.aspx.cs" Inherits="WebApplication21.Example4" %>
第二步：在解决方案资源管理器中，鼠标右键单击当前项目名称WebApplication21，依次选择【添加】——【新建文件夹】——【将新建的文件夹命名为img】。然后鼠标右键单击文件夹【img】，再单击【在文件资源管理器中打开文件夹】，然后将自己需要的图片，存放在该文件夹里。
第三步：在解决方案资源管理器中，鼠标单击Example4.aspx文件前面的三角形，找到他对应的Example4.aspx.cs文件，双击进入，在Page_Load事件里编写代码。
protected void Page_Load(object sender, EventArgs e)
{
Random num = new Random();
int i = num.Next(1, 5);//随机产生1到5之间的整数
imgWuhan.ImageUrl = "img/" + i + ".jpg";//构造图片的相对路径
switch (i)
{
case 1:
imgWuhan.ToolTip = "凌波门";//设置图片的ToolTip属性
break;
case 2:
imgWuhan.ToolTip = "武汉关";
break;
case 3:
imgWuhan.ToolTip = "黄鹤楼";
break;
case 4:
imgWuhan.ToolTip = "鹦鹉洲大桥";
break;
}
}
第四步：启动运行调试，查看效果。
2.3 控件的超级链接
HyperLink 控件用于在网页上以图片或文本方式呈现一个链接，常用成员如表所示。
示例练习5：HyperLink控件的使用
示例效果：网页运行后，看到一个文本超链接“百度首页”、一张图片超链接，分别点击他们，都可以打开百度首页。
第一步：在当前项目中，新添加一个web窗体，并命名为Example5，然后在设计界面，拖放一个HyperLink控件，并设置属性。ID属性：hlkText、NavigateUrl属性：http://www.baidu.com、Target属性：_blank、Text属性：百度首页。
第二步：在设计界面新增加一个img文件夹，拷贝一个baidu.png图片到img文件夹
第二步：在设计界面，继续拖放一个HyperLink控件，并设置属性。ID属性：hlkImage、ImageHeight属性：100px、ImageUrl属性：img/baidu.png、ImageWidth属性：200px、NavigateUrl属性：http://www.baidu.com、Target属性：_blank。
（注意：这里设置ImageUrl属性时，采用的是相对路径，可以提前在自己项目的img文件夹中存放一张图片。如果自己练习时的图片名称、格式等不一致时，要学会自己更改，否则可能会导致图片不可见）
第三步：切换到源代码界面，查看代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example5.aspx.cs" Inherits="WebApplication22.Example5" %>
HyperLink 使用 Text 属性时，呈现一个文本方式的链接，最终会生成一个包含文本的标签（百度首页 ）。同时使用 ImageUrl 属性和Text 属性时，程序会优先显示 ImageUrl 属性中的图片，当图片不可用时则显示 Text 属性中的文字，HyperLink 控件会为 ImageUrl 属性生成标签，并使用标签嵌套（
）。
第四步：启动运行调试，查看效果。
点击《百度首页》即可自动跳转到百度网站首页。
2.4 单选按钮的应用
在 ASP.NET WebForm 中，单选按钮主要有 RadioButton 控件提供。RadioButton 控件用于在页面创建一个单选项，可以使用GroupName属性，将多个单选项分为一组来创建多个互斥的选项。RadioButton 常用成员如表 所示。
示例练习6：RadioButton控件的使用
示例效果：网页运行后，有一组单选按钮选项，默认选项“男”被选中，用户可以根据需要，点选不同的选项，每次只能选中一个。
第一步：在当前项目中，新添加一个web窗体，并命名为Example6，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“性别：”，再文字后面拖放一个RadioButton控件，并设置属性。ID属性：rdoSexM、Checked属性：True、GroupName属性：gender、Text属性：男。
第二步：在当前设计界面，继续拖放一个RadioButton控件，并设置属性。ID属性：rdoSexW、GroupName属性：gender、Text属性：女。
第三步：启动运行调试，查看效果。（可以切换到源代码界面，查看代码）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example6.aspx.cs" Inherits="WebApplication23.Example6" %>
运行效果
2.5 复选框的应用
在 ASP.NET WebForm 应用程序中，CheckBox 控件用来在页面中创建复选框，常用成员见表 所示。
示例练习7：CheckBox控件的使用
示例效果：网页运行后，有一组复选框按钮选项，默认选项“篮球”被选中，用户可以根据需要，点选不同的选项，选中以后，单击确定按钮，会输出用户选中的选项。
第一步：在当前项目中，新添加一个web窗体，并命名为Example7，然后在设计界面，拖一个Label，Label的TEXT属性写上文字“请选择你喜欢的运动：”，在文字后面拖放一个CheckBox控件，并设置属性。ID属性：chkSport1、Checked属性：True、Text属性：篮球。
继续添加两个CheckBox控件，分别设置他们的属性：
ID属性：chkSport2、Text属性：足球
ID属性：chkSport3、Text属性：乒乓球
第二步：在当前设计界面，换行以后，继续拖放Button控件，并设置其属性，ID属性：btnSure、Text属性：确定。
第三步：在当前设计界面，换行以后，输入文字“你选择的爱好是：”，然后再文字后面拖放一个Label控件，并设置其属性，ID属性：lblState、Text属性： （设置为空）。
可以查看一下此时的源代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example7.aspx.cs" Inherits="WebApplication24.Example7" %>
第四步：在当前设计界面，双击Button控件，进入该控件的事件，编写代码。
protected void btnSure_Click(object sender, EventArgs e)
{
foreach(Control ct in form1.Controls)
{
if (ct.GetType().ToString().Equals("System.Web.UI.WebControls.CheckBox"))
{
CheckBox cb = (CheckBox)ct;
if (cb.Checked==true)
{
lblState.Text += cb.Text + " ";
}
}
}
}
代码解析：
foreach (Control ct in form1.Controls){}；使用foreach循环，遍历指定元素中的所有控件。（注意：本示例里使用的是form1.Controls，因为我们的源代码里默认的是