Submit Login control button when I hit Enter

Question

I have an ASP.NET web page with a Login control on it. When I hit Enter, the Login button doesn't fire; instead the page submits, doing nothing.

The standard solution to this that I've found online is to enclose the Login control in a Panel, then set the Panel default button. But apparently that doesn't work so well if the page has a master page. I've tried setting the default button in code with control.ID, control.ClientID, and control.UniqueID, and in each case I get:

The DefaultButton of panelName must be the ID of a control of type IButtonControl.

I'm sure there's a way to do this with JavaScript, but I'd really like to do it with plain old C# code if possible. Is it possible?

Answer 1

This should be helpful: http://weblogs.asp.net/jgalloway/archive/2007/10/03/asp-net-setting-the-defaultbutton-for-a-login-control.aspx

You can use the following to reference the button within the Login control template:

DefaultButton="Login$LoginButton"

Basically, you can define a DefaultButton not just on the Form level, but also on individual Panel level, as long as the focus is within the panel, the default button for the panel will be used if you hit "Enter"

Answer 2

Great answer by Blend Master! Essentially just use Panel.DefaultButton, but I want to clear up the confusion about what exactly you need to set it to. It's not just ".ID" or ".UniqueID" - the documentation is a bit lacking on this.

You must set it to the UniqueID of the button, relative to the Panel's naming container UniqueID. For example, if your panel UniqueID is"Body$Content$pnlLogin" and your login button's UniqueID is "Body$Content$ucLogin$btnLogin" (because it's inside a control called "ucLogin") then you need to set Panel.DefaultButton to "ucLogin$btnLogin".

You can work this out in code as follows. (I couldn't find any class library method for this, but let me know if you find one.)

void SetDefaultButton(Panel panel, IButtonControl button)
{
    string uniqueId = ((Control)button).UniqueID;
    string panelIdPrefix = panel.NamingContainer.UniqueID + Page.IdSeparator;

    if (uniqueId.StartsWith(panelIdPrefix))
    {
        uniqueId = uniqueId.Substring(panelIdPrefix.Length);
    }

    panel.DefaultButton = uniqueId;
}

Answer 3

you have to add something like this in page load...

txtPassword.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + lnkSubmit.UniqueID + "','')")

the password textbox has an onKeyPress attribute added that will force a doPostBack on the submit button if the "Enter" key is pressed. This simulates clicking the submit button.

Answer 4

Yo, i found this solution on the net, it worked for me.

 <asp:Panel ID="panelLogin" runat="server" DefaultButton="Login1$LoginButton">
 <asp:Login ID="Login1" runat="server" >
 <LayoutTemplate>
 ...
 <asp:Button  ID="LoginButton" .../>
 </LayoutTemplate>
 </asp:Login>
 </asp:Panel>

Answer 5

Assuming Login1 is the ID of your login control.

For 'enter' anywhere on the page to submit, add to init in your codebehind:

protected void Page_Init(object sender, EventArgs e)
{
    this.Form.DefaultButton = Login1.FindControl("LoginButton").UniqueID;
}

For 'enter' to only submit when inside the login control, wrap the login control in an asp:Panel and set DefaultButton="Login1$LoginButton" on the panel

Both approaches work fine with master pages.

Answer 6

Sounds like the login button is being spat out as <input type="button"> rather than <input type="submit">. You could always template the LoginControl and add the submit button, getting rid of the hideous default markup at the same time!

If you have to use Javascript to fix this something is seriously wrong! (but then it sounds like you know this)

Answer 7

To add a bit more detail and instructions to the posts above, here's a walkthrough:

In the markup of any pages that load your login control, you need to update the html in two places.

First, in the page's form tag, you need to set the default button. See below for how I came up with the name.

<form id="form1" runat="server" defaultbutton="ucLogin$btnSubmit">

(Naming: The ucLogin part before the dollar sign needs to be the ID of your login control, as declared further down in your page. The btnSubmit part needs to be the ID of the button as it’s named in the login control’s html)

Next, you need to wrap the declaration of your login control in a panel, and set it’s DefaultButton property, as well:

<!-- Login Control - use a panel so we can set the default button -->
<asp:Panel runat="server" ID="loginControlPanel" DefaultButton="ucLogin$btnSubmit">                         
     <uc:Login runat="server" ID="ucLogin"/>                                                    
</asp:Panel>

That should do it for you.

Answer 8

Based on your good answers, made a custom control that
enables a Page to have several default buttons based on which panel which is in focus.
It overrides Panel's OnLoad method and DefaultButton property.

public class DefaultButtonPanel:Panel
{
    protected override void OnLoad(EventArgs e)
    {
        if(!string.IsNullOrEmpty(DefaultButton))
        {
            LinkButton btn = FindControl(DefaultButton) as LinkButton;
            if(btn != null)
            {
                Button defaultButton = new Button {ID = DefaultButton.Replace(Page.IdSeparator.ToString(), "_") + "_Default", Text = " "};
                defaultButton.Style.Add("display", "none");
                PostBackOptions p = new PostBackOptions(btn, "", null, false, true, true, true, true, btn.ValidationGroup);
                defaultButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(p) + "; return false;";
                Controls.Add(defaultButton);
                DefaultButton = defaultButton.ID;
            }
        }
        base.OnLoad(e);
    }

    /// <summary>
    /// Set the default button in a Panel.
    /// The UniqueID of the button, must be relative to the Panel's naming container UniqueID. 
    /// 
    /// For example:
    /// Panel UniqueID is "Body$Content$pnlLogin" 
    /// Button's UniqueID is "Body$Content$ucLogin$btnLogin" 
    /// (because it's inside a control called "ucLogin") 
    /// Set Panel.DefaultButton to "ucLogin$btnLogin".
    /// </summary>
    /// <param name="panel"></param>
    /// <param name="button"></param>
    public override string DefaultButton
    {
        get
        {
            return base.DefaultButton;
        }

        set
        {
            string uniqueId = value;
            string panelIdPrefix = this.NamingContainer.UniqueID + Page.IdSeparator;
            if (uniqueId.StartsWith(panelIdPrefix))
            {
                uniqueId = uniqueId.Substring(panelIdPrefix.Length);
            }
            base.DefaultButton = uniqueId;
        }
    }      
}

Answer 9

A solution is provided by embedding the login control inside the panel control and setting the defaultbutton of the panel to the Parent$ID of the button inside Login control works. There's the code:

<asp:Panel id="panel1" runat="server" DefaultButton="Login1$LoginButton">
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3">
<LayoutTemplate>
<table>
...
<tr>
<td><asp:Button ID="LoginButton" runat="server" /></td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</asp:Panel>