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

简介: 在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制 的麻烦。 asp.net带来便利的同时,也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。

在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名称不要写错了

 

这是我测试的时候用到的代码:

 $(function () {
            $("#txtVerificationCode").keydown(function (e) {
                var kCode = e.keyCode || e.charCode;
                if (kCode == 13) {
                    try {
                        window.__doPostBack('btnLogin', '');
                        return false;
                    }
                    catch (e) {
                        alert(e);
                        return false;
                    }
                }
            });
        });

 

目录
相关文章
|
JavaScript 前端开发
JavaScript中重排与重绘的区别及触发条件
JavaScript中重排与重绘的区别及触发条件
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
158 0
|
12月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
388 14
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
297 8
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
237 7
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
602 3
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
243 13
|
JavaScript 前端开发
JS中toString和valueOf在什么时候会自动触发
本文探讨了JavaScript中`toString`和`valueOf`方法在何时会自动触发,解释了隐式类型转换时这两个方法的调用机制,并提供了多个代码示例来演示它们的自动触发情况。
178 1
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
174 1