How to set the button that responds to the Enter key (default button) in an ASP.Net page

By George Mihaescu

Summary: this article explains how to set the button that responds to the user pressing Enter in an ASP.Net page. The solution offered works across browsers (tested on IE 6 & 7, Firefox 1.x & 2.0).

The problem

You have an ASP.Net page that has multiple logical forms, and you’d like each logical form to have a default button. For example, this site has the search text box with the Find button, as well as the login / password text boxes with the Login button. Depending where the user is entering his input, you’d like the Enter key to either cause the Find button or the Login button to fire a click event.

The solution

The solution consists in having the controls that make up each of the logical form contained in a div tag (or an ASP.Net panel if you need to access it easily from the code). Then add a client-side handler to the onclick even of that div container and that handler should call the .Net supplied javascript function WebForm_FireDefaultButton. For example, in the .aspx file:

<div id="loginLogicalForm"

onkeypress="javascript:return WebForm_FireDefaultButton(event, LOGIN_BUTTON_ID)">

<!--your login controls here -->

</div>

<div id="searchLogicalForm"

onkeypress="javascript:return WebForm_FireDefaultButton(event, FIND_BUTTON_ID)">

<!--your search controls here -->

</div>

The second parameter of the WebForm_FireDefaultButton is the client-side ID of the button that must be the “default” one (i.e. the one that fires the click event when the user presses Enter). In many cases (e.g. when using master pages, or user controls) the ID of each of the buttons is not the ID you assigned to the button at design time (.Net creates unique client-side IDs for each control that is used within a user control or child page –which is essentially a special case of a user control- based on the ID of its parent control). Therefore you will need on the server-side to generate a javascript variable that is assigned the actual client ID of each of the buttons; you can do this in the Page_Load method on the server-side, for example (in the corresponding .cs file):

protected void Page_Load(object sender, EventArgs e)

{

//set the JS variables with the IDs of the buttons

if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(),

    "MasterJS"))

    {

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MasterJS",

                                                       CreateStartupScript());

    }

}

private string CreateStartupScript()

{

StringBuilder stb = new StringBuilder();

    stb.Append("\n<script language=\"javascript\">\n<!--\n");

    stb.Append("var LOGIN_BUTTON_ID = \"");

    stb.Append(buttonLogin.ClientID);

    stb.Append("\";\n");

    stb.Append("var FIND_BUTTON_ID = \"");

    stb.Append(buttonFind.ClientID);

    stb.Append("\";\n");

    stb.Append("-->\n</script>\n");

return stb.ToString();

}

This code produces the two javascript variables that are assigned to the values of the real client-side IDs of the buttons we need in the onclick javascript handlers listed above.