Button Click Event of Web User Control that is placed inside a popup not firing - Asp.net Webforms

Question

I have a user Control named as Login.ascx having markup

 <div class="row">
        <div class="small-12 medium-6 columns">
            <p>Login Here</p>
            <label>
                Email
                        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            </label>
            <label>
                Password
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
            </label>
            <div style="width: 95%; margin: 10px auto">
                <asp:Button ID="btnLogin" CssClass="expand button" runat="server" Text="Log in" OnClick="BtnLogin_Click" />
            </div>
            <p>Not Registered Yet? <a href="../../Register.aspx">Register here &raquo</a></p>
        </div>
    </div>

C# code for user control is

protected void BtnLogin_Click(object sender, EventArgs e)
    {
        int storeId = 1;
        using (var db = new SExpressEntities())
        {
            string password = PasswordManager.Encrypt(txtPassword.Text);
            var user =
                db.tbl_Customers.FirstOrDefault(
                    cust => cust.Email == txtEmail.Text && cust.Pwd == password && cust.StoreId == storeId);
            Response.Redirect(HttpContext.Current.Request.RawUrl, true);
        }
    }

I have put this user control on a div in my master page Main.master

 <div id="loginModel" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <uc1:Login runat="server" ID="Login" />
        <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>

This is a foundation popup model which opens when I click on a button, but when i enter username and password than click on Login button, it does not fire

However if i drag the same user control in an independent page eg Test.aspx and run it, than the Click event of button works fine.

Answer 1

If this is the same user control Login.ascx that you put in master page and on child page ie test.aspx. your markup says that on master page you made it a popup control.

If you see the rendered html of both the user control portions, the user control portion on the page will appear in the form tag, but the control portion with in the master page comes outside the form tag due to making it popup, that's why the button click doesn't fire.

How to solve your problem, this link might help in this regard Foundation Modal issue with asp.net

Hope it helps.

Answer 2

Just paste the below script in your master page

<script>
     $(document).foundation('reveal', { root_element: 'form' });  
</script>

this perfectly solved my problem as it creates the html of the popup inside form which ensures the click even fired

Answer 3

How your popup component works? ie Bootstrap popover component uses a hidden div to show popup content. Therefore when you put a form on it, events does not bind to popup content because content is replaced from another place.. You have try to find problem on your popup component.