js triggers the Onclick event application of asp.net Button_javascript skills

After the introduction of event-driven in asp.net, it is easy to solve the problem of multiple buttons triggering different events on one page, avoiding the trouble of requiring multiple forms in asp or controlling it through js scripts.

While asp.net brings convenience, it also brings a problem. In actual applications, there are not many cases where there are multiple buttons on a page. Users are used to entering content in the input box and pressing Enter to submit the form. Since asp.net uses an event-driven model, the button's onclick event is not triggered by default when the user presses Enter. It is not that the user did not submit the form when he pressed Enter. You can see through httpwath that the page form is actually submitted to the action page under the form, but the onclick event is not triggered.

Under the asp.net event-driven mode, to trigger events through carriage returns, you must use js scripts.
In the aspx page of asp.net, the form code:

Copy the code The code is as follows:

But you can see it in the source code of the access page:

Copy code The code is as follows:

So by default, pressing Enter directly in the input box actually submits the form to the page corresponding to the form's action, without triggering any event.
Strange thing: when no web controls are used on an aspx page, pressing Enter in the input box will not trigger the onclick event of any button button by default; but when web controls are used on the page , press Enter in the input box, and the onclick event of the first button will be triggered by default. [The first here refers to the button control that appears first in the page code, including the button control in the web control]
Let’s talk about how to trigger the onclick event of the button button through js.
The default button control, the code in html is like this:

Copy the code The code is as follows:

The onclick event triggered by actually clicking this button is called Created a js script: __doPostBack(eventTarget, eventArgument)
button control has a property: UseSubmitBehavior, the default is true, when you change it to false, and then look at the html source code, you can clearly see the call js script function.

Copy code The code is as follows:

Generated js script:

Copy code The code is as follows:

After understanding this content, it is much simpler to handle the onclick event of the button triggered by pressing Enter in the input box. It is to intercept the action of pressing Enter in the input box, and then call the __doPostBack function through js to OK the input box:

Copy code The code is as follows:

< ;input type="submit" name="Button1" value="Button" id="Button1" />

js script

Copy code The code is as follows:

function KeyDown(btn) {
if (event.keyCode != 13) //The key is not the enter key return; else //The key is the enter key try {
__doPostBack(btn, '');
return false; catch (e) {
alert(e);
return; }
}

If you want the input box and button control to be in a web control, you need to pay special attention to:
The html code generated by the button control in the control:

Copy the code The code is as follows:

__doPostBack uses the name attribute of the input button. For buttons in web controls, the ID of the control will be added to the generated HTML code, so don’t write the wrong button name.