Button控件
Button控件是asp.net开发时最常见的控件之一,创建一个页面名为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代码如下:
<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委托来处理,看看它们的声明:
{
Response.Write("事件的参数信息是:" + e.CommandArgument);
}
protected void Button2_Click(object sender, EventArgs e)
{
Response.Write("发生了点击事件。");
}
它们都有两个参数,第一个参数表示由哪个控件激发了事件,第二个参数表示发生事件时的一些事件数据。这两个委托第一个参数都是相同的,第二个参数不同,EventArgs这个类不带有任何事件数据(这个委托很常见,不关心事件数据的事件都是用这个委托处理),而CommandEventArgs可以附带事件数据,它有两个重要属性:CommandArgument和CommandName。CommandArgument属性可以附带一些参数信息,CommandName用于设置命名的名称。
在上面的页面中,我们添加如下样式:
.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>
添加两个按钮,为按钮添加样式:
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”时,会出现如下结果