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 开天辟地入门篇一
Dec 09 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
详解JS中的attribute属性
Apr 25 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue实现前端列表多条件筛选
Oct 26 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
第三节 定义一个类 [3]
2006/10/09 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Script的加载方法小结
2011/01/12 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
详解Anaconda 的安装教程
2020/09/23 Python
python基于openpyxl生成excel文件
2020/12/23 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
美的官方商城:Midea
2016/09/14 全球购物
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
自考毕业自我鉴定
2014/03/18 职场文书
派出所所长先进事迹
2014/05/19 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书