js触发asp.net的Button的Onclick事件应用


Posted in Javascript onFebruary 02, 2013

在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名称不要写错了。
Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript XML数据显示为HTML一例
Dec 23 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 #Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 #Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 #Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 #Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 #Javascript
You might like
PHP 加密与解密的斗争
2009/04/17 PHP
PHP安全配置详细说明
2011/09/26 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
session 加入redis的实现代码
2016/07/15 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
jQuery提交多个表单的小技巧
2014/07/27 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
typescript配置alias的详细步骤
2020/08/12 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
培训协议书范本
2014/04/22 职场文书
班主任评语大全
2014/04/26 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
地震捐款简报
2015/07/21 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
如何使用pdb进行Python调试
2021/06/30 Python