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.
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
This can be done either in the Tasks Menu of the RadioButtonList
control (check the Enable AutoPostBack option) or via the Properties
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
You can also set the focus of a control through the SetFocus( ) method of the Page class. The syntax is:
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:
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: