• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js触发asp.net的Button的Onclick事件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

来至:http://chengkai5319782.blog.163.com/blog/static/3290230120104275723194/

测试后不能使用

 

在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制 的麻烦。

asp.net带来便利的同时,也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。用户习惯于在输入框输入内容之后,直接按回车就提 交表单了。由于asp.net采用的是事件驱动模式,所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页 面,只不过没有触发onclick事件而已。

在asp.net事件驱动模式下面,要实现通过回车来触发事件,必须要借助js脚本来实现。

在asp.net的aspx页面中,form的代码:
<form >

但在访问页面的源代码中可以看到:
<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名称不要写错了。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.netpage的AutoEventWireup属性转发布时间:2022-07-10
下一篇:
[email protected]作用发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap