Set Default Button for enter key press and set Default Focus in textbox in ASP.NET

Introduction:

While working with Asp.NET it is needed to set default button for enter key in entry forms. We just press the enter button, default button’s click event will fire automatically.

In this article I am going to explain how to set specific button as default button among multiple buttons to respond to enter key press  and set focus in specific text box on page load in Master Page’s Content page.

If there are no. of input controls and button on page, we can set default button and  focus on particular TextBox on page load.

 For example we have a search option in web page having a textbox as shown in above image and we want to trigger search button on enter key press.

This can be done by using two Methods:

1. By setting DefaultFocus and DefaultButton property through code in code file.
2. By Placing  all the controls in Panel control and setting its DefaultButton property. 

Source Code:

Design Section:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">   

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

            <fieldset style="width:230px;">

        <legend>           

            Set Default Button And Focus On TextBox

            </legend>

        <table>

            <tr><td><asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox></td>

                <td><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>

                <td><asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>

            </tr>           

        </table>

    </fieldset>

    </asp:Content>

Method 1: Setting DefaultFocus and DefaultButton property through code in code file as

protected void Page_Load(object sender, EventArgs e)

    {

        this.form1.DefaultFocus = txtSearch.ClientID;

        this.Form.DefaultButton = btnSearch.UniqueID;

    }

Method 2:

 Placing all the controls in Panel control and setting its DefaultButton property

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">   

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:Panel ID="Panel1" runat="server" DefaultButton="btnSearch">

        <fieldset style="width:230px;">

        <legend>           

            Set Default Focus and Default Button

            </legend>

        <table>

            <tr><td><asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox></td>

                <td><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /></td>

                <td><asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>

            </tr>           

        </table>

    </fieldset>

        </asp:Panel>

</asp:Content> 

Now Set DefaultButton property in panel and DefaultFocus property is not there.  One point to remember that DefaultButton will only work if focus is set to input control which is inside the panel.  So we need to set focus in textbox also as:

In page load event of code file write as: 

protected void Page_Load(object sender, EventArgs e)

    {

        //Set default focus in Search textbox

        this.Form.DefaultFocus = txtSearch.ClientID;

        //or you can also set focus in search textbox as:

        //txtSearch.Focus();

    }