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.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel