（1）HTML服务器控件是建立在HTML控件的基础上，额外增加了一个在当前页面中唯一的ID属性值和一个runat=”server”属性；（2）HTML服务器控件必须放在服务器端表单中，也就是必须在<form runat=”server” id=”form表单ID”></form>标记之中。（3）HTML服务器控件最终在Web服务器处会被解释成普通HTML控件标记发送到客户端浏览器。asp.net服务器控件是微软为了方便开发者开发而推出的一系列控件，它们都以类似<asp:* ID="btnOK" runat="server" …/>的方式出现在Visual Studio 2005的源视图里，*代表了控件名，如<asp:Button ID="btnOK" runat="server" Text="提交" />就表示这是一个Button控件。asp.net服务器控件除了提供HTML服务器控件所能提供的功能之外，还有很多功能更为复杂的控件。这些控件可以分为简单控件、容器控件、数据绑定控件、数据源控件和数据验证控及用户自己根据自己业务需要将一些控件组合在一起组成的用户控件等。asp.net控件的特点与HTML服务器控件类似，也有如下特点：(1)asp.net服务器控件必须有一个在当前页面中唯一的ID属性和runat=”server”属性；(2)asp.net服务器控件必须放在服务器端表单中；(3)asp.net服务器控件最终会被解释成普通HTML标记发送到客户端浏览器。
本文主要介绍以下控件：
Button控件TextBox控件Web服务器控件的特殊客户端事件FileUpload控件Literal控件Panel控件PlaceHolder控件
Button控件
Button控件是asp.net开发时最常见的控件之一，我们创建一个页面名为ServerControl.aspx，下面就是这个页面的前台代码：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ServerControl.aspx.cs"Inherits="ServerControl"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableborder="0"width="100%">
<tr><td>
</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td><asp:ButtonID="btnOK"runat="server"Text="提交"/></td><td></td></tr>
</table>
</div>
</form>
</body>
</html>
这个页面在客户端一个只有一个提交按钮的页面，我们点击这个按钮的时候页面会刷新，它在客户端浏览器的HTML代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><title>
无标题页
</title></head>
<body>
<formname="form1"method="post"action="ServerControl.aspx"id="form1">
<div>
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"value="/wEPDwUKMTQ2OTkzNDMyMWRkT/VDzJ0SWn3BqgG/UOUV4Cqu7NY="/>
</div>
<div>
<tableborder="0"width="100%">
<tr><td>
</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td><inputtype="submit"name="btnOK"value="提交"id="btnOK"/></td><td></td></tr>
</table>
</div>
<div>
<inputtype="hidden"name="__EVENTVALIDATION"id="__EVENTVALIDATION"value="/wEWAgKFss63DQLdkpmPAbagjAxymGXZUaR5sNMBZHmUjoKd"/>
</div></form>
</body>
</html>
可见默认情况下，Button控件被解释成<input type=”submit” …/>形势的提交按钮，并且这个按钮的客户端id（即在HTML代码中的id属性）和我们在服务器端指定的id是一致的。还有一点要说明的是，在设计时表单的代码是“<form id="form1" runat="server">”，到了客户端变成了“<form name="form1" method="post" action="ServerControl.aspx" id="form1">”，这也是幕后的工作，我们的表单发送到客户端时被设置成post提交方式，接收表单数据的页面是当前页面（当前页面就是ServerControl.aspx）。
因为Button控件默认生成HTML的提交按钮，所以点击这个按钮自然就有了提交表单行为，并且默认是提交到当前页面处理。Button按钮常见属性有如下：
| 属性名 | 属性类型 | 属性说明 |
| CausesValidation | bool | 指示在单击 Button 控件时是否执行验证 |
| CommandArgument | string | 该参数会传递到Command 事件 |
| CssClass | string | 该参数指示控件在客户端呈现的级联样式表 (CSS) 类 |
| Enabled | bool | 指示是否启用 Web 服务器控件 |
| OnClientClick | string | Button 控件的 Click 事件时所执行的客户端脚本 |
| Text | string | 在 Button 控件中显示的文本标题 |
| ValidationGroup | string | Button 控件回发到服务器时要进行验证的控件组 |
Button控件的常见事件
| 事件名 | 委托类型 | 事件说明 |
| Click | EventHandler | 单击Button控件激发的事件 |
| Command | CommandEventHandler | 单击Button控件激发的事件 |
今天要讲的是CommandArgument、CssClass、OnClientClick属性和Click及Command事件。其它如CausesValidation和ValidationGroup会在验证控件部分再具体讲。CssClass这个属性非常有用，如果是单个按钮我们可以直接设置Button的前景色、背景色及Style属性，可是在大型网站中这么设置非常不方便，并且维护起来非常不方便。试想一下，在一个网站中有数百个甚至数千个Button按钮，有一天客户想改变它们的风格，那么是多么枯燥的一件事情，CssClass就是用来设置控件的css属性的（这个属性很多控件都有），这样在外部css样式文件中改变一下，整个网站的Button控件显示风格全部变化了，非常方便。OnClientClick这个属性用于一些需要客户端交互的场合，比如点击这个按钮会从数据库删除一些数据，有可能客户无意中点了这个按钮，那么我们可以给用户一次确认的机会，一旦用户吃了秤砣铁了心要删除他只需要确认一下就可以，如果不小心碰上这个按钮还可以点击“否”来取消。有经验的程序员在一些重要操作的时候都会给出这个提示，这个提示其实就是利用javascript的confirm（）函数来实现。Click和Command事件都是单击Button按钮时发生的事件，可是处理它们的委托类型不同，激发Click事件由 EventHandler委托来处理，激发Command事件后由CommandEventHandler委托来处理，看看它们的声明：
publicdelegatevoidEventHandler(
Objectsender,
EventArgse
)
publicdelegatevoidCommandEventHandler(
Objectsender,
CommandEventArgse
)
看出区别来了吗？它们都有两个参数，第一个参数表示由哪个控件激发了事件，第二个参数表示发生事件时的一些事件数据。这两个委托第一个参数都是相同的，第二个参数不同，EventArgs这个类不带有任何事件数据（这个委托很常见，不关心事件数据的事件都是用这个委托处理），而CommandEventArgs可以附带事件数据，它有两个重要属性：CommandArgument和CommandName。CommandArgument属性可以附带一些参数信息，CommandName用于设置命名的名称。
下面对刚才的页面添加更多代码，前台代码如下：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ServerControl.aspx.cs"Inherits="ServerControl"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<styletype="text/css">
.zhoufoxcn
{
color:#0000C0;
background-color:Olive;
border-color:Red;
border-style:Dotted;
}
.redfoxcn
{
color:red;
background-color:Olive;
border-color:#0000C0;
border-style:Dotted;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableborder="0"width="100%">
<tr><td>
</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>
</td><td></td></tr>
<tr><td><asp:ButtonID="btnOK"runat="server"Text="Click"OnClientClick="javascript:returnconfirm('确认提交?')"OnClick="btnOK_Click"CssClass="zhoufoxcn"/></td><td>
<asp:ButtonID="btnCommand"runat="server"
Text="Command"OnCommand="btnCommand_Command"CommandArgument="1"CssClass="redfoxcn"/></td></tr>
</table>
</div>
</form>
</body>
</html>
后台cs代码如下：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassServerControl:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
}
protectedvoidbtnOK_Click(objectsender,EventArgse)
{
Response.Write("发生了Click事件。");
}
protectedvoidbtnCommand_Command(objectsender,CommandEventArgse)
{
Response.Write("发生了Command事件，事件的数据是："+e.CommandArgument.ToString());
}
}
在前台代码中我们定义了css样式，定义了两个css类：zhoufoxcn和redfoxcn。ID为“btnOK”的Button控件的CsssClass属性为zhoufoxcn，它的OnClientClick属性为"javascript:return confirm('确认提交?')"，用户在浏览器点击这个按钮的时候会弹出一个“确认提交?”的询问对话框，用户点击“是”提交当前表单，否则不会将表单提交到服务器进行处理，这个控件的OnClick属性值为“btnOK_Click”，“btnOK_Click”是服务器上的一个方法，注意这个服务器方法一定要存在，并且满足EventHandler委托参数类型要求，否则不会编译通过。另外ID为“btnCommand”的Button控件的OnCommand属性为“btnCommand_Command”，这也是一个服务器端方法。给Button控件添加OnClick添加处理方法时双击就可以切换到cs代码，服务器会自动添加相关代码，但是给OnCommand添加相关处理方法时，不能这么做，只能通过在界面中找到该Button控件，在属性栏中点击事件，双击Command右边的空白处，如下图所示：
下面是浏览器中的HTML代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><title>
无标题页
</title>
<styletype="text/css">
.zhoufoxcn
{
color:#0000C0;
background-color:Olive;
border-color:Red;
border-style:Dotted;
}
.redfoxcn
{
color:red;
background-color:Olive;
border-color:#0000C0;
border-style:Dotted;
}
</style>
</head>
<body>
<formname="form1"method="post"action="ServerControl.aspx"id="form1">
<div>
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"value="/wEPDwUKMTQ3NjkyOTcyMmRkO5nkxzPqNMQvNwHngU2sXldPuhM="/>
</div>
<div>
<tableborder="0"width="100%">
<tr><td>
</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>
</td><td></td></tr>
<tr><td><inputtype="submit"name="btnOK"value="Click"onclick="javascript:returnconfirm('确认提交?');"id="btnOK"class="zhoufoxcn"/></td><td>
<inputtype="submit"name="btnCommand"value="Command"id="btnCommand"class="redfoxcn"/></td></tr>
</table>
</div>
<div>
<inputtype="hidden"name="__EVENTVALIDATION"id="__EVENTVALIDATION"value="/wEWAwKfyNPeBgLdkpmPAQLmjabZCHH72VxzRufctQapudcEco8xXEb0"/>
</div></form>
</body>
</html>
下面是运行情况：点击“Click”的情况：点击“Command”按钮后的运行情况：需要注意的是：Click事件和Command事件不能同时使用，如果需要事件的数据，那么就用Command事件，然后设置CommandEventArgs属性来附带事件数据，如果不关心事件数据，那么直接用Click属性就行了。
TextBox控件
TextBox控件用来提供一个输入框，这个输入框默认是输入单行文本的，但是我们可以设置它的TextMode属性来控制输入框的形式。它可以是以下三个值：TextMode="SingleLine"：用来输入单行文本TextMode="Password"：用来输入密码TextMode="MultiLine"：用来输入多行文本下面对ServerControl.aspx的前台再做一下改造，代码如下：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ServerControl.aspx.cs"Inherits="ServerControl"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<styletype="text/css">
.zhoufoxcn
{
color:#0000C0;
background-color:Olive;
border-color:Red;
border-style:Dotted;
}
.redfoxcn
{
color:red;
background-color:Olive;
border-color:#0000C0;
border-style:Dotted;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableborder="0"width="100%">
<tr><td>
用户名</td><td>
<asp:TextBoxID="txtUserName"runat="server"></asp:TextBox></td></tr>
<tr><td>
密码</td><td>
<asp:TextBoxID="txtPassword"runat="server"TextMode="Password"></asp:TextBox></td></tr>
<tr><td>
简单介绍</td><td>
<asp:TextBoxID="TextBox3"runat="server"TextMode="MultiLine"></asp:TextBox></td></tr>
<tr><td>
</td><td></td></tr>
<tr><td><asp:ButtonID="btnOK"runat="server"Text="Click"OnClientClick="javascript:returnconfirm('确认提交?')"OnClick="btnOK_Click"CssClass="zhoufoxcn"/></td><td>
<asp:ButtonID="btnCommand"runat="server"
Text="Command"OnCommand="btnCommand_Command"CommandArgument="1"CssClass="redfoxcn"/></td></tr>
</table>
</div>
</form>
</body>
</html>
运行之后，我们在每个文本框都输入“zhoufoxcn”，结果如下：
另外TextBox控件还有一个属性：AutoPostBack。这个属性默认是false，即控件的值发生变化时不会自动自动发生提交，如果为true就会自动向服务器提交（当控件失去焦点的时候向服务器提交），并且它还有一个事件TextChanged专门用来处理TextBox中的文本变化的情况的。再对上面的代码变化一下，设置ID为“txtUserName”的控件的AutoPostBack属性为true，如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ServerControl.aspx.cs"Inherits="ServerControl"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<styletype="text/css">
.zhoufoxcn
{
color:#0000C0;
background-color:Olive;
border-color:Red;
border-style:Dotted;
}
.redfoxcn
{
color:red;
background-color:Olive;
border-color:#0000C0;
border-style:Dotted;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableborder="0"width="100%">
<tr><td>
用户名</td><td>
<asp:TextBoxID="txtUserName"runat="server"AutoPostBack="True"OnTextChanged="txtUserName_TextChanged"></asp:TextBox></td></tr>
<tr><td>
密码</td><td>
<asp:TextBoxID="txtPassword"runat="server"TextMode="Password"></asp:TextBox></td></tr>
<tr><td>
简单介绍</td><td>
<asp:TextBoxID="txtIntroduce"runat="server"TextMode="MultiLine"></asp:TextBox></td></tr>
<tr><td>
</td><td></td></tr>
<tr><td><asp:ButtonID="btnOK"runat="server"Text="Click"OnClientClick="javascript:returnconfirm('确认提交?')"OnClick="btnOK_Click"CssClass="zhoufoxcn"/></td><td>
<asp:ButtonID="btnCommand"runat="server"
Text="Command"OnCommand="btnCommand_Command"CommandArgument="1"CssClass="redfoxcn"/></td></tr>
</table>
</div>
</form>
</body>
</html>
双击ID为“txtUserName”的这个控件，就会自动产生一个事件，在这个事件中编写处理代码，如下：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassServerControl:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
}
protectedvoidbtnOK_Click(objectsender,EventArgse)
{
Response.Write("发生了Click事件。");
}
protectedvoidbtnCommand_Command(objectsender,CommandEventArgse)
{
Response.Write("发生了Command事件，事件的数据是："+e.CommandArgument.ToString());
}
protectedvoidtxtUserName_TextChanged(objectsender,EventArgse)
{
Response.Write("当前输入的用户名是："+txtUserName.Text);
}
}
当我们在用户名文本框输入用户名，并将光标从用户名文本框移开时，会出现如下情况：也就是当用户光标移开用户名输入框时，会自动提交表单并由它在服务器端定义的方法处理。这样可以及时将反馈显示给用户，不过缺点是需要将整个表单提交给服务器，然后整页面发送到客户端浏览器，降低了服务器的处理效率，也加大了网络数据传输。对一些小型站点可以这么做，如果是大型网站就需要采用Ajax方法来处理了，这也是为什么Visual Studio 2005中默认这个属性为false的原因了。
Web服务器控件的特殊客户端事件
我们知道Web服务器控件最终会解释成普通HTML控件到客户端浏览器，比如TextBox这个Web服务器控件最终在客户端浏览器呈现为文本输入框控件、密码输入框控件或者文本框控件，这个由TextBox的TextMode属性来决定。用Web服务器控件有一个缺点就是很多时候我们没有办法获得它解释成客户端控件之后的客户端事件。下面是文本输入框控件在客户端的事件（下图截取自Dreamweaver 8编辑器）：我们可以看到文本框控件有很多客户端事件。再看看对应的TextBox控件拥有的事件智能提示：从上面的截图中可以看到TextBox控件也拥有很多事件，但是这些事件不是客户端的，而是服务器端的。我们先写一个HTML文件，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>HTML控件的客户端事件</title>
<scriptlanguage="javascript">
//下面的方法根据敲击键盘的ASCII码值来判断是否敲击了数字键
//数字键的ASCII码值介于48到57之间，分别对应数字0到9
//当方法返回true的时候敲入的字符才能显示
functionjudgeNumber(code)
{
//alert(code);
if(code>=48&<=57)
{
returntrue;
}
else
{
returnfalse;
}
}
//英文字母A-Z的ASCII码值65-90,a-z的ASCII码值是97-122
//当方法返回true的时候敲入的字符才能显示
functionjudgeChar(code)
{
//alert(code);
if((code>=65&<=90)||(code>=97&<=122))
{
returntrue;
}
else
{
returnfalse;
}
}
</script>
</head>
<body>
<form>
数字：<inputtype="text"name="userName"onkeypress="returnjudgeNumber(event.keyCode);"/><br/>
字母：<inputtype="text"name="password"onkeypress="returnjudgeChar(event.keyCode);"/>
</form>
</body>
</html>
这个页面的运行效果如下：
上面的页面效果是：第一个文本框只能输入数字，第二个文本框只能大小写字母。我们能知道TextBox如果TextMode是SingleLine的话（这个是默认值，无需手动添加），最后在客户端浏览器也是普通文本框，那么我们可不可以给TextBox控件加上上面的效果呢？答案是可以的。在Visual Studio 2005新建一个名为“TextBoxClient”页面窗体，在源视图中粘贴如下代码：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="TextBoxClient.aspx.cs"Inherits="TextBoxClient"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<scriptlanguage="javascript"type="text/javascript">
//下面的方法根据敲击键盘的ASCII码值来判断是否敲击了数字键
//数字键的ASCII码值介于48到57之间，分别对应数字0到9
//当方法返回true的时候敲入的字符才能显示
functionjudgeNumber(code)
{
//alert(code);
if(code>=48&<=57)
{
returntrue;
}
else
{
returnfalse;
}
}
//英文字母A-Z的ASCII码值65-90,a-z的ASCII码值是97-122
//当方法返回true的时候敲入的字符才能显示
functionjudgeChar(code)
{
//alert(code);
if((code>=65&<=90)||(code>=97&<=122))
{
returntrue;
}
else
{
returnfalse;
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
数字：<asp:TextBoxID="TextBox1"runat="server"onkeypress="returnjudgeNumber(event.keyCode);"></asp:TextBox><br/>
字母：<asp:TextBoxID="TextBox2"runat="server"onkeypress="returnjudgeChar(event.keyCode);"></asp:TextBox></div>
</form>
</body>
</html>
上面的程序在客户端的最终效果和用普通HTML控件的效果一样，只不过在Visual Studio 2005源视图会得到如图所示的提示：
好在只是绿色波浪线，表示警告，所以还是能通过编译并且能运行的，如果是红色波浪线表示是错误，就没有办法运行了。对于Visual Studio 2005来说，它并不认识那些javascript客户端事件，尽管警告，不过它还是照原样输出了，到了客户端就成了普通HTML控件，浏览器能识别这些，所以能正确运行