Login in bootstrap modal

Question

Hello,

 

I am a beginner to asp.net. I am currently working on a school project and I am using bootstrap modals for login and register. I am using the login and create user wizard and they work fine if i use them in a normal webform but the moment i insert them dynamically in my modal and press the button I get an error (

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
)

<form id="formLogin" runat="server">

       <%-- Modal --%>

       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               <asp:Label ID="lblModalTitle" runat="server" CssClass="modal-title">Log in</asp:Label>
           </div>

           <div class="modal-body">

               <asp:Login ID="Login2" runat="server" CssClass="User" DestinationPageUrl="~/Login/Home.aspx">
                   <LayoutTemplate>
                       <div id="loginform" class="form-horizontal" role="form">
                           <div class="input-group">
                               <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                               <asp:TextBox runat="server" ID="UserName" CssClass="form-control" placeholder="User Name"></asp:TextBox>
                           </div>
                           <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName" Display="Dynamic" ValidationGroup="Login" ErrorMessage="Please enter an User Name" CssClass="error">Please enter an User Name</asp:RequiredFieldValidator>

                           <div class="input-group">
                               <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                               <asp:TextBox runat="server" ID="Password" CssClass="form-control" placeholder="Password"
                                   TextMode="Password"></asp:TextBox>
                           </div>
                           <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="Password" Display="Dynamic" ValidationGroup="Login" ErrorMessage="Please enter a password" CssClass="error">Please enter a password</asp:RequiredFieldValidator>

                           <div class="checkbox">
                               <label>
                                   <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me" />
                               </label>
                           </div>
                           <div class="form-group">
                               <div>
                                   Don't have an account!
                               <%--Pressing the link will take us to the desired modal by using a javascript function --%>
                                   <a href="javascript:$('#myModal .modal-content').load('Modals/modalDefaultRegister.aspx',function(e){$('#myModal').modal('show');});">Register here</a>
                               </div>

                           </div>
                           <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
                           <asp:Button ID="LoginButton" runat="server" CommandName="Login" class="btn btn-primary" ValidationGroup="Login" Text="Log in" UseSubmitBehavior="false"  />
                       </div>
                   </LayoutTemplate>

               </asp:Login>

           </div>
           <div class="modal-footer">
           </div>
       </div>

   </form>

 

 Any ideas on where the problem is and how can I solve it?

Thank you