Button控件

Button控件是asp.net开发时最常见的控件之一，创建一个页面名为ServerControl.aspx，下面就是这个页面的前台代码：

前置代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " ServerControl.aspx.
cs "  Inherits= " ServerControl "  %> 
< !DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/
xhtml1 / DTD / xhtml1 - transitional.dtd " > 
< html xmlns = " http://www.w3.org/1999/xhtml "   >  
< head runat = " server " >  
    < title > 无标题页 </ title >  
</ head >  
< body >  
    < form id = " form1 "  runat = " server " >  
    < div >  
    < table border = " 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:Button ID = " btnOK "  runat = " server "  Text = " 提交 "   /></ td >< td ></ td ></ tr >  
    </ table >  
    </ div >  
    </ form >  
</ body >  
</ html >

 这个页面在客户端一个只有一个提交按钮的页面，我们点击这个按钮的时候页面会刷新，它在客户端浏览器的HTML代码如下：

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >  
< head >< title >  无标题页  </ title ></ head >  
< body >  
    < form  name ="form1"  method ="post"  action ="ServerControl.aspx"  id ="form1" >  
< div >  
< input  type ="hidden"  name ="__VIEWSTATE"  id ="__VIEWSTATE"  value ="/
wEPDwUKMTQ2OTkzNDMyMWRkT/VDzJ0SWn3BqgG/UOUV4Cqu7NY="   />  
</ div >  
     < div >  
     < table  border ="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 >< input  type ="submit"  name ="btnOK"  value ="提交"  id ="btnOK"   /></ td >< td ></ td ></ tr >  
     </ table >  
     </ div >  
< div >  
  < input  type ="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控件激发的事件

CssClass就是用来设置控件的css属性的（这个属性很多控件都有），这样在外部css样式文件中改变一下，整个网站的Button控件显示风格全部变化了，非常方便。

OnClientClick这个属性用于一些需要客户端交互的场合，比如点击这个按钮会从数据库删除一些数据，有可能客户无意中点了这个按钮，那么我们可以给用户一次确认的机会，一旦用户吃了秤砣铁了心要删除他只需要确认一下就可以，如果不小心碰上这个按钮还可以点击“否”来取消。有经验的程序员在一些重要操作的时候都会给出这个提示，这个提示其实就是利用javascript的confirm（）函数来实现。
Click和Command事件都是单击Button按钮时发生的事件，可是处理它们的委托类型不同，激发Click事件由 EventHandler委托来处理，激发Command事件后由CommandEventHandler委托来处理，看看它们的声明：

代码

     protected   void  Button1_Command( object  sender, CommandEventArgs e)
    {
        Response.Write( " 事件的参数信息是： "   +  e.CommandArgument);
    }
     protected   void  Button2_Click( object  sender, EventArgs e)
    {
        Response.Write( " 发生了点击事件。 " );
    }

 

它们都有两个参数，第一个参数表示由哪个控件激发了事件，第二个参数表示发生事件时的一些事件数据。这两个委托第一个参数都是相同的，第二个参数不同，EventArgs这个类不带有任何事件数据（这个委托很常见，不关心事件数据的事件都是用这个委托处理），而CommandEventArgs可以附带事件数据，它有两个重要属性：CommandArgument和CommandName。CommandArgument属性可以附带一些参数信息，CommandName用于设置命名的名称。

在上面的页面中，我们添加如下样式：

  <style type="text/css"> 
  .btnCss 
   {  
      color : #0000C0 ;  
      background-color : Olive ;  
      border-color : Red ;  
      border-style : Dotted ;  
   }  
  .redbtn
   {  
      color : red ;  
      background-color : Olive ;  
      border-color : #0000C0 ;  
      border-style : Dotted ;  
   }  
  </style> 

 

添加两个按钮，为按钮添加样式：

代码

asp:Button ID = " btnOK "  runat = " server "  Text = " Click "  
OnClientClick ="javascript:return confirm('确认提交?')"  OnClick = " btnOK_Click "  CssClass ="btnCss"   />
< asp:Button ID = " btnCommand "  runat = " server "  Text = " Command "  OnCommand = " btnCommand_Command "  CommandArgument = " 1 "  CssClass ="redbtn"   />

 

 在前台代码中我们定义了css样式，定义了两个css类：btnCss和redbtn。ID为“btnOK”的Button控件的CssClass属性为btnCss，它的OnClientClick属性为"javascript:return confirm('确认提交?')"，用户在浏览器点击这个按钮的时候会弹出一个“确认提交?”的询问对话框，用户点击“是”提交当前表单，否则不会将表单提交到服务器进行处理，这个控件的OnClick属性值为“btnOK_Click”，“btnOK_Click”是服务器上的一个方法，注意这个服务器方法一定要存在，并且满足EventHandler委托参数类型要求，否则不会编译通过。另外ID为“btnCommand”的Button控件的OnCommand属性为“btnCommand_Command”，这也是一个服务器端方法。给Button控件添加OnClick添加处理方法时双击就可以切换到cs代码，服务器会自动添加相关代码，但是给OnCommand添加相关处理方法时，不能这么做，只能通过在界面中找到该Button控件，在属性栏中点击事件，双击Command右边的空白处，需要注意的是：Click事件和Command事件不能同时使用，如果需要事件的数据，那么就用Command事件，然后设置CommandEventArgs属性来附带事件数据，如果不关心事件数据，那么直接用Click属性就行了。

属性设置如下图：

结果：当我们点击Command按钮时会出现如下对话框：

当我们点“取消”时，不会提交，当我们点击“确定”时，会出现如下结果

当我们点击“Click”时，会出现如下结果

转载于:https://www.cnblogs.com/aito/archive/2010/08/18/1802883.html