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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
VueJS全面解析
Nov 10 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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中Session的概念
2006/10/09 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript的目的分析
2007/01/05 Javascript
validator验证控件使用代码
2010/11/23 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
Javascript URI 解析介绍
2015/03/15 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python使用chardet判断字符串编码的方法
2015/03/13 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python使用python-docx读写word文档
2019/08/26 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python中return如何写
2020/06/18 Python
python导入库的具体方法
2020/06/18 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
员工离职感谢信
2015/01/22 职场文书
业务员岗位职责
2015/02/03 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python