javascript事件函数如何防止服务器端事件函数(单击按钮) [英] How the javascript event function can prevent server side event function (button click)

问题描述

例如，如果我有一个.aspx页面，该页面上有一个名为"btnProcess"的按钮:

If I have, say, an .aspx page that has a button called "btnProcess":

asp:imagebutton id="btnProcess" onmouseover="src='siteart/addpayment2.gif'" tabIndex="13" onmouseout="src='siteart/addpayment1.gif'" Runat="server" Width="88" Height="22" ImageUrl="siteart/addpayment1.gif" AlternateText="Add Payment Button (CTRL + Plus(+))"

使用jQuery，如果我想在按下按钮时将功能链接到该按钮，则可以编写如下内容:

With jQuery, if I wanted to link a function to that button when it's pressed, I could write something like this:

$(document).ready(function () {
       $('#btnProcess').click(function () {
               return validateFields();
        });
});

如果validateFields()返回False，则后面的代码:

If validateFields() returns False, the code behind:

Private Sub btnProcess_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnProcess.Click

将不会触发.反之亦然，如果validateFields()返回True

will not fire. Vice versa if validateFields() returns True

如果我注释掉return validateFields();，则后面的代码将触发-如果我从不声明使用javascript单击时触发的函数，则后面的代码将触发(这些情况很有意义)

If I comment out return validateFields(); the code behind will fire - if I never declare a function that will trigger on click with javascript, the code behind will fire (these scenarios makes sense)

我的问题是(我可能会问错，提前对不起) 为什么 javascript按钮.click函数可以防止后面的代码在返回时触发错误吗?

My question is (and I may be asking it wrong, sorry in advance) why can the javascript button.click function prevent the code behind from firing when it returns false?

我一直学会将客户端代码和服务器端代码视为真正不会像这样相互缠绕的独立逻辑.

I've always learned to think of client-side and server-side code as individual pieces of logic that really don't intertwine like this.

我在寻找的不仅仅是仅仅是因为" ，这是我从同事那里得到的.

I'm looking for something more than "just because" which is what I received from a coworker.

推荐答案

ASP.NET回发是通过名为__doPostBack的JavaScript函数完成的，如果您查看页面的源代码，则看起来像这样:

The ASP.NET postback is done by a JavaScript function called __doPostBack, if you view the source of your page it looks like this:

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

注意:如果必须确定导致回发的控件，则__EVENTTARGET名称应该看起来很熟悉.在后面的代码中，您将获得引起回发的控件名称，如下所示:Page.Request.Params.Get("__EVENTTARGET");

Note: If you have ever had to determine which control caused a postback, then the __EVENTTARGET name should look familiar. In your code-behind you would get the name of the control which caused the postback like this: Page.Request.Params.Get("__EVENTTARGET");

如您所见，这会将表单提交到服务器，这就是我们所说的回发.

As you can see this submits the form to the server, which is what we call a postback.

使用return false;或event.preventDefault()会将对__doPostBack的呼叫短路，并且不会发生回发.

Using return false; or event.preventDefault() short-circuits the call to __doPostBack and your postback doesn't happen.

这篇关于javascript事件函数如何防止服务器端事件函数(单击按钮)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！