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;*/
}
Related
I am developing an ASP.NET webforms app, and I have a minor problem.
The page contains a GridView control that displays a list of office records, and the user can either add a new record or edit an existing one.
Either way, a Bootstrap modal form is launched. When the user clicks the 'Edit' button in the GridView, it loads the full record using the DataKey value of the selected row, and that SHOULD populate the fields of the modal form, which is then displayed.
The thing is, all of this works, except when the form opens, the fields are blank. The record does load from the database, and no error occurs, either in the ASP.NET code or in the javascript console in debug mode. Am I missing something about how this should work?
The modal code is as follows:
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
And the code in the ASP.NET code-behind file to load the selected record from the GridView into the modal is as follows:
protected void GvOffices_RowCommand ( object sender, GridViewCommandEventArgs e ) {
int dataKeyValue = (int)gvOffices.DataKeys[int.Parse(e.CommandArgument.ToString())].Value;
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
tbAddress1.Text = ofc.Address1;
tbAddress2.Text = ofc.Address2;
tbCity.Text = ofc.City;
tbGlobalRate.Value = ofc.GlobalRate.ToString ( );
tbLocalRate.Value = ofc.LocalRate.ToString ( );
tbLocalRateCap.Text = string.Format ( "${0}", ofc.LocalRateCap );
tbOfficeMgr.Text = ofc.OfficeMgr;
tbOfficeName.Text = ofc.OfficeName;
tbPhone.Text = ofc.OfficePhone;
tbZIP.Text = ofc.ZIPCode;
tbID.Value = ofc.ID.ToString ( );
ScriptManager.RegisterStartupScript ( this, this.GetType ( ), "Pry", "openModal()", true );
}
Again, all of this code works without throwing an error of any kind, and a record DOES get loaded from the database via a custom object:
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
Still, I don't understand why the form fields aren't being populated. Help please?
Well, it turns out the answer is to wrap the modal code in an UpdatePanel control, like so:
<asp:UpdatePanel ID="updModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Then, in the code-behind, add this line of code to the RowCommand event of the GridView control just before calling the script code to display the modal:
updModal.Update ( );
This allows me to populate the fields of the form from the code-behind and display them on the click of the GridView.
Thanks for the feedback I did get from some of you guys. Have a great day!
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.
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>
<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>
On an aspx page I have a asp:login control inside a form. When I press the login button everything works well, but when I press the Enter key, the page is reloaded but nothing else happens. The loginbutton handler function is not accessed.
On aspx:
<form id="form1" class="login-form" runat="server" DefaultButton="lgLogin$LoginButton">
<asp:Login ID="lgLogin" runat="server" Width="100%"
FailureText="Some text here"
PasswordRequiredErrorMessage="Some text here"
UserNameRequiredErrorMessage="Some text here"
TextLayout="TextOnLeft"
OnAuthenticate="lgLogin_Authenticate"
DestinationPageUrl="~/Welcome.aspx"
OnLoginError="lgLogin_Error"
DisplayRememberMe="False" >
<LayoutTemplate>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Login</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<asp:TextBox runat="server" type="text" ID="UserName" CssClass="form-control placeholder-no-fix" placeholder="Login" />
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="input-icon">
<i class="fa fa-lock"></i>
<asp:TextBox runat="server" type="password" ID="Password" CssClass="form-control placeholder-no-fix" placeholder="Password" />
</div>
</div>
<div id="AlertError" runat="server" class="alert alert-danger" visible="false">
<button class="close" data-close="alert"></button>
<span>
<asp:Label ID="FailureText" runat="server" ></asp:Label>
</span>
</div>
<div class="form-actions">
<asp:Button type="submit" class="btn blue pull-right" ID="LoginButton" runat="server" CommandName="Login" Text='Login now' />
</div>
</LayoutTemplate>
<TextBoxStyle CssClass="form-control placeholder-no-fix"/>
<LoginButtonStyle CssClass="btn blue pull-right" />
</asp:Login>
</form>
The lgLogin_authenticate void is only accessed when the LoginButton is pressed.
EDIT
It's solved. Actually, it was working well. The problem was on a .js file that it was loaded within this page. It was capturing the Enter key to do some checks, but in the end it wasn't calling the submit button.
protected void Page_Load(object sender, EventArgs e)
{
button1.Focus();
}
try setting the AutoPostback attribute of the asp textbox to true
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.autopostback.aspx