DefaultButton of 'panelName' must be the ID of a control of type IButtonControl

asp.net, jquery, master-pages, twitter-bootstrap, twitter-bootstrap-3

Solution

The problem is that the `asp:login` control modifies the id's of it's children, so the `asp:panel` control does not know where to look to find the new `DefaultButton` id.

Here's a simplified version that reproduces the issue:

<asp:Panel ID="AZloginPanel" runat="server" DefaultButton="LoginButton">
    <asp:Login ID="LoginUser" runat="server" >
        <LayoutTemplate>
            <asp:TextBox ID="UserName" runat="server" />
            <asp:TextBox ID="Password" runat="server" TextMode="Password" />
            <asp:Button ID="LoginButton" runat="server" Text="Log In" />
        </LayoutTemplate>
    </asp:Login>
</asp:Panel>

If you want to use a DefaultButton for a LoginControl, you can do one of two things:

1. Nest the panel inside of the login control:

<asp:Login ID="LoginUser" runat="server" >
    <LayoutTemplate>
        <asp:Panel runat="server" DefaultButton="LoginButton">
            <asp:TextBox ID="UserName" runat="server" />
            <asp:TextBox ID="Password" runat="server" TextMode="Password" />
            <asp:Button ID="LoginButton" runat="server" Text="Log In" />
        </asp:Panel>
    </LayoutTemplate>
</asp:Login>

2. Build the ID with the LoginControlID then `$` then Button ID:

<asp:Panel ID="AZloginPnl" runat="server" DefaultButton="LoginUser$LoginButton">
    <asp:Login ID="LoginUser" runat="server" >
        <LayoutTemplate>
            <asp:TextBox ID="UserName" runat="server" />
            <asp:TextBox ID="Password" runat="server" TextMode="Password" />
            <asp:Button ID="LoginButton" runat="server" Text="Log In" />
        </LayoutTemplate>
    </asp:Login>
</asp:Panel>

Problem

I am developing a website on ASP.NET and using bootstrap for the design. I'm using modal fade class (like a popup) for user to login. Here's my code: ``` <div class="modal fade" id="login" role="dialog"> <asp:Panel ID="AZloginPanel" runat="server"> <div class="modal-dialog"> <div class="modal-content"> <div class="form-horizontal"> <div class="modal-header"> <h4>Login</h4> </div> <div class="modal-body"> <asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false"> <LayoutTemplate> <span class="failureNotification"> <asp:Literal ID="FailureText" runat="server"></asp:Literal> </span> <asp:ValidationSummary ID="LoginUserValidationSummary" runat="server" CssClass="failureNotification" ValidationGroup="LoginUserValidationGroup" /> <div class="accountInfo"> <fieldset class="login"> <div class="form-group"> <asp:Label ID="UserNameLabel" CssClass="col-lg-2 control-label" runat="server" AssociatedControlID="UserName">Username:</asp:Label> <div class="col-lg-10"> <asp:TextBox ID="UserName" runat="server" CssClass="form-control" placeholder="Username"></asp:TextBox> </div> <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator> </div> <div class="form-group"> <asp:Label ID="PasswordLabel" CssClass="col-lg-2 control-label" runat="server" AssociatedControlID="Password">Password:</asp:Label> <div class="col-lg-10"> <asp:TextBox ID="Password" runat="server" CssClass="form-control" placeholder="Password" TextMode="Password"></asp:TextBox> </div> <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" CssClass="failureNotification" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator> </div> <p> <asp:CheckBox ID="RememberMe" runat="server" /> <asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" CssClass="inline">Keep me logged in</asp:Label> </p> </fieldset> <div class="modal-footer"> <p class="pull-left"> <asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false" NavigateUrl="~/Account/Register.aspx">Register</asp:HyperLink>if you don't have an account. </p> <asp:Button ID="CloseModal" runat="server" CssClass="btn btn-info" CommandName="Close" Text="Close" /> <asp:Button ID="LoginButton" runat="server" CssClass="btn btn-primary" CommandName="Login" Text="Log In" ValidationGroup="LoginUserValidationGroup" /> </div> </div> </LayoutTemplate> </asp:Login> </div> </div> </div> </div> </asp:Panel> </div> ``` When I set `DefaultButton="LoginButton"` in `AZloginPanel` panel, I get the following error: The DefaultButton of 'AZloginPanel' must be the ID of a control of type IButtonControl. I'm lost and I've tried everything but it seems I'm at dead end. Any ideas?

Original source