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”时,会出现如下结果

posted @ 2010-08-18 23:12  aito  阅读(395)  评论(0编辑  收藏  举报