ASP.NET中通过JS实现回车触发Button点击事件

ASP.NET回车提交与事件驱动机制

ASP.NET引入事件驱动机制后，页面处理多个按钮触发不同事件的逻辑变得简单，无需像ASP时期那样依赖多个Form或通过复杂的JS脚本来控制。

然而这种便利也带来了一个常见痛点：实际开发中，用户更习惯在输入框输入内容后直接按回车提交。由于ASP.NET采用事件驱动模式，默认情况下按回车并不会触发按钮的OnClick事件。虽然通过HTTP监听可以看到表单确实提交到了Form的Action页面，但并未触发预期的服务器端事件。

因此，在ASP.NET的事件驱动框架下，若需实现回车触发特定事件，必须借助JavaScript脚本进行干预。

在ASP.NET的aspx页面中，Form标签的基础代码如下：

 
<form id="form1" runat="server">

查看页面源代码时，会发现Form标签的具体属性如下：

 
<form name="form1" method="post" action="Default.aspx" id="form1">

由此可见，在输入框中直接按回车，实际上是将表单提交到了Form的Action所指向的页面，而并未触发任何按钮的OnClick事件。

这里有一个值得注意的现象：当aspx页面上未使用Web控件时，在输入框按回车不会触发任何Button的OnClick事件；但当页面包含Web控件时，按回车会默认触发第一个Button（即页面代码中最先出现的Button，包括Web控件内部的Button）的OnClick事件。

通过JS实现回车触发Button事件

接下来介绍如何通过JavaScript实现手动触发Button的OnClick事件。

默认的Button控件在HTML中生成的代码如下：

 
<input type="submit" name="Button1" value="Button" id="Button1" />

实际上，点击该Button所触发的OnClick事件，底层是调用了一个名为__doPostBack的JavaScript函数。

Button控件有一个UseSubmitBehavior属性，默认值为true。若将其修改为false，再查看HTML源代码，即可清晰看到JS脚本的调用方式。

 
<input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" />

此时生成的JS脚本如下：

 
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1; function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit(); }
//]]> 
</script>

理解上述机制后，处理输入框回车触发Button的OnClick事件就变得简单：只需截获输入框的回车动作，并通过JS调用__doPostBack函数即可。示例输入框代码如下：

 
<input name="TextBox1" type="text" id="TextBox1" onkeydown="return KeyDown('Button1');" />
<input type="submit" name="Button1" value="Button" id="Button1" />

对应的JS脚本如下：

 
function KeyDown(btn) {
if (event.keyCode != 13) //按键不是enter键 return; else //按键是enter键 try {
__doPostBack(btn, '');
return false; catch (e) {
alert(e);
return; }
} 

Web控件嵌套时的注意事项

若输入框和Button位于Web控件内部，则需特别注意：

Web控件内Button生成的HTML代码如下：

 
<input type="submit" name="WUC11$Button2" value="Button" id="WUC11_Button2" />

__doPostBack函数依赖的是Input按钮的Name属性。在Web控件中，Button生成的HTML代码会附加控件ID，因此传递的Button名称必须准确无误。