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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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生成和获取XML格式数据的方法
2016/03/04 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
记录几个javascript有关的小细节
2007/04/02 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
详解Typescript里的This的使用方法
2021/01/08 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python连接池实现示例程序
2013/11/26 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Django组件content-type使用方法详解
2019/07/19 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
金融专业应届生求职信
2013/11/02 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
医药营销个人求职信
2014/04/12 职场文书
2014年新生军训方案
2014/05/01 职场文书
mysql知识点整理
2021/04/05 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers