O'Reilly logo

ASP.NET 2.0: A Developer's Notebook by Wei-Meng Lee

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Set the Focus of Controls

In earlier versions of ASP.NET, assigning focus to a control involves writing client-side script (such as JavaScript). In ASP.NET 2.0, this process has been much simplified, and you can now set the focus of a control via its Focus( ) method. Consider the example shown in Figure 1-10. If the user clicks on the Single radio button, you would expect the focus to now be assigned to the Age text box. If the Married option is selected, the Spouse Name text box should get the focus.

Setting the focus of controls

Figure 1-10. Setting the focus of controls

Note

Look, no JavaScript! Now you set the focus of controls using the new Focus property.

How do I do that?

To try out the new Focus( ) method, work through the following steps to implement the form shown in Figure 1-10.

  1. In Visual Studio 2005, create a new ASP.NET 2.0 web application and name it C:\ASPNET20\chap01-ControlFocus.

  2. Add a radio button list and two text box controls to the default Web Form and give them the names shown in Figure 1-11.

    Populating the default form with the various controls

    Figure 1-11. Populating the default form with the various controls

  3. Populate the RadioButtonList with two items: Single and Married. To do so, switch to Source View and add the following bold lines:

    <asp:RadioButtonList ID="rblMaritalStatus" 
         runat="server" AutoPostBack="True">
       <asp:ListItem>Single</asp:ListItem>
                         <asp:ListItem>Married</asp:ListItem>
    </asp:RadioButtonList><br />
  4. To ensure that the Spouse Name text box gets the focus when the user selects the Married radio button, and the Age text box gets the focus when the user selects the Single radio button, you need to set the AutoPostBack property of the RadioButtonList control (rblMaritalStatus) to true. This can be done either in the Tasks Menu of the RadioButtonList control (check the Enable AutoPostBack option) or via the Properties window.

  5. To implement the desired focus rules described in the previous step, double-click the RadioButtonList control to reveal the code-behind, and add the following code to the page:

    Protected Sub rblMaritalStatus_SelectedIndexChanged( _
              ByVal sender As Object, _
              ByVal e As System.EventArgs) _
              Handles rblMaritialStatus.SelectedIndexChanged
        If rblMaritialStatus.SelectedValue = "Single" Then
            txtAge.Focus( )
        Else
            txtSpouseName.Focus( )
        End If
    End Sub

Tip

You can also set the focus of a control through the SetFocus( ) method of the Page class. The syntax is:

Page.SetFocus(controlName)

What about...

...setting a default button on a Web Form?

In ASP.NET 2.0, you can set a default button on a form. For example, Figure 1-12 shows a page with two TextBox controls and two Button controls. You can configure the Submit button to be the default button so it is automatically clicked when a user presses the Enter key.

Setting the Submit button as the default button of the form

Figure 1-12. Setting the Submit button as the default button of the form

To try this out on your own, follow these steps:

Note

In ASP.NET 2.0, you can now set a default button on a page so that when the user presses the Enter key the button is automatically invoked.

  1. Create a form like the one shown in Figure 1-13.

    A Web Form with two TextBox controls and two Button controls

    Figure 1-13. A Web Form with two TextBox controls and two Button controls

  2. Switch the Web Form to Source View and then add the lines of code shown in bold. The defaultfocus attribute sets the control that will be assigned the focus when the form is loaded. The defaultbutton attribute sets the button to be activated when the Enter key is pressed:

    <form id="form1" runat="server"
       defaultbutton="btnSubmit" 
       defaultfocus="txtEmail"
       >
    <div>
        Email:
        <asp:TextBox ID="txtEmail" runat="server" Width="174px"></asp:TextBox>
        <br />
        Password:
        <asp:TextBox ID="txtPassword" runat="server" Width="153px" 
           TextMode="Password"></asp:TextBox>
        <br />
        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" /><br />
        <br />
        
    </div>
    </form>
  3. Press F5 to load the form; note that the focus is on the Email text box (see Figure 1-14), and the Submit key is set as the default button.

The Email text box has the focus, and the Submit button is the default button

Figure 1-14. The Email text box has the focus, and the Submit button is the default button

Where can I learn more?

The Focus( ) method in ASP.NET 2.0 works on the server side; hence, every time you need to set the focus of a control, you need to initiate a postback. If you want to set the focus of controls on the client side without a postback, check out the following two links:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required