How to set multiple default button in ASP.NET

        In my previous post I mentioned the one way to set default button in ASP.NET. There are few other methods also.  One of them is to use asp panel and set its DefaultButton property. When we need to set multiple default buttons on single page we can do it by using asp panels. Lets consider that you have login control and search control on same page.  User must be redirect to proper page while he press enter on search and login control. Lets look at following code,

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

    <table width="50%" cellpadding="0" cellspacing="0">

        <tr>

            <td>

                Search :

            </td>

            <td>

                <asp:TextBox ID="txtSerach" runat="server"></asp:TextBox>

            </td>

            <td colspan="2">

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

            </td>

        </tr>

    </table>

</asp:Panel>

Fig - (1) Default Button with asp panel in ASP.NET

        You can add multiple asp panel and set default button for each panel. I found this as the easiest way to set multiple default button in asp.net.

         Lets look at how default button works. First step is to observe the rendered HTML,

<div id="pnlSearch" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">

    <table width="50%" cellpadding="0" cellspacing="0">

        <tr>

            <td>

                Search :

            </td>

            <td>

                <input name="txtSerach" type="text" id="txtSerach" />

            </td>

            <td colspan="2">

                <input type="submit" name="btnSearch" value="Search" id="btnSearch" />

            </td>

        </tr>

    </table>                        

</div>

Fig - (2) HTML code for Default Button with asp panel in ASP.NET

           ASP panel is rendered as DIV.  You may have observer that onkeypress event is added to DIV, onkeypress events calles WebForm_FireDefaultButton(event, 'btnSearch') function. ASP.NET automatically includes WebForm_FireDefaultButton function when default button property is set.   WebForm_FireDefaultButton takes button's ClientID as one of the argument and second argument is event. As Click is the default event of button, button click event will be fired on post back.

          Now take a look at WebForm_FireDefaultButton function,

function WebForm_FireDefaultButton(event, target) {

    if (event.keyCode == 13) {

        var src = event.srcElement || event.target;

        if (!src || (src.tagName.toLowerCase() != "textarea")) {

            var defaultButton;

            if (__nonMSDOMBrowser) {

               defaultButton = document.getElementById(target);

            }

            else {

                defaultButton = document.all[target];

            }

            if (defaultButton && typeof(defaultButton.click) != "undefined") {

                defaultButton.click();

                event.cancelBubble = true;

                if (event.stopPropagation) event.stopPropagation();

                return false;

            }

        }

    }

    return true;

}

Fig (3) - WebForm_FireDefaultButton function included with default button

        When user press the enter key while the focus is set to any control within DIV it calls WebForm_FireDefaultButton function.

Few interesting articles you may like to read,

http://scottonwriting.net/sowblog/posts/13698.aspx

http://weblogs.asp.net/rternier/archive/2007/10/17/updatepanel-firefox-and-the-defaultbutton.aspx

http://forums.asp.net/t/1409941.aspx 

Happy Programming !!!