Utilizing DefaultFocus to Enhance User Experience
One of the cool features of ASP.NET 2.0 that I love to use if the DefaultFocus property of the Form object. Combining it along with the DefaultButton property can go a long way to enhancing the user experience on your web sites.
The DefaultFocus property accepts a String value that allows it to reference the control you want to set focus to. This can be accessed by calling the control’s UniqueId property, which returns a string with the full name of the control. This is important because there might be multiple txtFirstName textboxes in a grid or some other parent child control structure. A UniqueId would look something like ctl00$ContentPlaceHolder_MyRepeater$MyRepeater1$txtFirstName.
I am finding that my clients are very satisfied with the use of these two properties. But I found a very cool use for the DefaultFocus property this week. You can use the DefaultFocus property in the event handler of an AutoPostback control. For example if you have a DropDownList that has a SelectedIndexChanged event handler you could direct the default focus to an appropriate control based on the selected value.
Partial Class Chapter_4_DefaultButtonandDefaultFocus
Inherits System.Web.UI.Page
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
If DropDownList1.SelectedValue > 1 Then
TextBox1.Visible = False
TextBox2.Visible = True
MyBase.Form.DefaultFocus = TextBox2.UniqueID
Else
TextBox1.Visible = True
TextBox2.Visible = False
MyBase.Form.DefaultFocus = TextBox1.UniqueID
End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
TextBox1.Visible = False
TextBox2.Visible = False
End Sub
End Class
In my particular circumstance I was hiding and displaying controls depending on the choice in a DropDownList. For example you may want to know a student’s SSN if they are a new admission or their StudentId if they are an existing student. In this case I might have a row in my form for the SSN and a row for the StudentId and depending on the selection of the student type from a drop-down I would display the proper field and corresponding row. To make the form easier to navigate I can use the DefaultFocus property to set the focus to the newly displayed textbox to collect the information I want. I have made the choice for the user much easier to know what to do next too.
Let’s face it a typical software user is lazy. Our job is to make their use of our applications as easy and painless as possible. Using these two properties if key to accomplishing this task, and they are very easy to implement.