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" %>
Related
I'm building an asp.net website (webforms) in Visual Studio 2017 version 15.2 (26430.16) and Microsoft .NET Framework version 4.7.03056. (targetFramework .NET = 4.5.2).
Upon creation of the solution a bootstrap.css file is created, together with the Site.master and so on.
When I edit the bootstrap.css file I can see changes happening when viewing the website on localhost. But after publishing to my host, it doesn't seem to have applied those changes to the live website.
Part of my 'Site.master' page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>CompanyX | <%: Page.Title %></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="CompanyX, ..." class="next-head" />
<meta name="author" content="CompanyX" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:title" content="CompanyX" />
<meta property="og:description" content="..." />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/Content/Site.css" type="text/css" runat = "server" />
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://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">
<%-- navbar css styling is done in the 'bootstrap.css' file --%>
<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="~/">
<asp:Image ID="logo" runat="server" ImageUrl="~/images/logo.png" AlternateText="logo" style="width:15%; height:auto;"></asp:Image>
<span>CompanyX</span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/About">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" runat="server" href="#">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a runat="server" href="~/Product-1">Product-1</a></li>
<li><a runat="server" href="~/Product-2">Product-2</a></li>
</ul>
</li>
<li><a runat="server" href="~/Photos">Photos</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
...
</div>
</form>
</body>
A change I applied in the 'bootstrap.css' file:
.navbar-nav > li > a {
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
font-size: medium;
}
I added a margin-top: 10px; here, so my items from the navbar-collapse collapse are horizontally aligned with the logo and text from navbar-brand.
I'd expect this to work for both, localhost and published website.
I also tried adding the below code to asp:ContentPlaceHolder ID="Stylesheets" as an extra reference to the bootstrap.css file, but no luck there either.
<link rel="stylesheet" runat="server" href="/Content/bootstrap.css" type="text/css" />
Your input is much appreciated.
Below you can see the result visualized:
Update:
Actually it looks like something strange is going on, when viewing the page source code.
My code to render CSS on my Site.master:
On localhost, the source code looks like this:
On published website, the source code looks like this:
And I just realized I don't need the ContentPlaceHolder ID="Stylesheets". I've now removed it from my code, but the problem remains.
Any thoughts on why this is different?
There could be multiple reasons behind that, my guess would be these:
It could be, your browser have cached the CSS file and is
using the file from there. Try clearing the browser cache or use
Ctrl + Shift + R if using Firefox or Chrome to hard-reload the
page.
Or it could be because your visual studio is not uploading the CSS
file. Try manually replacing the file via FileZilla.
There could be a style mentioned in the head or after your specified changes, that are over writing your changes. Inspect if there are no changes in style after the desired changes are being applied.
Check, if there are some style attributes mentioned with an !important flag. If there are, this would mean it is taking precedence over your normal styles even you specify them after the desired changes.
The easy solution for me was to remove the css bundling.
I removed this line of code:
<webopt:bundlereference runat="server" path="~/Content/css" />
and also removed the Bundle.config file.
In my <head> tag I now have the below:
<link rel="stylesheet" runat="server" href="/Content/Site.css" type="text/css" />
<link rel="stylesheet" runat="server" href="/Content/bootstrap.css" type="text/css" />
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 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.. :)
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">
Problem:
.aspx pages will not render the css associated with on the masterpage
to see image hold down ctrl and use your mouse wheel to zoom in
Setup:
IIS 7 windows 2008 r2 server
.Net framework 4.0
I have used the aspnet_regiis.exe -i
Static content is enabled
Already had a site running, created a virtual directory within its hierarchy and placed the files within
Page Directive of screenshot page:
<%#Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Solomon Conversion.aspx.cs" Inherits="AcuFinal.Solomon_Conversion" %>
Asp.Net Code of Master Page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
AcuConvert
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Conversion Data Validation.aspx"
Text="Conversion Data Validation" Value="Conversion Data Validation"/>
<asp:MenuItem Text="Solomon Conversion" Value="Solomon Conversion"
NavigateUrl="~/Solomon Conversion.aspx">
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
should be
<link href="<%= Page.ResolveUrl("~/Styles/Site.css") %>" rel="stylesheet" type="text/css" />
as should the rest of urls containing virtual path when they are not properties of server controls.
try :
<link href="<%=Url.Content("~/Styles/Site.css") %>" rel="stylesheet" type="text/css" />