Utilizing DefaultFocus to Enhance User Experience
Last Updated -
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
senderAs
Object
,ByVal
eAs
System.EventArgs)Handles
DropDownList1.SelectedIndexChanged
If
DropDownList1.SelectedValue > 1Then
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
senderAs
Object
,ByVal
eAs
System.EventArgs)Handles
Me
.LoadTextBox1.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.