We Keep Coding

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

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">
Log in
<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? Log In</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">×</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">
Forgot Password?
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>

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://learn.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://learn.microsoft.com/en-us/previous-versions/aspnet/ms227424(v=vs.100)
Hope this helps. Please let me know if its worked.

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. e.g. 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

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://learn.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.

remove row from repeater using data table row index

<asp:Repeater ID="RptSCart" runat="server" OnItemCommand="RptSCart_ItemCommand" Visible="false">
<HeaderTemplate>
<div class="row text-center align-items-center" style="background-color: pink; height: 70px; color: black">
<div class="col-md-2"></div>
<div class="col-md-2">
<p>Product</p>
</div>
<div class="col-md-2">
<p>Price</p>
</div>
<div class="col-md-2">
<p>Stitch Cost</p>
</div>
<div class="col-md-1">
<p>Quantity</p>
</div>
<div class="col-md-2">
<p>Total</p>
</div>
<div class="col-md-1"></div>
</div>
<br />
</HeaderTemplate>
<ItemTemplate>
<div class="row text-center align-items-center">
<div class="col-md-2 ">
<asp:Image ID="PImage" runat="server" ImageUrl='<%#Bind("Pic")%>' CssClass="img image-prod" Width="100" Height="150" />
</div>
<div class="col-md-2">
<asp:Label ID="LabelPName" runat="server" CssClass="product-name" Text='<%#Bind("PName")%>' ForeColor="Black"></asp:Label>
</div>
<div class="col-md-2">
<asp:Label ID="LabelPPrice" runat="server" CssClass="price" Text='<%#Bind("SPrice") %>' ForeColor="Black"></asp:Label>
</div>
<div class="col-md-2">
<asp:Label ID="lblSPrice" runat="server" CssClass="price" Text='<%#Bind("STPrice") %>' ForeColor="Black"></asp:Label>
</div>
<div class="col-md-1">
<asp:Label ID="Label1" runat="server" CssClass="price" Text="1" ForeColor="Black"></asp:Label>
</div>
<div class="col-md-2">
<asp:Label ID="lblTotal" CssClass="total" runat="server" Text='<%#Bind("Amount") %>' ForeColor="Black"></asp:Label>
</div>
<div class="col-md-1">
<asp:LinkButton ID="lnkRemove" runat="server" CssClass="product-remove" CommandName="Delete"><span class="ion-ios-close-circle"></span></asp:LinkButton>
</div>
</div>
<h1>
<hr />
</h1>
</ItemTemplate>
</asp:Repeater>
DataTable dt1 = (DataTable)Session["Stitch_Cart"];
RptSCart.DataSource = dt1;
RptSCart.DataBind();
RptSCart.Visible = true;
Here is my repeater in which i bind data (products added in cart by customer) from data table. On click of remove button i want to delete row from data table using data table row index instead of repeater index.If quantity of product(xyz) is 2 i am creating two rows in cart and data table (it is according to my requirement). If user wants to remove one, the other one should not be deleted.

Show modal by item ID in ASP.NET WebForms

I'm using repeaters to display a list of items retrieved from the database. I would like to support basic CRUD operations on such items via a simple modal dialog box.
I have tried using onitemcommand to manipulate each item, I tried using labels to get id, I have also tried using OnClick on the buttons, with no luck.
Here it is the code for my repeater:
<div class="container-fluid">
<div class="row justify-content-left card-group">
<asp:Repeater ID="DataList1" runat="server" onitemcommand="DataList1_ItemCommand">
<ItemTemplate>
<div class="col-md-4 " style="margin-bottom: 1em;">
<%--A loop through the records in database--%>
<div class="card border-light mb-4 ">
<div class="card-content " >
<div class="card-header ">
<h4 class="my-0 font-weight-normal">
<asp:label ID="nameTage" style="font-size:16px;color:steelblue;" Text= '<%# Eval("ProjectName") %>' runat="server"/>
<asp:label ID="pID" Text='<%# DataBinder.Eval(Container.DataItem,"ProjectID") %>' runat="server" Visible="false"/>
</h4>
</div>
<div class="card-body ">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<h6 class="card-text" style="font-size:10px; color:#a51313">
<span class="Text" > <%--The project description goes here--%>
<%-- <%= myItem["ProjDescription"].ToString() %>--%>
<%# Eval("ProjDescription") %>
</span>
</h6>
</div>
</div>
</div>
<div class="card-footer ">
<%--These are not for the submit buttons, they are for the models--%>
<%--Get the ID of the Project--%>
<%--<div class="btn-toolbar pull-right" id="buttonID" role="group" aria-label="Basic example" style="font-size:9px; color:white; align-content:center" runat="server">--%>
<asp:LinkButton type="button" ID="btn_details" class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#detailsModal" runat="server" OnClick="IDButton1_Click" CausesValidation="false" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ProjectID") %>' CommandName="Details" Text="Details"></asp:LinkButton>
<asp:LinkButton type="button" ID="btn_edit" class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#editModal" runat="server" CausesValidation="false" CommandArgument='<%# Eval("ProjectID") %>' CommandName="Edit" Text="Edit"></asp:LinkButton>
<asp:LinkButton type="button" ID="btn_delete" class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#deleteModal" runat="server" CausesValidation="false" CommandArgument='<%# Eval("ProjectID") %>' CommandName="Delete" Text="Delete"></asp:LinkButton>
<%--</div>--%>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<%-- <% } %>--%>
</div>
</div>
'''
<!-- Modal for Details -->
<%--Get the ID of the Project--%>
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">Mission Project</h5>
<%--project.Name--%>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-horizontal col-8">
<div class="form-group row">
<asp:label Text="Project Title:" class="control-label" runat="server"/>
<asp:TextBox ID="TB1" Text="" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label Text="Project Description:" class="control-label" runat="server"/>
<asp:TextBox ID="TB2" runat="server" class="form-control" rows="4" TextMode="multiline" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label Text="Department:" class="control-label" runat="server"/>
<asp:TextBox ID="TB3" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label ID="HEreThere" Text="Contact Name:" class="control-label" runat="server"/>
<asp:TextBox ID="TB4" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label Text="Launch Date:" class="control-label" runat="server"/>
<asp:TextBox ID="TB5" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label Text="Note:" class="control-label" runat="server"/>
<asp:TextBox ID="TB6" runat="server" class="form-control" rows="7" TextMode="multiline" ReadOnly="true"></asp:TextBox>
</div>
<div class="form-group row">
<asp:label Text="Project Status:" class="control-label" runat="server"/>
<asp:TextBox ID="TB7" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button type="button" class="btn btn-secondary" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
protected void Page_Load(object sender, EventArgs e)
{
lblMessage.Text = "";
//data = "";
if (!IsPostBack)
{
}
DataList1.DataSource = GetProjects();
DataList1.DataBind();
}
protected void DataList1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandArgument != null)
{
if (e.CommandName.Equals("Details"))
{
//int MissID = Convert.ToInt32(e.CommandArgument.ToString());
//lblMessage.Text = MissID.ToString
((Label)e.Item.FindControl("pID")).Visible = true;
}
else if (e.CommandName.Equals("Edit"))
{
((Label)e.Item.FindControl("pID")).Visible = true;
}
else if (e.CommandName.Equals("Delete"))
{
((Label)e.Item.FindControl("pID")).Visible = true;
}
}
// Label label = e.Item.FindControl("pID") as Label;
}
protected void IDButton1_Click(object sender, EventArgs e)
{
RepeaterItem item = (sender as LinkButton).Parent as RepeaterItem;
int MissID = Convert.ToInt32((item.FindControl("pID") as Label).Text);
(item.FindControl("pID") as Label).Visible = true;
// get command argument here
// int MissID = Convert.ToInt32(((sender as Button).NamingContainer.FindControl("pID") as Label).Text);
// lblMessage.Text = MissID.ToString();
DataSet dsID = GetProjectByID(MissID);
this.TB1.Text = dsID.Tables[0].Rows[0]["ProjectName"].ToString();
this.TB2.Text = dsID.Tables[0].Rows[0]["ProjDescription"].ToString();
this.TB3.Text = dsID.Tables[0].Rows[0]["Department"].ToString();
this.TB4.Text = dsID.Tables[0].Rows[0]["ContactName"].ToString();
this.TB5.Text = dsID.Tables[0].Rows[0]["DueDate"].ToString();
this.TB6.Text = dsID.Tables[0].Rows[0]["Notes"].ToString();
this.TB7.Text = GetStatusText(dsID.Tables[0].Rows[0]["StatusID"].ToString());
}

Because you don't have your Repeater binding wrapped in the check for PostBack, it is rebinding anytime a button event occurs. This essentially undos the changes you make in the click event. Wrapping it in the postback check should resolve the issue.
if (!IsPostBack)
{
DataList1.DataSource = GetProjects();
DataList1.DataBind();
}

Get Fileupload Data Placed in Modal Bootstrap With Update Panel

Litteraly i have a problem when put file upload in modal. On this problem, i have a modal bootstrap which have sort of textbox and fileupload as mandatory. When user click save button, then the table or in this case a gridview show name of file and added year while keep the modal is alive and not getting postback or closed.This illustration can be seen here
As long i have tried, i am using update panel to keep the bootstrap alive, but unfortunately, the backdraw is i cannot get any fileupload data. Can anyone tell me how to solve this problem ? or are there any ways to fulfill the condition above, as long as the modal keep alive when user keep save and the gridview is updated? Thank you :)
PS: this is my code
<asp:ScriptManager runat="server" ID="ScriptManager2" />
.....
<asp:Panel ID="pnlRegistrationPhase6" runat="server">
<div class="modal fade " id="registerStep6" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<asp:UpdatePanel runat="server" ID="updRegistrationStep6">
<ContentTemplate>
<div class="modal-body ac-modal-success p-a0">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 col-md-4 p-l0 hidden-sm hidden-xs img-content">
<img src="images/form_registrasi-14-14.jpg" class="img img-responsive btn-block">
</div>
<div class="col-xs-12 pt-15 pb-10 m-b20 hidden-lg hidden-md heading-reg6">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
<h4 class="text-strong m-t5">Certification</h4>
<ul>
<li>Maximum 3 (three) latest certifications which sorted from the last, required if already have certifications</li>
</ul>
</div>
<div class="col-lg-8 col-md-8 col-lg-offset-4 col-md-offset-4 form-content">
<div class="col-lg-12 p-r m-b10">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
</div>
<div class="col-lg-12 mt-20">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<p class="text-primary text-strong m-b0">Do you have Certification?</p>
<span>(Internship or Final Paper isn't considered as Certification)</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="yescertification" ClientIDMode="Static" OnClick="showStep6();" GroupName="certification" />
<label for="yescertification">Yes</label>
</div>
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="nocertification" ClientIDMode="Static" OnClick="hideStep6();" GroupName="certification" />
<label for="nocertification">No</label>
</div>
</div>
</div>
</div>
<div id="step6Content" class="col-lg-12 no-padding hide">
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Name of Certification<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationName" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationName" />
<label class="text-small" for="certname">Certification Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Name" ControlToValidate="txtCertificationName" runat="server" ValidationGroup="txtCertificationName" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Institution/Company<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationInstitution" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationInstitution" />
<label class="text-small" for="instname">Institution Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Institution/Company" ControlToValidate="txtCertificationInstitution" runat="server" ValidationGroup="txtCertificationInstitution" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Year of Certification<span class="text-danger">*</span></label>
<div class="col-lg-2">
<div class="form-group has-float-label">
<asp:DropDownList runat="server" ID="ddlYearCertification" CssClass="form-control form-flat minimal" ValidationGroup="ddlYearCertification" Width="100%" OnChange="removeTextddlYearCertification();" ClientIDMode="Static">
</asp:DropDownList>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ID="rfvddlYearCertification" ErrorMessage="Please Insert Year" ControlToValidate="ddlYearCertification" runat="server" Display="Dynamic" ValidationGroup="ddlYearCertification" InitialValue="0" />
</span>
<!--<label for="certyear">Combo Box</label>-->
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Upload Certificate</label>
<div class="col-lg-9">
<div class="media">
<div class="media-left media-middle">
<div class="box-upload">
<span class="btn btn-primary btn-pill">
<asp:FileUpload runat="server" ID="FileUploadCertificate" CssClass="hidden" />
<label for="file" class="m-b0">Choose File</label>
</span>
</div>
</div>
<div class="media-body media-middle">
<span class="text-danger text-small" style="color: #D64541;">There was an error uploading images.
<br>
Please check and try again.</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<asp:Button Text="Save" runat="server" CssClass="btn btn-primary btn-pill btn-modal-width" ID="btnSaveCertification" CausesValidation="true" OnClick="btnSaveCertification_Click " />
<asp:Button Text="Clear" runat="server" CssClass="btn btn-primary btn-pill m-l20 btn-modal-width" ID="btnClearCertification" OnClick="btnClearCertification_Click" />
<%-- <button class="btn btn-primary btn-pill btn-modal-width">Save</button>
<button class="btn btn-primary btn-pill m-l20 btn-modal-width">Clear</button>--%>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
</div>
</div>
</div>
</div>
<div class="col-lg-12 m-t20">
<div class="row form-group m-t20">
<div class="col-lg-8 col-lg-offset-3">
<button type="button" class="btn btn-primary btn-pill btn-modal-width" data-toggle="modal" data-target="#registerStep5" data-dismiss="modal">Previous</button>
<button type="button" class="btn btn-default btn-pill m-l20 btn-modal-width" data-toggle="modal" data-target="#registerStep7" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnClearCertification" />
<asp:AsyncPostBackTrigger ControlID="btnSaveCertification" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>

Asp:Button not firing in bootstrap Tab Panes

I have set a bootstrap tab pane, within this tab pane there is a form, on asp:Button press the code will not execute.
I know the code works as when not in the tab pane it works every time.
But its for a user control page and would be better to provide function within the tab panes.
This is for all buttons within the tab pane.
if one gets solved then the method to repair others is made!
Here is the HTML markup:
<div class="tab-content col-lg-10">
<div class="tab-pane active" id="pane1">
<%--Content goes in here, so tables, and whatever else--%>
<h3>My Bookings</h3>
<div class="container">
<asp:GridView runat="server" ID="dgBookingView" AutoGenerateColumns="False" DataSourceID="myBookings" CssClass="table table-striped table-bordered" UseAccessibleHeader="True">
<Columns>
<asp:BoundField DataField="BookingID" HeaderText="Booking #" InsertVisible="False" SortExpression="BookingID" />
<asp:BoundField DataField="FilmName" HeaderText="Movie" SortExpression="FilmName" />
<asp:BoundField DataField="Requirements" HeaderText="Requirements" SortExpression="Requirements" />
<asp:BoundField DataField="Showtime" HeaderText="Time" SortExpression="Showtime" DataFormatString="{0:t}" />
<asp:BoundField DataField="ShowDate" HeaderText="Date" SortExpression="ShowDate" DataFormatString="{0:d}" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="myBookings" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT Booking.BookingID, Booking.CustomerFK, Booking.AuditorumFK, Booking.Requirements, Film.FilmName, Showtime.Showtime, Showtime.ShowDate, Showtime.AuditoriumID, Customers.UserNameFK FROM (((((Booking INNER JOIN Seat ON Booking.BookingID = Seat.BookingFK) INNER JOIN Auditorium ON Seat.AuditoriumFK = Auditorium.AuditoriumID) INNER JOIN Showtime ON Auditorium.AuditoriumID = Showtime.AuditoriumID) INNER JOIN Film ON Showtime.FilmFK = Film.FilmID) INNER JOIN Customers ON Booking.CustomerFK = Customers.CustomerID)
WHERE([Customers.UserNameFK] = ? )">
<SelectParameters>
<asp:SessionParameter
Name="userNamePa"
SessionField="userName"
DefaultValue="userName" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<div class="row">
<h3>Specify any Special Requirements</h3>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Booking #</label>
<div class="col-sm-6">
<asp:TextBox runat="server" CssClass="form-control" ID="txtBookingID"></asp:TextBox>
</div>
<div class="col-sm-4">
<h4>
<asp:RequiredFieldValidator ID="rqfUserNameValid" ControlToValidate="txtBookingID" runat="server"
ErrorMessage="Enter a Booking Number" CssClass="label label-danger">
</asp:RequiredFieldValidator>
</h4>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Extra Requirements</label>
<div class="col-sm-6">
<asp:TextBox ID="txtRequirements" class="form-control" Rows="5" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<asp:Button runat="server" CssClass="btn btn-default" Text="Make Change" ID="btnRequirements" OnClick="btnRequirements_OnClick" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane2" runat="server">
<%--Change User Password START--%>
<h3>Change Password</h3>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Current Password</label>
<div class="col-sm-6">
<asp:TextBox runat="server" CssClass="form-control" ID="txtCurrentPass" TextMode="Password"></asp:TextBox>
</div>
<div class="col-sm-4">
<h4>
<asp:RequiredFieldValidator runat="server" CssClass="label label-danger" ID="rqfCurrentPassword" ControlToValidate="txtCurrentPass"
ErrorMessage="Enter Current Password">
</asp:RequiredFieldValidator>
</h4>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">New Password</label>
<div class="col-sm-6">
<asp:TextBox runat="server" CssClass="form-control" TextMode="Password" ID="txtNewPassword"></asp:TextBox>
</div>
<div class="col-sm-4">
<h4>
<asp:RequiredFieldValidator runat="server" CssClass="label label-danger" ID="rqfNewPassword" ControlToValidate="txtNewPassword"
ErrorMessage="Required">
</asp:RequiredFieldValidator>
</h4>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-6">
<asp:TextBox runat="server" CssClass="form-control" TextMode="Password" ID="txtConfirmPassword"></asp:TextBox>
</div>
<div class="col-sm-4">
<h4>
<asp:RequiredFieldValidator runat="server" CssClass="label label-danger" ID="rqfConfirmPassword" ControlToValidate="txtConfirmPassword"
ErrorMessage="Required">
</asp:RequiredFieldValidator>
</h4>
<h4>
<asp:CompareValidator runat="server" ControlToValidate="txtConfirmPassword" ControlToCompare="txtNewPassword" ID="PassCompare" ErrorMessage="Confirm password must match password" CssClass="label label-danger"></asp:CompareValidator>
</h4>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<asp:Button runat="server" CssClass="btn btn-default" Text="Change Password" ID="btnPasswordChange" OnClick="btnChangePassword_OnClick"></asp:Button>
</div>
</div>
</div>
<div class="col-sm-4">
<h4>
<asp:Label runat="server" CssClass="label label-danger" ID="lblPassChange" Visible="False" Text=""></asp:Label>
</h4>
</div>
</div>
<%--Change User Password--%>
</div>
</div>
And the C# Code for button Event:
protected void btnChangePassword_OnClick(object sender, EventArgs eventArgs)
{
//Changes Password of current Logged in User
string oldPass = txtCurrentPass.Text;
string newPass = txtNewPassword.Text;
MembershipUser user = Membership.GetUser(User.Identity.Name);
if (txtCurrentPass.Text == txtNewPassword.Text)
{
lblPassChange.Visible = true;
lblPassChange.Text = "Old Password must not match New Password";
}
else
{
if (user != null && user.ChangePassword(oldPass, newPass))
{
lblPassChange.Visible = true;
lblPassChange.Text = "Password Changed Successfully";
lblPassChange.CssClass = "label label-success";
}
else
{
lblPassChange.Visible = true;
lblPassChange.Text = "Error, Please try again";
}
}
}
Where am i going wrong?
Any help would be appreciated