I am writing a web application in Visual Basic under the .net 4.5 framework. I have code to place the glyphicons next to each element. My problem is that the icon and the text box are off shifted by what appears to be 1 or 2 pixels. I have been unable to figure out how to adjust the placement of the icon so the alignment is correct. Below is a picture which shows the misalignment.
This is the code that produces the form:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AccuRecord</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server" id="thresholdForm" class="form-horizontal">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<asp:TextBox ID="txtFullName" name="txtFullName" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<asp:TextBox ID="txtPhone" name="txtPhone" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">eMail Address</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
<asp:TextBox ID="txtEmail" runat="server" name="txtEmail" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message</label>
<div class="col-lg-5">
<div class="input-group">
<asp:TextBox ID="txtMessage" name="txtMessage" Width="500px" ClientIDMode="Static" CssClass="form-control" runat="server" TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-send"></span> Send
</button>
</div>
</div>
</form>
<script type="text/javascript" src="scripts/bootstrapValidator.js"></script>
<script>
$(document).ready(function() {
$('#thresholdForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Set default threshold for all fields. It is null by default
threshold: 3,
fields: {
txtFullName: {
threshold: 10,
validators: {
notEmpty: {
message: 'The full name is required'
}
}
},
txtPhone: {
threshold: 5,
validators: {
notEmpty: {
message: 'The phone number is required'
},
phone: {
message: 'The phone number is not valid',
country: 'US'
}
}
},
txtEmail: {
// The threshold option is not set
// It will be taken from the form option (which is 3 in this example)
validators: {
notEmpty: {
message: 'The eMail address is required'
},
emailAddress: {
message: 'The eMail address entered is not valid'
}
}
}
}
});
});
</script>
</body>
The code also pulls in the following .css files:
bootstrap.css
bootstrap.min.css
bootstrapValidator.css
bootstrapValidator.min.css
Any assistance is greatly appreciated.
Thank you,
Jonathan
instead of mentioning glyphicon as in your code:
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
write it as:
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
example is here CODEPEN
enjoy.. :)
Related
I am trying to do a simple project where I can use the required tag on an input field so I can achieve instant form validation. However, I cannot get the validation to trigger. I am using IE11 and Chrome Version 53. Reference: http://www.instantshift.com/2016/05/16/html5-form-validation-floating-input-label/
Site.Master
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register.aspx">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" /></a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About.aspx">About</a></li>
<li><a runat="server" href="~/Contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
input used in here
Default.aspx
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required>
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="">
</div>
</asp:Content>
You need an event for validating the inputs regardless of what you use.
The following will work if the user enters a value, removes it and moves away from the input.
<asp:TextBox ID="txtInput" runat="server" CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="form" ControlToValidate="txtInput" ErrorMessage="Please provide a value" Display="Dynamic"></asp:RequiredFieldValidator>
Once you know when to validate the input, use the Page_IsValid function to check if the form is in a valid state in javascript.
Please look at the following for validation using HTML5 elements:
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required="" onblur="validate(this)" runat="server"/>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="" onblur="validate(this)" runat="server"/>
<script>
function validate(input) {
if (input.value.length === 0) {
alert("Please provide a value in " + input.name + " input");
}
}
</script>
Try the following:
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value=""
required="required" runat="server">
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value=""
required="required" runat="server">
</div>
I am using Bootstrap 3 with ASP.NET webforms and I am completely new to Bootstrap. The webform I am working on uses ASP.net validation controls. My web form has a standard layout with two columns and I am using "form-group" class to group my labels and input fields.
Now the problem is that as I am placing the label, input field as well as its validator in the Bootstrap "form-group" class, the message in the text property of the validator is being displayed in the next line after validation. I want that to be displayed right next to the input field. Is there any alternative way I can do this?
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtBox">Address <span class="required">*</span></asp:Label>
<asp:TextBox id="txtBox" runat="server" CssClass="form-control"/>
<asp:RequiredFieldValidator ID="rfvLine1" ValidationGroup="<%# ValidationGroup %>" ControlToValidate="txtBox" runat="server" Display="Dynamic" ErrorMessage="Line 1 is required." Text="*"/>
</div>
Easiest way is to create validation in separate column.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.required {
color: #e31937;
font-family: Verdana;
margin: 0 5px;
}
.field-validation-error {
color: #e31937;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="container form-horizontal">
<div class="form-group">
<asp:Label runat="server"
AssociatedControlID="txtBox"
CssClass="col-xs-12 col-sm-4 control-label">
Address
<span class="required">*</span>
</asp:Label>
<div class="col-xs-12 col-sm-4 ">
<asp:TextBox ID="txtBox" runat="server"
CssClass="form-control" />
</div>
<div class="col-xs-12 col-sm-4 form-control-static">
<asp:RequiredFieldValidator ID="rfvLine1"
ControlToValidate="txtBox" runat="server"
Display="Dynamic"
CssClass="field-validation-error"
Text="Line 1 is required." />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-offset-4 col-sm-4 ">
<asp:Button runat="server" ID="SubmitButton"
Text="Submit" CssClass="btn btn-primary" />
</div>
</div>
</div>
</form>
</body>
</html>
Do the following: Updated
<div class="container">
<h4 class="form-signin-heading">Info</h4>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control username" ID="txtAddress"></asp:TextBox>
</div>
<div class="col-xs-7 col-sm-5">
<span class="help-inline pull-left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtAddress"
ErrorMessage="Address is a required field."
ForeColor="Red" Display="Dynamic">
</asp:RequiredFieldValidator>
</span>
</div>
</div>
<br />
<br />
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<asp:Button ID="Button1" runat="server" Text="Add" CssClass="btn btn-lg btn-primary btn-block" />
</div>
</div>
</div>
I hope, this is what you expected:
By the way, you didn't put the end tag in the RequiredFieldValidator.
#jQuery for check "require" validation for only submit button#
<script type="text/javascript">
(function () {'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false)
{
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
##Submit button HTML##
<asp:Button ID="Button1" runat="server" Text="Submit" class="btn btn-primary" OnClick="Button1_Click" />
##Non Submit button##
<asp:Button ID="btnSearch" runat="server" class="form-control btn-primary " Width="25%" Text="Find" UseSubmitBehavior="false" OnClick="btnSearch_Click" />
I new to using web applications. I am currently using visual studio 2013 and I have created a web application. I would like to have a form that employees fill out and then when they hit submit the form will either add, change or delete from the database. From researching I originally tried making a web form. This did not allow me to keep the formatting that was made on my master page, and when I tried connecting it to the master page it did not allow it because of the <form>. So then I created a web form with master page. This allows me to keep the formatting from the master page but now I am unable to create a form using <form>. So my question is how do I create a form that will submit and still keep the formatting from my master page?
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> Employee Information</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" runat="server" href="~/">Employee Information</a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/HomePage">Home</a></li>
<!--<li><a runat="server" href="~/About">About</a></li>-->
<li><a runat="server" href="~/EmployeeInput">Add Employee</a></li>
<li><a runat="server" href="~/EditEmployee">Edit Information</a></li>
<li><a runat="server" href="~/Terminate">Terminate Employee</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> </p>
</footer>
</div>
</form>
</body>
</html>
Web Form
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div id="Column1" style="height:355px;width:250px;float:left;">
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName1" size="20" />
<select id="Select1" name="D1">
<option>This</option>
<option>That</option>
<option>The other thing</option>
</select></div>
<div id="Column2" style="height:355px;width:250px;float:left;">
First Name: <input type="text" name="FirstName2" size="20" />
First Name: <input type="text" name="FirstName3" size="20" />
First Name: <input type="text" name="FirstName4" size="20" />
First Name: <input type="text" name="FirstName5" size="20" />
First Name: <input type="text" name="FirstName6" size="20" />
First Name: <input type="text" name="FirstName7" size="20" />
First Name: <input type="text" name="FirstName8" size="20" />
First Name: <input type="text" name="FirstName9" size="20" />
First Name: <input type="text" name="FirstName10" size="20" />
</div>
</body>
</html>
I would like to have everything within the body of my web form to be a form.
You can only have one form that has the runat="server"attribute on the composite page (Page + Master Page(s)).
The solution is to put the form in the Master Page, and put the content place holders inside the form. The Page itself doesn't just has to have the Content and declare the markup inside. When the page is executed, the markup from the Page and Master Page(s) will be combined into a single HTML file that is sent to the client.
Example master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Working with Data Tutorials</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Working with Data Tutorials</span>
<span class="breadcrumb">TODO: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
TODO: Menu will go here...
</div>
</form>
</div>
</body>
</html>
Example content page:
<%# Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Welcome to the Working with Data Tutorial Site</h1>
<p>This site is being built as part of a set of tutorials that illustrate some of the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>
<asp:TextBox runat="server" id="TextBox1" /><br />
<asp:TextBox runat="server" id="TextBox2" /><br />
<asp:Button runat="server" id="Btn1" OnClick="Btn1_Click" Text="Click to submit!" />
</asp:Content>
On the code behind (.cs file) for the page, you'd read the values from the text boxes like this:
protected void Btn1_Click(object sender, EventArgs e)
{
string sometext=TextBox1.Text;
string somemoretext=TextBox2.Text;
}
Examples from MSDN.
Both are Same but if you create Webform with Master Page Visual Studio implicitly add reference of the Master Page
<%# Page Title="" Language="C#" MasterPageFile="~/My.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.WebForm1" %>
and if you create a Webform not added reference of the Master Page even Master Page existed.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.Bhand" %>
I had been using Visual Studio with Ajax Control Toolkit Version 7.1213 from Nuget. But when i try to use the ModalPopupExtender it was not doing anything at all. I had done a lot of surfing at Stackoverflow, Codeproject as well as other reputed sites but none of their suggestion work on my code.
I had also found from the search that Many users who are using Latest AjaxControlToolkit with Visual Studio 2012 are facing the issue.
Here is the Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Attendance1.Site1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form id="Form1" runat="server">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<img src="Images/logo.png" />
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a id="A1" runat="server" class="username" href="~/Account/Manage" title="Manage your account">
<asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a>!
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
</body>
</html>
this is my Content Page
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="Login.aspx.cs" Inherits="abc" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:panel ID="Panel1" style="display:none" runat ="server">
<div class="HelloWorldPopup">
<div class="PopupHeader" id="PopupHeader">Header</div>
<div class="PopupBody">
<p>This is sample modal dialog</p>
</div>
<div class="Controls">
<input id ="btnOk" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:panel>
<asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="" PopupControlID="Panel1" Enabled="True" CancelControlID="btnCancel" TargetControlID="Button1">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Thanks in advance
You should change the line:
<asp:ScriptManager ID="ScriptManager1" runat="server">
with this one:
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true">
I have a web page with 3 search fields on it, each with a different submit button. When using the enter button on the keyboard to submit any of them, an incorrect action is being performed, although with the mouse it's fine.
Any ideas why this is happening?
The rendered HTML as requested below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_ctl00_Head1">
<body id="home">
<form name="aspnetForm" method="post" action="history_lookup.aspx?theme=t2" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzkzOTQxNDBkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYFBSZjdGwwMCRjdGwwMCRNaW5pQ2FydFRleHQxJEltYWdlQnV0dG9uMQUsY3RsMDAkY3RsMDAkVG9wTmF2JFF1aWNrU2VhcmNoMSRJbWFnZUJ1dHRvbjIFLGN0bDAwJGN0bDAwJFRvcE5hdiRRdWlja1NlYXJjaDEkSW1hZ2VCdXR0b24xBShjdGwwMCRjdGwwMCRjcGhSb290JGNwaFN1Yk1hc3RlciRzdWJtaXQxBShjdGwwMCRjdGwwMCRjcGhSb290JGNwaFN1Yk1hc3RlciRzdWJtaXQy4UTdoX+Ej1GFsXGOrI898SMftDA=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=gfGwAOwAxcQ9Nlq6l3EJfg2&t=634166396192656250" type="text/javascript"></script>
<div>
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="fwZ-2v_x8CYGGr9a8Ce0s6gkE38QmubHNljKJaKxZV41" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKs3Nu8DwLV2a2zBwKK/6PwCQLBpvyBBAKT+aizBgL+qMTTDwLU1/SWCwL+qNiuCArtGFkuC9Zj3X3If1cwPC7PKtcm" />
</div>
<div class="container clearfix" style="left: 0px; top: 0px">
<div class="utilityNav">
<a class="MenuItem" href="/extranet.aspx?theme=t2" title="Account Info">
Account Info
</a>
|
<a class="MenuItem" href="/history_lookup.aspx?theme=t2" title="Order History">
Order History
</a>
|
<a class="MenuItem" href="/_user_logout.aspx" title="Sign Off">
Sign Off
</a>
</div>
<div class="header">
<div class="cart" >
<div id="menu">
<div class="cartimage">
<input type="image" name="ctl00$ctl00$MiniCartText1$ImageButton1" id="ctl00_ctl00_MiniCartText1_ImageButton1" src="images/bg-cart-corner.gif" align="left" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$MiniCartText1$ImageButton1", "", false, "", "cart.aspx", false, false))" style="border-width:0px;" />
</div>
<div class="cartlabel">Checkout Cart:<br />
<a id="ctl00_ctl00_MiniCartText1_lbMiniCart2" class="cartlink" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$MiniCartText1$lbMiniCart2", "", false, "", "cart.aspx?theme=t2", false, true))">View your cart</a>
</div>
<br /><br />
</div>
</div>
</div>
<div class="primaryNav">
<div class="navdropdown">
</div>
<div align="right" class="quicksearch">
<div class="QuickSearch">
<div id="ctl00_ctl00_TopNav_QuickSearch1_quicksearchpanel" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ctl00_TopNav_QuickSearch1_ImageButton1')">
<table cellpadding="0" cellspacing="0" class="QuickSearch">
<tr>
<td class="quicksearch_text">
<span id="ctl00_ctl00_TopNav_QuickSearch1_lblSearch"></span>
</td>
<td >
<input class="QuickSearch" type="text" name="searchstring" size="15" maxlength="30" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
</td>
<td class="quicksearch_button">
<input type="image" name="ctl00$ctl00$TopNav$QuickSearch1$ImageButton2" id="ctl00_ctl00_TopNav_QuickSearch1_ImageButton2" src="images/searchbutton.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$TopNav$QuickSearch1$ImageButton2", "", false, "", "/Searchdh.aspx?theme=t2", false, false))" style="border-width:0px;" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<td valign="top">
<div class="HistoryLookupPage">
<h1 class="PageHeader">
<span id="ctl00_ctl00_cphRoot_cphSubMaster_PageHeader1_LabelHeader">Order History</span>
</h1>
<p>
Enter the reference number of the order you want to see.
</p>
<p>
Reference number
<input name="ctl00$ctl00$cphRoot$cphSubMaster$CustomerReference" type="text" id="ctl00_ctl00_cphRoot_cphSubMaster_CustomerReference" class="borderTextBox" />
<input type="image" name="ctl00$ctl00$cphRoot$cphSubMaster$submit1" id="ctl00_ctl00_cphRoot_cphSubMaster_submit1" src="images/buttons/findorder-blue.gif" style="border-width:0px;" />
</p>
<br />
<p><b>Or search by PO Number</b></p>
<p>
<input name="ctl00$ctl00$cphRoot$cphSubMaster$CustomerReference2" type="text" id="ctl00_ctl00_cphRoot_cphSubMaster_CustomerReference2" class="borderTextBox" />
<input type="image" name="ctl00$ctl00$cphRoot$cphSubMaster$submit2" id="ctl00_ctl00_cphRoot_cphSubMaster_submit2" src="images/buttons/findorder-blue.gif" style="border-width:0px;" />
</p>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
and the aspx markup
<%# Import Namespace="System.Configuration.ConfigurationManager" %>
<%# Page Language="VB" AutoEventWireup="false" CodeFile="history_lookup.aspx.vb"
EnableViewState="false" Inherits="history_lookup" ValidateRequest="false" CodeFileBaseClass="Main.Page"
MasterPageFile="~/masters/default/main.master" RuntimeMasterPageFile="ThreeColumn.master"
CrumbName="<%$ Resources: Language, LABEL_MENU_HISTORY %>" %>
<%# Register Src="~/controls/Message.ascx" TagName="Message" TagPrefix="uc1" %>
<%# Register Src="~/controls/PageHeader.ascx" TagName="PageHeader" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphSubMaster" runat="Server">
<td valign="top">
<div class="HistoryLookupPage">
<uc1:Message ID="Message1" runat="server" />
<uc1:PageHeader ID="PageHeader1" runat="server" Text="<%$ Resources: Language, LABEL_MENU_HISTORY %>"
EnableTheming="true" />
<p>
<asp:Literal ID="Literal1" runat="server" Text="<%$ Resources: Language, LABEL_PLEASE_ENTER_ORDERREF %>"></asp:Literal>
</p>
<p>
<asp:Literal ID="Literal2" runat="server" Text="<%$ Resources: Language, LABEL_HISTORY_LOOKUP %>"></asp:Literal>
<asp:TextBox runat="server" ID="CustomerReference" CssClass="borderTextBox" />
<%-- <asp:Button ID="Button1" runat="server" CssClass="BtnC" Text="<%$ Resources: Language, ACTION_LOOKUP %>" />
--%> <asp:ImageButton ID="submit1" runat="server" imageurl="~/images/buttons/findorder-blue.gif" />
</p>
<% if Not globals.User("Anonymous") then %>
<br />
<p><b>Or search by PO Number</b></p>
<p>
<asp:TextBox runat="server" ID="CustomerReference2" CssClass="borderTextBox" />
<%-- <asp:Button ID="Button2" runat="server" CssClass="BtnC" Text="Find Order" />
--%> <asp:ImageButton ID="submit2" runat="server" imageurl="~/images/buttons/findorder-blue.gif" />
</p>
<% end if %>
</div>
</td>
</tr>
</table>
</asp:Content>
Encase each set of fields inside a asp:panel, then set the default button for each of the asp:panels to the correct button ID. The problem is its defaulting to the wrong submit button.