Sunday, April 10, 2011

[ASP.Net] - Default Focus and Default button in ASP.net forms


1. Introduction


In this short article, I will show the importance of setting the focus to the control. Also, I will show the example for setting the default button for a form and also set a default for group controls.

Setting focus to a control is simple known one for most of us. A focus means the control is going to receive the input from the user. If you type something, the typed stuff goes into the control which currently on focus.

The default button is mapped to the enter keystroke on your keyboard. That is, the Enter button hit will call the button pushed event of the default button.

2. About the ASP form and the Example


Have a look at the simple asp form below:




  1. When the Page loaded, the default focus is set to the textbox control next to the name label field.
  2. When the tab key is hit, the focus moves in a sequential way.
  3. When you press the Claim button, some message is displayed in the label field shown in yellow colour.
  4. When the focus is in the any of three textboxes that correspond to name or discount id or order number, hitting the enter button on your keyboard invoked claim button press
  5. The next button to the claim sets the focus to the Order number text box
  6. When the control is in the Product name textbox, hitting the enter button will invoke the search button click.

All the above stuff accomplished by the default focus and default button properties. 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 the Properties


  1. Tab index 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. This sequence is controlled by the tab index property. The framework maintains a count and increments it when a tab key is pressed. And resets it when a maximum number (Max of tab index in the form) reached. The tab index of the control is compared with this Framework count and control with the matched tab index is get focused. Now look at the tab index property for all the control one by one and run the page hit the Tab and shift + tab to experiment the result.
  2. The Associated control id property is set to each label control to move the focus to the control specified here. Because a label control usually won’t receive focus. The next box next to the label is set to the associated control.
  3. Default Focus property is used to set focus to a particular when the user interface loaded and shown initially.
  4. Default Button property can be used to link the enter button keystroke to a click event of the push button. A form can have one default button. Look at the above form; if the person typed a product name and hits enter, he does expect it will trigger the search button click not the claim button click. So in that case, the group product name label, textbox associated with it and the search button is kept in the panel control. First, a panel (Container) is placed on the form and then the three controls placed on it. Now we can have two default button properties; One for the form and one for the panel. To see the properties for the form, so to the source page and click on the form tag. I tried to pick the form from the design layout, but I cannot able to get it. Kind of searching the hidden cat “Kitty..Meow  KittyKitty Kitty..”. Well but you can easily select the panel to view its property. Now run the application, fill something on the claim form, and hit enter. Run again, put something in the product name text box and hit enter.


4. Code Explanation


The code is self-explanatory and there is nothing new to specify.

  1. One thing to mention is the usage of <br/> to form a multiline text in the label control displayed in yellow colour.
  2. To set the focus at runtime, just call the focus method of the control. The calling control will get the focus.

protected void Page_Load(object sender, EventArgs e)
{
    //Focus 001: Set the Default focus to the Name text Box
    txtName.Focus();
}
protected void txtFocustoLabel_Click(object sender, EventArgs e)
{
    //Focus 002: Set the focus to required control
    txtOrderNo.Focus();
}
protected void btnClaim_Click(object sender, EventArgs e)
{
    //Focus 003: Write some text to the Label
    LblDisplay.Text = "Discount amount Claimed! <br/>"  +
        "Name : " + txtName.Text +"<br/>" +
        "Discount Id (Found on Lucky Coupon) :" + txtDiscount.Text +"<br/>" +
        "Order No (for Reference): " + txtOrderNo.Text ;
}
protected void btnSearch_Click(object sender, EventArgs e)
{
    //Focus 004: Write Some text to the Label
    LblDisplay.Text = "Searching Product Id... <br/>" + txtProdname.Text +
        ". Please don't wait! It is Just a demo";
    txtProdname.Focus();
}



Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)