js触发asp.net的Button的Onclick事件应用
更新时间：2013年02月02日 15:33:45 作者：
由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已,感兴趣的朋友可以了解下，或许对你有所帮助
在asp.net引入事件驱动之后，在一个页面上很容易解决多个按钮触发不同事件的问题，避免了在asp中需要多个form或者通过js脚本来控制的麻烦。
asp.net带来便利的同时，也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。用户习惯于在输入框输入内容之后，直接按回车就提交表单了。由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已。
在asp.net事件驱动模式下面，要实现通过回车来触发事件，必须要借助js脚本来实现。
在asp.net的aspx页面中，form的代码：
<form id="form1" runat="server">
但在访问页面的源代码中可以看到：
<form name="form1" method="post" action="Default.aspx" id="form1">
所以在输入框默认直接按回车，其实就是把表单提交到了form的action对应的页面，而并没有触发任何事件。
奇怪的地方：当一个aspx页面上没有使用web控件的时候，在输入框里按回车，默认是不会触发任何一个button按钮的onclick事件；但当页面上有使用web控件的时候，在输入框里按回车，默认会触发第一个button的onclick事件。【这里的第一指页面代码中最先出现的button控件，包括web控件内的button控件】
下面说说如何通过js来触发button按钮的onclick事件。
默认的button控件，在html中的代码是这样的：
<input type="submit" name="Button1" value="Button" id="Button1" />
实际上点击这个button触发的onclick事件调用了一个js脚本：__doPostBack(eventTarget, eventArgument)
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这个函数就OK了输入框：
<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; }
}
如果要输入框和button控件是在web控件里的，就需要特别注意：
控件中的button控件生成的html代码：
<input type="submit" name="WUC11$Button2" value="Button" id="WUC11_Button2" />
__doPostBack中用到的是input按钮的name属性，web控件中button，在生成的html代码里会加上控件的ID，所以传递的 button名称不要写错了。
asp.net带来便利的同时，也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。用户习惯于在输入框输入内容之后，直接按回车就提交表单了。由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已。
在asp.net事件驱动模式下面，要实现通过回车来触发事件，必须要借助js脚本来实现。
在asp.net的aspx页面中，form的代码：
复制代码 代码如下:
<form id="form1" runat="server">
但在访问页面的源代码中可以看到：
复制代码 代码如下:
<form name="form1" method="post" action="Default.aspx" id="form1">
所以在输入框默认直接按回车，其实就是把表单提交到了form的action对应的页面，而并没有触发任何事件。
奇怪的地方：当一个aspx页面上没有使用web控件的时候，在输入框里按回车，默认是不会触发任何一个button按钮的onclick事件；但当页面上有使用web控件的时候，在输入框里按回车，默认会触发第一个button的onclick事件。【这里的第一指页面代码中最先出现的button控件，包括web控件内的button控件】
下面说说如何通过js来触发button按钮的onclick事件。
默认的button控件，在html中的代码是这样的：
复制代码 代码如下:
<input type="submit" name="Button1" value="Button" id="Button1" />
实际上点击这个button触发的onclick事件调用了一个js脚本：__doPostBack(eventTarget, eventArgument)
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这个函数就OK了输入框：
复制代码 代码如下:
<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; }
}
如果要输入框和button控件是在web控件里的，就需要特别注意：
控件中的button控件生成的html代码：
复制代码 代码如下:
<input type="submit" name="WUC11$Button2" value="Button" id="WUC11_Button2" />
__doPostBack中用到的是input按钮的name属性，web控件中button，在生成的html代码里会加上控件的ID，所以传递的 button名称不要写错了。
相关文章
这篇文章主要介绍了JS继承分类、原理与用法,结合实例形式较为详细的总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承等相关原理及使用方法,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了JavaScript的基础语法和数据类型,保姆级的详细教程，万字长文详细的列出了JavaScript的各种语法，建议收藏系列，希望可以有所帮助2021-09-09
这篇文章主要给大家介绍了关于JS运算符优先级与表达式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下2019-09-09
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
在通过Javascript实现客户端和服务端的交互时，有时候需要对操作系统进行判断，以便实现不同操作系统下的兼容性;从而实现网站在跨平台浏览时候保持良好的用户体验,感兴趣的朋友可以了解下啊，或许对你有所帮助2013-01-01
本文主要介绍了js转换对象为xml的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
大家都喜欢用innerHTML添加内容，但是innerHTML这东西在两大阵营中有许多不同。2010-02-02
这篇文章主要介绍了JavaScript实现网页截图功能,本文介绍了2款实现JavaScript截图的开源组件,一个是Canvas2Image,一个是html2canvas,需要的朋友可以参考下2014-10-10
JS中getElementsByClassName与classList兼容性问题解决方案分析
这篇文章主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下2019-08-08
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享2017-07-07
最新评论