Ferrysoft

Ferrysoft Help Desk

Click to learn more about Ferrysoft Help Desk

Ferrysoft Help Desk is a web based help desk solution. The Express Edition is free of charge. Click the screen shot to learn more about Ferrysoft Help Desk.

How to set focus in an ASP.NET web page

Summary

This article describes a technique for setting the focus to a particular control within an ASP.NET web page. A web designer might need this in order to position the cursor at the first input field of a web page when it is initially displayed. It isn't possible to define which control should initially receive focus when a web page opens by setting a property within ASP.NET 1.1. The technique described here utilises a JavaScript alternative to overcome this limitation of ASP.NET.

Note that the technique described will work for all versions from ASP.NET 1.1 onwards. However, ASP.NET 2.0 introduced the Page.SetFocus method which performs a similar function to the technique described here. For that reason, it is recommended that the Page.SetFocus method is used when using ASP.NET 2.0 or later.

Introduction

The technique involves generating JavaScript into the web page which causes a named control to receive focus when the web page is rendered by the user's browser.

Typically the technique is used in the Page_Load event procedure although it could be used at any point in the processing of the page.

Note that the JavaScript in the web page will only work if the user has scripting enabled.

How to develop and use the SetPageFocus procedure

The example below demonstrates how to use the technique with the Microsoft .NET Framework 2.0 or later. If the example is required for use with earlier versions of the Microsoft .NET Framework then the code will need to be adjusted in accordance with the comments contained within the example.

In the example below, the code is contained in the Code File of a web page which has a text box called TextBox1 as the control to receive initial focus. The SetPageFocus procedure is called from within the Page_Load event procedure. Notice that the TextBox1 control is passed as a parameter to the procedure. This causes the focus to move to the TextBox1 text box when the web page is displayed to the user.

Visual Basic
Partial Class setfocusvb
    Inherits System.Web.UI.Page
    Private Const CrLf As String = Microsoft.VisualBasic.Constants.vbCrLf
    Private Const Tab As String = Microsoft.VisualBasic.Constants.vbTab
    Private Const Quote As String = """"
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles Me.Load
        If Not IsPostBack Then
            SetPageFocus(TextBox1)
        End If
    End Sub
    Private Sub SetPageFocus(ByVal Control As System.Web.UI.Control)
        Dim StringBuilder As System.Text.StringBuilder
        StringBuilder = New System.Text.StringBuilder()
        StringBuilder.Append(CrLf)
        StringBuilder.Append("<script type=")
        StringBuilder.Append(Quote)
        StringBuilder.Append("text/javascript")
        StringBuilder.Append(Quote)
        StringBuilder.Append(">")
        StringBuilder.Append(CrLf)
        StringBuilder.Append("//<![CDATA[")
        StringBuilder.Append(CrLf)
        StringBuilder.Append(Tab)
        StringBuilder.Append("document.getElementById(")
        StringBuilder.Append(Quote)
        StringBuilder.Append(Control.ClientID)
        StringBuilder.Append(Quote)
        StringBuilder.Append(").focus();")
        StringBuilder.Append(CrLf)
        StringBuilder.Append("//]]>")
        StringBuilder.Append(CrLf)
        StringBuilder.Append("</script>")
        StringBuilder.Append(CrLf)
        Page.ClientScript.RegisterStartupScript( _
            GetType(String), _
            "SetFocusScript", _
            StringBuilder.ToString())
        '
        '   If using ASP.NET 1.x then replace the
        '   ClientScript.RegisterStartupScript method
        '   above with the Page.RegisterStartupScript
        '   method as follows:
        '
        '   Page.RegisterStartupScript( _
        '       "SetFocusScript", _
        '       StringBuilder.ToString())
        '
    End Sub
End Class
C#
partial class setfocuscs : System.Web.UI.Page
{
    private const string CrLf = "\r\n";
    private const string Tab = "\t";
    private const string Quote = "\"";
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!IsPostBack)
        {
            SetPageFocus(TextBox1);
        }
    }
    private void SetPageFocus(System.Web.UI.Control Control)
    {
        System.Text.StringBuilder StringBuilder;
        StringBuilder = new System.Text.StringBuilder();
        StringBuilder.Append(CrLf);
        StringBuilder.Append("<script type=");
        StringBuilder.Append(Quote);
        StringBuilder.Append("text/javascript");
        StringBuilder.Append(Quote);
        StringBuilder.Append(">");
        StringBuilder.Append(CrLf);
        StringBuilder.Append("//<![CDATA[");
        StringBuilder.Append(CrLf);
        StringBuilder.Append(Tab);
        StringBuilder.Append("document.getElementById(");
        StringBuilder.Append(Quote);
        StringBuilder.Append(Control.ClientID);
        StringBuilder.Append(Quote);
        StringBuilder.Append(").focus();");
        StringBuilder.Append(CrLf);
        StringBuilder.Append("//]]>");
        StringBuilder.Append(CrLf);
        StringBuilder.Append("</script>");
        StringBuilder.Append(CrLf);
        Page.ClientScript.RegisterStartupScript(
            typeof(string),
            "SetFocusScript",
            StringBuilder.ToString());
        //
        //  If using ASP.NET 1.x then replace the
        //  ClientScript.RegisterStartupScript method
        //  above with the Page.RegisterStartupScript
        //  method as follows:
        //
        //  Page.RegisterStartupScript(
        //      "SetFocusScript",
        //      StringBuilder.ToString());
        //
    }
}

The resultant script generated by the procedure above for the web page is shown below.

<script type="text/javascript">
//<![CDATA[
    document.getElementById("TextBox1").focus();
//]]>
</script>

Conclusion

The limitation of not being able to set focus in an ASP.NET application can be easily overcome using JavaScript.

About the author

Mike Green is the founder of Ferrysoft, a software development company specialising in Help Desk software technology.