After ASP.net introduces event-driven, it is easy to solve the problem that multiple buttons trigger different events on one page, avoid the trouble that need multiple form in ASP or control by JS script.
ASP.net brings convenience, but also brings a problem. In practice, there are not many buttons in one page. The user is accustomed to enter the input box after the content, directly press ENTER to submit the form. Because ASP.net is using event-driven mode, the default user presses enter without the OnClick event triggering the button. The user presses the carriage return not to have not submitted the form, through Httpwath can see, actually the page form submits to the form under the action page, just did not trigger the onclick event just.
Under ASP.net event-driven mode, to implement the event by carriage return, you must use the JS script.
In the ASP.net aspx page, the code for the form:
Copy Code code as follows:
<form id= "Form1" runat= "Server" >
But you can see in the source code of the access page:
Copy Code code as follows:
<form name= "Form1" method= "post" action= "default.aspx" Id= "Form1" >
So in the input box by default directly press ENTER, in fact, is the form submitted to the form of the corresponding page, and did not trigger any events.
Strange Place: When a Web control is not used on an ASPX page, press ENTER in the input box, by default, the OnClick event does not trigger any button buttons, but when a Web control is used on the page, press ENTER in the input box, The onclick event of the first button is triggered by default. "The first point here is the button control that appears first in the page code, including the button control inside the Web control."
Let's talk about how to trigger the button's OnClick event through JS.
The default button control, which is the code in HTML:
Copy Code code as follows:
<input type= "Submit" Name= "Button1" value= "button" id= "Button1"/>
Actually clicking on this button triggers the OnClick event to invoke a JS script: __doPostBack (Eventtarget, eventargument)
Button control has a property: Usesubmitbehavior, Default is True, when you modify to False, then look at the source code of HTML, you can clearly see the call of the JS script function.
Copy Code code as follows:
<input type= "button" Name= "Button1" value= "button" onclick= "Javascript:__dopostback (' Button1 ', ') ' id=" Button1 "/ >
Generated JS script:
Copy Code code as follows:
<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>
Understand this piece of content, to handle the input box press ENTER trigger button's OnClick event is much simpler, is to intercept the input box to enter this action, and then through JS call __doPostBack this function on the OK input box:
Copy Code code as follows:
<input name= "TextBox1" type= "text" id= "TextBox1" onkeydown= "return KeyDown (' Button1 ');"/>
<input type= "Submit" Name= "Button1" value= "button" id= "Button1"/>
JS Script
Copy Code code as follows:
function KeyDown (BTN) {
if (Event.keycode!= 13)//key is not enter key return; else//Key is the Enter key try {
__doPostBack (BTN, "");
return false; catch (e) {
Alert (e);
Return }
}
If you want to enter a box and a button control in a Web control, you need to pay special attention to:
The HTML code generated by the button control in the control:
Copy Code code as follows:
<input type= "Submit" Name= "Wuc11$button2" value= "button" id= "Wuc11_button2"/>
__doPostBack uses the Name property of the input button, the button in the Web control, and the ID of the control in the generated HTML code, so the button name passed should not be written incorrectly.
