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

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 2

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 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

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 5

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 6

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>