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 相关文章推荐
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python显示生日是星期几的方法
2015/05/27 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python实现转圈打印矩阵
2019/03/02 Python
keras 权重保存和权重载入方式
2020/05/21 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
试述DBMS的主要功能
2016/11/13 面试题
NET程序员上机面试题
2015/05/23 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
主治医师岗位职责
2013/12/10 职场文书
企业军训感想
2014/02/07 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
工作证明英文模板
2014/10/21 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
民事答辩状格式范文
2015/05/21 职场文书
电影建国大业观后感
2015/06/01 职场文书
团拜会主持词
2015/07/04 职场文书
高考升学宴主持词
2019/06/21 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript