Using Client-side Script to Focus Controls in ASP.NET
Many users want Web applications to be as responsive as Windows applications. With Windows, you get some really nice default behaviors and with the Web you get some really nice deployment features. Generally, the ease of deployment—update a Web page and every user gets the update—doesn't come cheaply with Windows applications, and default, user-friendly features such as "focusing" control behavior—call SetFocus in Windows—doesn't come cheaply with Web applications. Usability is a nice benefit of developing for Windows Forms; deployment is a nice feature of Web Forms.
A user performs a task that causes your Web application to post back to the server. When the Web Form is recreated on the server, the user has to manually reposition the focus to their last point of interest. On a simple page with a few controls, this is easy enough; however, if you are building a complex Web application, repositioning the focus may become a nuisance issue.
Listing 1: Pseudo-code to focus the same control on the client.
Registering the Startup Script
ASP.NET pages contain a method named RegisterStartupScript. By invoking Page.RegisterStartupScript, we can inject a block of script that will run just before the page is rendered in the browser. The arguments we need to pass to RegisterStartupScript are a unique name for the script block and a properly formatted block of script.
To solve this problem I defined a utility routine named SetFocusControl that accepts the string name of the control to focus. SetFocusControl inserts the control to focus in the formatted script string and Page.RegisterStartupScript inserts the formatted script into the page. Listing 2 contains the implementation of SetFocusControl and Listing 3 shows the HTML of a very simple Web page illustrating the placement of the injected code block. All that remains for you to do is to call SetFocusControl in your Web Page's code-behind prior to posting the page back. Suitable places for calling SetFocusControl include postback points, such as button clicks.
Listing 2: The implementation of SetFocusControl.
Listing 2 uses the Chr(34) function to insert the double-quote into the preformatted script block to embed double-quotes into the script block. Calling SetFocusControl(control.ClientID)—for example, SetFocusControl(TextBox2.ClientID)—results in the script block shown in Listing 3 to be added to the rendered HTML.
Listing 3: The dynamically rendered startup script block.
Listing 3 shows the dynamically rendered script. As the page is read by the browser, the preceding block of script will run and the control passed to getElementById will have the focus.
Customers usually want specific usability features and seldom care about the details. Often, things that seem easy to do are harder than a customer would expect. By sharing techniques, we can provide features without a lot of re-innovation.
As an aside, one would expect setting the focus to exist in ASP.NET controls, but if you check the help documentation for Web controls, you will find this capability does not exist. Perhaps we will get it in future versions of ASP.NET.
About the Author
Paul Kimmel is a software architect, writer, and columnist for codeguru.com. Look for his recent book Visual Basic .NET Power Coding from Addison-Wesley on Amazon.com. Paul Kimmel is available to help design and build your .NET solutions and can be contacted at email@example.com.
# # #