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.
Note: Look, no JavaScript! Now you set the focus of controls using the new Focus property.
To try out the new Focus( ) method, work through the following steps to implement the form shown in Figure 1-10.
In Visual Studio 2005, create a new ASP.NET 2.0 web application and name it C:\ASPNET20\chap01-ControlFocus.
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.
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 />
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.
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)
...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.
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.
Create a form like the one shown in Figure 1-13.
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>
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 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: