Default Focus and Default Button in ASP.Net

Default Focus and Default Button - WebForm Example
Default Focus and Default Button - WebForm Example

1. Default Focus and Default Control – Introduction

In this short article, we will learn the importance of setting the default control focus. Also, we will explore setting the default button for a form and for a group of controls.

Most of the computer programmers or software users know what is control focus. In windows operating system, it sends all the keyboard and mouse signals to the control in focus. If we type something, the typed stuff goes into the control in focus.

The browser of the windows form maps the default button to the Enter keystroke on the keyboard. Pressing the Enter button on the keyboard will call the button clicked event of the default button.

2. Example Web Form for Default Focus and Button

Have a look at the simple asp form below:

Default Focus and Default Button - WebForm Example
Default Focus and Default Button – Web Form Example

In the above web form example, we can summarize what we will implement as follows:

  1. When the Page loads, the text box control next to the name label field gets the focus. So we call the default focus is on this control.
  2. When the user hits the tab key, the focus shifts in a sequential way from one control to other control.
  3. The label field shown in yellow color shows information message when Claim button is pressed.
  4. When the focus is on any of the three text boxes (Name, Discount Id, Order Number), hitting the enter button on the keyboard invokes click event of the claim button.
  5. Clicking the button next to the Claim Button sets the focus to the Order number text box. Here, one can learn how to set focus to a control at run-time dynamically.
  6. When the control focus is in the Product name text box, hitting the enter button will invoke the search button click.

All the above stuff can be accomplished by the default focus and default button properties of the control. Of course, there is a minimal piece of code to display the message in the label and invoking a function that sets the control focus.

3. Setting Default Focus and Default Button Properties

3.1 Control Focus by TabIndex Property

TabIndex Property allows which control to should get focus when a keyboard Tab key pressed. Each consecutive Tab press allows the control focus in a particular sequence. The TabIndex Property controls this sequence. Dot.Net Framework maintains a count and increments it when a user hits the Tab key and resets it after reaching the maximum index. The number in the  TabIndex Property of the control is compared with this Framework count. Asp.net sets the focus to the control that matches with this count. You can look at the TabIndex Property for all the control one by one from the downloaded example. Now we can run the page & hit the Tab key consecutively to watch how focus shifts from one control to another control in a sequential order. The numbers which we set in the TabIndex Property for each control defines this sequential order. We also can experiment pressing Shift + Tab combination to see control focus happening in the reverse order.

3.2 Label’s AssociatedControlId Property

One can set the AssociatedControlId Property to a label to link a control with it. So when Asp.Net sees current index belongs to a label, it checks this property to see where to focus for the user input. Since a label control will not receive focus, we set this property to a control where focus is meaningful. For example, we set AssociatedControlId Property of the Name label to the text box next to it. We can check this property for each label control from the downloaded example.

3.3 DefaultFocus Property

DefaultFocus property  is used to set focus to a particular control when the user interface is loaded and shown initially.

3.4 DefaultButton Property

The DefaultButton Property can link the Enter Key stroke to a click event of a Push Button. A Form can have one Default Button. Now, we have a look at Example Web Form; if the person typed a product name and hits Enter Key, he or she expects it will trigger the Search Button click not the Claim Button click. So, in that case, product name label, the text box for the product name and the Search Button is kept in a panel control so they are in a group together. First, we place a panel (Container) on the Form and then we drop the above said three controls on it. Because of the controls grouped under a panel, we can set two DefaultButton Properties; One is for the Form and another one is for the Panel. Now we can run the application, fill something on the Claim Form, and hit Enter Key. Run again, put something in the product name text box and press Enter Key. We can observe, how current control focus automatically hooks the different Button click with the Enter Key Press.

4. Complete Code Example – C# Code Behind

In the code we use <br/> tag to form multiple lines of text in the yellow-colored label control. We also use the focus method of control to set the focus on it and run-time. Rest of the code is self-explanatory and there is nothing new to specify. The code is below:

You can download the example from the download link here: Download Example from Google Drive

The example code was developed in Visual Studio 2005 and If you have latest version, say yes to the conversion wizard.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: