ASP. NET multiple Button pages, press enter to execute Button events, asp. netbutton

Source: Internet
Author: User

For pages with multiple ASP. NET buttons, press enter to execute Button events, asp. netbutton

There are two main implementation methods: JavaScript method andPanel Method

I. JavaScript Method

① Single Input box (text box) single button Implementation Method

The following functions: after entering the content in the input box, press enter to execute the button event!
Add:

<Script language = "javacrept"> function SubmitKeyClick (button) {if (event. keyCode = 13) {event. keyCode = 9; event. returnValue = false; document. all [Button ID]. click () ;}</SCRIPT>

  ② Implementation of multiple buttons in multiple input boxes (text boxes)
The following functions are implemented: After Entering content in different input boxes, press enter to execute different button events!
Add:

<Script type = "text/javascript"> function BtnClick (obj) {if (event. keyCode = 13) {if (obj = document. all. text Box ID) {document. all. button1.click ();} else {document. all. button2.focus (); document. all. button2.click () ;}}</script>

Add:

This. text Box ID. attributes. add ("onkeydown", "BtnClick (this);"); this. another text box ID. attributes. add ("onkeydown", "BtnClick (this );");

2. Use the Panel control

On the web page, buttons of the SUBMIT type are usually assigned as the SUBMIT button of the FORM to which the button belongs by default.

 

When creating an ASP.net WEB application, multiple buttons are often added to the same page, and each button will certainly trigger the page delivery event.

In ASP. NET, only one FORM with runat = "server" can be specified. Therefore, which button will be assigned to this FORM as the default submit button?

It is difficult to control without any processing. For example, if N search boxes are created on the same page, the ideal idea is to enter a keyword in an input box, the user presses ENTER to execute the submit button corresponding to the input box. However, it is often counterproductive. No matter how submitted, only one button event is executed.

If you specify the default button of Form, you can specify the DefaultButton attribute value of Form as the ID of a button. However, this button is always executed when you press enter, and other buttons cannot be triggered by press Enter.

 

Many methods on the Internet use JAVASCRIPT For judgment. Add events such as KEYPRESS to the input box and check eventCode. If it is a carriage return key, a button is executed.

This method is not difficult, but it is not easy to maintain, and it is often difficult to control when dealing with complicated logic.

 

In fact, ASP. NET provides a good solution, but is usually not noticed.

First, the browser submission mode is blocked. That is to say, the FORM does not specify an ENTER button by default.

 

The method is to set UseSubmitBehavior of the control button to false (LinkButton and ImageButton do not have this attribute and do not need to be set), so that the button will not accept the carriage return request, in this way, the user focus will not be submitted by pressing enter when the page is focused somewhere.

Why? View the page source file and we will find that the original ASP. after the BUTTON Server Control of NET is sent to the client, type = "submit", but when UseSubmitBehavior is set to false, type = "button", and an onclick event is added, the content is "javascript :__ doPostBack ('button1','') "id =" Button1 ". In this way, it indicates that this button is no longer a FORM submission button, the button is just a normal button. To submit a page, you must execute the click event. So how to press enter does not execute the submit event of this button.

 

This is just the first step, blocking the default submission. However, we want to press enter to submit. However, setting this attribute cannot achieve the desired effect.

Next, we need to understand the Panel control.

In fact, the Panel control is very useful. It is a container and has an attribute in the Panel control of ASP. NET.DefaultButton,This attribute is also available in the Form Control of ASP. NET (described earlier ).

Panel is a special control. On MSDN, the Panel control is used to organize the content and controls in the Form, another Panel, or template.

That is to say, Panel is a supplement to Form by ASP. NET and can be used to control the Form by region. This is why ASP. net ajax containers use this control.

We all know that ASPX can only have one FORM with runat = "server", so we need to be careful. What should we do with the specific FORM operation? Then we have to rely on the Panel control.

Here, we will use the Panel function.

Put a set of input boxes and buttons in a Panel and specify the DefaultButton attribute of the Panel as the button ID. In this way, when the user focus is on a control in the Panel, click press enter to execute the DefaultButton button specified by this Panel.

Panel is a complementary control of Form. You can use Panel to perform more operations on the Form. In this way, ASP. NET can only have one Form to solve some of the difficulties caused.

 

Original article: http://blog.sina.com.cn/s/blog_6a89f8100100mwwj.html

Http://blog.sina.com.cn/s/blog_568e662301018n2i.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.