ASP.Net Button OnClick not firing up without setting UseSubmitBehavior=“false”

Question

Good evening guys, I would like to get some help with my code, the onclick event in my register button won't fire up if I have a modal in my masterpage, but If I remove it, it works. Any suggestion on what should I do? Here is my code

<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <header class="card-header">
                    <a href="#" class="float-right btn btn-outline-primary mt-1">Log in</a>
                    <h4 class="card-title mt-2">Sign up</h4>
                </header>
                <article class="card-body">
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblLastname" CssClass="col-form-label" runat="server" Text="Lastname:"></asp:Label>
                            <asp:TextBox ID="txtLastname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>             
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblFirstname" CssClass="col-form-label" runat="server" Text="Firstname:"></asp:Label>
                            <asp:TextBox ID="txtFirstname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>       
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblUsername" CssClass="col-form-label" runat="server" Text="Username:"></asp:Label>
                            <asp:TextBox ID="txtUsername" CssClass="form-control" runat="server" MaxLength="40" required="required"></asp:TextBox>  
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblPassword" CssClass="col-form-label" runat="server" Text="Password:"></asp:Label>
                            <asp:TextBox ID="txtPassword" CssClass="form-control" runat="server" TextMode="Password" required="required"></asp:TextBox>         
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblEmail" CssClass="col-form-label" runat="server" Text="Email:"></asp:Label>
                            <asp:TextBox ID="txtEmail" type="email" CssClass="form-control" runat="server" MaxLength="50" required="required"></asp:TextBox>        
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblPhoneNumber" CssClass="col-form-label" runat="server" Text="Phone Number:"></asp:Label>
                            <asp:TextBox ID="txtPhoneNumber" CssClass="form-control" runat="server" MaxLength="11" required="required"></asp:TextBox>                   
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblGender" CssClass="col-form-label" runat="server" Text="Gender:"></asp:Label>
                            <asp:DropDownList ID="ddlGender" CssClass="form-control" runat="server">
                                <asp:ListItem Value="0">Please select your gender</asp:ListItem>
                                <asp:ListItem>Male</asp:ListItem>
                                <asp:ListItem>Female</asp:ListItem>
                            </asp:DropDownList>              
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblBirthdate" CssClass="col-form-label" runat="server" Text="Birth Date:"></asp:Label>
                            <asp:TextBox ID="txtBirthdate" type="date" CssClass="form-control" runat="server" required="required"></asp:TextBox>                           
                        </div>                     
                    </div>
                    <div class="form-row mt-4">
                        <div class="col form-group">
                            <asp:Button ID="btnClear" CssClass="btn btn-danger btn-block" runat="server" CausesValidation="False" OnClick="btnClear_Click" Text="Reset" UseSubmitBehavior="False" />
                        </div>
                        <div class="col form-group">
                            <asp:Button ID="btnRegister" CssClass="btn btn-success btn-block" runat="server" OnClick="btnRegister_Click" Text="Register" />
                        </div>                     
                    </div>
                </article>
                <div class="border-top card-body text-center">Have an account? <a href="#">Log In</a></div>
            </div>
        </div>
    </div>
</div>

And this is my code behind:

protected void btnClear_Click(object sender, EventArgs e) {
        txtFirstname.Text = "";
        txtLastname.Text = "";
        txtUsername.Text = "";
        txtPassword.Text = "";
        txtEmail.Text = "";
        txtPhoneNumber.Text = "";
        txtBirthdate.Text = "";
        ddlGender.SelectedValue = "0";
        Response.Write("<script>alert('Successfully Cleared!')</script>");
    }

    protected void btnRegister_Click(object sender, EventArgs e) {
        SqlConnection conn = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|eMerch.mdf;Integrated Security=True");
        conn.Open();
        SqlCommand cmd = new SqlCommand("uspAddUser", conn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@uName", SqlDbType.NVarChar).Value = txtUsername.Text.Trim();
        cmd.Parameters.AddWithValue("@uPassword", SqlDbType.NVarChar).Value = txtPassword.Text.Trim();
        cmd.Parameters.AddWithValue("@responseMessage", SqlDbType.NVarChar);
        cmd.ExecuteNonQuery();
        Response.Write("<script>alert('User Registration Success!')</script>");
        conn.Close();
    }

and this is my code for the modal in master page:

<div class="modal fade" runat="server" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-center modal-login">
            <asp:UpdatePanel ID="upLogin" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="avatar">
                                <img src="../Images/web/Avatar_Login.png" alt="Avatar">
                            </div>              
                            <h4 class="modal-title">Member Login</h4>   
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>       
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-danger collapse text-center" id="errorCredentials">
                                Invalid Credentials
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Username:</label>
                                <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" required="required"></asp:TextBox>         
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Password:</label>
                                <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" required="required"></asp:TextBox>     
                            </div>                  
                            <div class="form-group">
                                <asp:Button ID="btnLogin" runat="server" CausesValidation="False" Text="Login" CssClass="btn btn-primary btn-lg btn-block login-btn" OnClick="btnLogin_Click"/>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <a href="#">Forgot Password?</a>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>  
        </div>
    </div>

Answer 1

It looks okay from the code but its difficult to tell whats happening without the rest of you code. what does your code for the button click events look like. eg below.

  protected void btnRegister_Click(object sender, EventArgs e)
        {

        }

        protected void btnClear_Click(object sender, EventArgs e)
        {

        }

Edit: i have just tried your code in a blank webforms project and it worked for me including the validation checks. so the error must be some where else on your page / in your project. The picture below shows it running and i set a break point on the btnRegister_Click event which its hitting when i press the button after filling in all the required fields.

My Example of your code running

Answer 2

You're doing nothing wrong with UseSubmitBehavior = false

Microsoft says:

Use the UseSubmitBehavior property to specify whether a Button control uses the client browser's submit mechanism or the ASP.NET postback mechanism. By default the value of this property is true, causing the Button control to use the browser's submit mechanism. If you specify false, the ASP.NET page framework adds client-side script to the page to post the form to the server.

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button.usesubmitbehavior?view=netframework-4.8

The browser uses form tag and grouping, like in MVC-5 flavour by default =true, because most programmers use MVC with ASP.NET.

You are using ASP.NET button events, not a form event. Consequently, UseSubmitBehavior=false is the correct setting.

Answer 3

Okay i think its because you are using required="required" attribute in your code to make certain fields mandatory. When you click the register button it is causing this check validation on all fields so the ones in your modal div as well as the ones in card div. This is why its not getting to your register_onclick event. (the fields username and password or not validated as they are not entered)

You should be able to prove this by removing the required="required" from the password and username textboxes in the modal.

To add validation you could use the asp:RequiredFieldValidator instead of the required attribute for the textboxes etc you want to to make mandatory. see below

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.requiredfieldvalidator?view=netframework-4.8

You can also add validation groups using so each button only validates certain controls. see below

https://docs.microsoft.com/en-us/previous-versions/aspnet/ms227424(v=vs.100)

Hope this helps. Please let me know if its worked.