Co-Sponsored by: Latest Features  • Custom Criteria  • JSON and XML  • Build a Message Box the AJAX Way: Part II  • Global Events  • Convention Over Configuration Article Rating Rate this article on a scale from 0 to 5 5 Best 4   3   2   1   0 Worst Email Tell a friend about this article!

UI Tip

LANGUAGES: VB .NET

ASP.NET VERSIONS: 1.0 | 1.1

Get Focused

Make keyboard-friendly forms by ensuring the control you want has focus when the page loads.

By Brad McCabe

One of the most common questions I get asked by developers is how to set focus to a particular control when a form loads. By setting focus to a control you enable the end user to begin typing instead of having to click on a form or control. With a little code, you can even make this dynamic and data-driven.

To make this possible you need to use the ClientID property of any ASP.NET control. With the correct script, you can call the HTML element's Focus method with some JavaScript code using the ClientID as the bridge between the server-side processing and the client-side code.

Add the following procedure to your Web Form or your custom base class (see related tip on custom base classes at http://www.aspnetpro.com/NewsletterArticle/2003/05/asp200305mc_l/asp200305mc_l.asp):

Private Sub SetFocus(ByVal FocusControl As Control)

    Dim Script As New System.Text.StringBuilder

    Dim ClientID As String = FocusControl. ClientID

    With Script

      .Append("<script language='javascript'>")

      .Append("document.getElementById('")

      .Append(ClientID)

      .Append("').focus();")

      .Append("</script>")

    End With

    RegisterStartupScript("setFocus", Script.ToString())

End Sub

Before you use this function, let's look at what it's doing. Start by passing a reference into the control that you want to utilize. The function uses this reference to obtain the ClientID of the control.

After obtaining the ClientID the function builds a simple JavaScript line to get a pointer to the HTML object that the control will render on the client side. With the pointer the JavaScript will call the focus method of the object to set focus to it.

After the JavaScript is written the function will use the RegisterStartupScript method from ASP.NET to cause this code to fire when the page loads in the client side browser (see related tip at http://www.aspnetpro.com/NewsletterArticle/2003/05/asp200305mb_l/asp200305mb_l.asp).

Now that you know what the SetFocus function does, let's look at two ways to use it. The simplest approach is to call the function to set focus to control on the page load event:

Private Sub Page_Load( ... )

  If IsPostBack Then Exit Sub

  SetFocus(TextBox2)

End Sub

In this code, the TextBox2 control receives focus when the page loads. This could be done dynamically or in response to an event, as the following command button code shows:

Private Sub Button1_Click( ... )

   SetFocus(TextBox3)

End Sub

This code will set the focus to TextBox3 whenever Button1 is clicked.

With a few easy lines of server-side code you can control the focus on a Web Form as the page loads in the browser. Setting focus to a control lets you make your application interface more productive and more keyboard-friendly for data entry.

Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at mailto:uitips@aspnetPRO.com.

This article's sample code is available for download.

Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at mailto:uitips@aspnetPRO.com.