Question

I would like my login control to have a “Loading…” gif shown when a user logs in.

In order to have my login control display how I wanted, I converted it to a template. I then followed the guidance seen here: here and here to show the gif during a postback.

I’m having a couple of problems now though. When I try to sumbit an invalid login, the page does as it’s supposed to: it shows the loading gif, and then the gif goes away after the login is determined invalid. But now even when I enter a valid login it says it’s invalid. Did I mess something up when I edited the login template?

My other problem is that I have the “keepLogged” checkbox stylized. The style is being added by JQuery in the head. It shows it properly when you first go to the page, but after the postback, when the login is shown to be invalid, the style isn’t applied and it’s a normal checkbox.

Here’s the code:

<script>

    $(document).ready(function () {

        $("input[type=checkbox]").addClass("mini-switch");

    });

</script>

<form id="form1" runat="server" class="form with-margin" name="login-form">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

                <asp:UpdatePanel ID="updateLogin" runat="server" DefaultButton="mainLogin$LoginButton">
                <ContentTemplate>
                <asp:Login ID="mainLogin" runat="server" RenderOuterTable="False" onloginerror="mainLogin_LoginError">
                    <LayoutTemplate>
                        <div class="block-header">Please login</div>
                        <asp:ValidationSummary ID="LoginUserValidationSummary" runat="server"  
                        ValidationGroup="mainLogin"  CssClass="message error no-margin"
                        DisplayMode="List"/>


                        <input type="hidden" name="a" id="a" value="send">
                        <p class="inline-small-label">
                            <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName"><span class="big">User name</span></asp:Label>

                            <asp:TextBox ID="UserName" runat="server" CssClass='full-width'></asp:TextBox>

                            <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
                                ControlToValidate="UserName" ErrorMessage="User Name is required." 
                                ToolTip="User Name is required." ValidationGroup="mainLogin" 
                                Display="None" />
                        </p>
                        <p class="inline-small-label">
                            <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password"><span class="big">Password</span></asp:Label>

                            <asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass='full-width'></asp:TextBox>

                            <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
                                ControlToValidate="Password" ErrorMessage="Password is required." 
                                ToolTip="Password is required." ValidationGroup="mainLogin" 
                                Display="None" />                
                        </p>


                        <asp:Button ID="LoginButton" runat="server"  CommandName="Login" 
                        Text="Log In" type="button"
                        ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button float-right'/>


                        <p class="input-height">
                            <asp:CheckBox ID="keepLogged" runat="server" Checked="True"/> 

                            <asp:Label ID="Label1" runat="server" Text="Keep me logged in" AssociatedControlID="keepLogged" CssClass="inline"></asp:Label>
                        </p>

                    </LayoutTemplate>

                </asp:Login>
                </ContentTemplate>
                </asp:UpdatePanel>



          </div>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                    <ProgressTemplate>
                      <img alt="" src="images/lock.gif" /> <strong>Logging In...</strong>
                   </ProgressTemplate>
            </asp:UpdateProgress> 
</form>

Thanks for any help.

Answer 1

I don’t think that the built-in ASP.NET login control will work properly inside of an UpdatePanel. There are other ways to achieve the same effect, though. There’s an article here that should get you started.