We Keep Coding

Why isn't my button firing the eventhandler OnClick?

So I'm trying to create a Login button but it seems as it doesnt fire, I've put a few breakpoints inside the eventhandler BtnLogin_Click but it's not reaching it.
Why is that?
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form id="loginForm" runat="server" class="user">
<div class="form-group">
<form>
<asp:TextBox TextMode="Email" ID="inputEmail" CssClass="form-control form-control-user" runat="server" placeholder="Enter Email Address..." />
</form>
</div>
<div class="form-group">
<form>
<asp:TextBox TextMode="Password" ID="inputPassword" CssClass="form-control form-control-user" runat="server" placeholder="Password" />
</form>
</div>
<asp:Button ID="LoginBtn" CssClass="btn btn-primary" Text="Login" runat="server" OnClick="BtnLogin_Click" />
</form>
<hr>
<div class="text-center">
<a class="small" href="Register.aspx">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the cs
protected void BtnLogin_Click(object sender, EventArgs e)
{
//Doesnt reach this
}

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>

How can I align three ASP.NET controls using Bootstrap styles on the same line?

<div id="search-container">
<div class="form-inline">
<asp:DropDownList ID="drpSearchFilter" runat="server" CssClass="form-control">
<asp:ListItem>Title</asp:ListItem>
<asp:ListItem>Author</asp:ListItem>
<asp:ListItem>Keywords</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtSearchBox" CssClass="form-control" runat="server"/>
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-default" OnClick="btnSearch_Click"/>
</div>
</div>
Right now all of these controls are appearing on separate lines.

Try this one (from the Bootstrap documentation):
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>

Asp.Net WebForms events not working

I can`t use events of buttons in webforms
this is my master page
<body>
<form runat="server">
<header id="header">
<div class="container">
<div class="row">
You
can see that I have runat="server"
this is my page with button
<div class="slide-text">
<div class="contact-form bottom">
<h2>Sign In</h2>
<div class="form-group">
<input type="text" id="Email" runat="server" name="Mail" class="form-control" required="required" placeholder="E-Mail" />
</div>
<div class="form-group">
<input type="password" id="Password" runat="server" name="Password" class="form-control" required="required" placeholder="Password" />
</div>
<div class="form-group">
<asp:hyperlink navigateurl="SignUp" runat="server" text="Registration" />
</div>
<div class="form-group">
<asp:button text="Sign In" id="SignInSubmit"
cssclass="btn btn-submit" runat="server" onclick="SignInSubmit_Click" />
</div>
</div>
</div>
You can see that I have all necessary things
this is code behind
protected void SignInSubmit_Click(object sender, EventArgs e)
{
User user = new User();
user.Auth(Email.Value, Password.Value);
if (user.IsAuth)
{
Session.Add("User", user);
Response.Redirect("Account");
}
}
I used debugger but event just not working
but when I put like this
<form runat="server">
<div class="slide-text">
<div class="contact-form bottom">
<h2>Sign In</h2>
<div class="form-group">
<input type="text" id="Email" runat="server" name="Mail" class="form-control" required="required" placeholder="E-Mail" />
</div>
<div class="form-group">
<input type="password" id="Password" runat="server" name="Password" class="form-control" required="required" placeholder="Password" />
</div>
<div class="form-group">
<asp:hyperlink navigateurl="SignUp" runat="server" text="Registration" />
</div>
<div class="form-group">
<asp:button text="Sign In" id="SignInSubmit" cssclass="btn btn-submit" runat="server" onclick="SignInSubmit_Click" />
</div>
</div>
</div>
</form>
it is working (of course I am deleting form in master page).
I can`t understand why it is not working
NOTE
I don`t get exceptions
just event not firing
Also
when I am not using master page
but puting form runat after body I can`t use events too
Its works only like this
<form runat="server">
<div class="slide-text">
<div class="contact-form bottom">
<h2>Sign In</h2>
<div class="form-group">
<input type="text" id="Email" runat="server" name="Mail" class="form-control" required="required" placeholder="E-Mail" />
</div>
<div class="form-group">
<input type="password" id="Password" runat="server" name="Password" class="form-control" required="required" placeholder="Password" />
</div>
<div class="form-group">
<asp:hyperlink navigateurl="SignUp" runat="server" text="Registration" />
</div>
<div class="form-group">
<asp:button text="Sign In" id="SignInSubmit"
cssclass="btn btn-submit" runat="server" onclick="SignInSubmit_Click" />
</div>
</div>
</div>
</form>
I hope you can help me
Thanks in advance

When you create the webform, make sure you check the checkbox that says to use the master page which contains a form already.
On your Webform.aspx no need for another form, it is already provided by the master page.

bootstrap form-group separating textbox from button

I'm trying to make a form-group with a textbox and a button using asp.net and bootstrap.
Code:
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
This works just fine:
However, if I expand the browser's window, the textbox and the button got separated:
This group is inside <div class="container-fluid"/>. The entire code follows:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbMarcas">Selecione a marca:</label>
<asp:DropDownList ID="cbMarcas" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id" OnSelectedIndexChanged="cbMarcas_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbModelos">Selecione o modelo:</label>
<asp:DropDownList ID="cbModelos" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
</div>
</div>
What I'm doing wrong?

First you don't need to use all col-sm-4, col-md-4...
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
My guess is that you are using default .NET WebForms template so inside site.css you have:
input,
select,
textarea {
max-width: 280px;
}
You need to add own css for removing max-width property:
#txtPN {
max-width: initial;
}

For an ASP.NET project, the default Content/Site.css sets the max-width of a text input to 280px. If you remove this or override it, your text input will fill the input-group.
input[type="text"],
input[type="password"] {
/*max-width: 280px;*/
}