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 CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 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
一个用js实现控制台控件的代码
2007/09/04 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Python中__call__用法实例
2014/08/29 Python
Python 中的 else详解
2016/04/23 Python
Python Socket传输文件示例
2017/01/16 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
详解flask入门模板引擎
2018/07/18 Python
python输出决策树图形的例子
2019/08/09 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Python pip 常用命令汇总
2020/10/19 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
存储过程的优点有哪些
2012/09/27 面试题
自我鉴定思想方面
2013/10/07 职场文书
研发工程师的岗位职责
2013/11/18 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
投标邀请书范文
2014/01/31 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
小学大队委竞选口号
2015/12/25 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang