IIS issue with CSS (asp.NET) - asp.net

For some reason when I deploy my app on IIS sever the menu item appears to be ignoring or picking up incorrect css.
This is the html when deployed to IIS6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTYxMDM2MDYPZBYCZg9kFgICAw9kFgICBQ9kFgYCAQ8PFgYeBFRleHQFHEdEUyBUcmFkZSBmZWVkIGZpbGUgZGV0ZWN0ZWQeCUZvcmVDb2xvcgolHgRfIVNCAgRkZAIDDzwrABECAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIBZAEQFgAWABYAFgJmD2QWBAIBD2QWBmYPDxYCHwAFDEVVUl9DTVNSQUNDM2RkAgEPDxYCHwAFDEVVUl9DTVNSQUNDM2RkAgIPDxYCHwAFEzIzLzAzLzIwMTIgMTA6MzA6MzVkZAICDw8WAh4HVmlzaWJsZWhkZAIHDzwrABECAA8WBB8DZx8EAgJkARAWABYAFgAWAmYPZBYGAgEPZBYGZg8PFgIfAAUIQmVybSBHQlBkZAIBDw8WAh8ABQZnZHNsZG5kZAICDw8WAh8ABQhCZXJtIEdCUGRkAgIPZBYGZg8PFgIfAAUMR0JQIEVYTyBCQVNFZGQCAQ8PFgIfAAUGZ2RzbGRuZGQCAg8PFgIfAAUMR0JQIEVYTyBCQVNFZGQCAw8PFgIfBWhkZBgEBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUpY3RsMDAkSGVhZExvZ2luVmlldyRIZWFkTG9naW5TdGF0dXMkY3RsMDEFKWN0bDAwJEhlYWRMb2dpblZpZXckSGVhZExvZ2luU3RhdHVzJGN0bDAzBSFjdGwwMCRNYWluQ29udGVudCRHRFNfQktfR3JpZHZpZXcPPCsADAEIAgFkBR1jdGwwMCRNYWluQ29udGVudCRDQUZfQktfR3JpZA88KwAMAQgCAWQFE2N0bDAwJEhlYWRMb2dpblZpZXcPD2QCAWQXvkqySzPs02Fx8dSg92SF1P6wakC6uTViBjZnDE5UKA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
and this is on localhost
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ctl00_NavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_NavigationMenu_1 { text-decoration:none; }
.ctl00_NavigationMenu_2 { }
.ctl00_NavigationMenu_3 { border-style:none; }
.ctl00_NavigationMenu_4 { }
</style></head>
<body>
<form name="aspnetForm" method="post" action="Login.aspx?ReturnUrl=%2fDefault.aspx" 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="/wEPDwUIMTgxOTUzNzlkZCNjjPhsCt06uFnsECs0BUpSQWBv" />
</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>
Any ideas why this is causing an issue when deployed? Site is using a master page and forms authentication although the title and otehr layout features are working fine from the css sheet.
Note, I have just moved from apache web server to iis and was working fine on Apache.
Any help much appreciated.
This is the code from master page, anything obvious here?
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="FoundryStatusReport.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 style="font-family: Tahoma; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none;">
Report <br />
</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="~/Login.aspx"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="false" Orientation="Horizontal"
StaticMenuItemStyle-CssClass="MenuItemCSS">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
<asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Tahoma"
Font-Size="Medium" ForeColor="Red" NavigateUrl="~/Default.aspx">London Checks</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Tahoma"
Font-Size="Medium" ForeColor="#006600" NavigateUrl="~/Pages/HKG_Exotics.aspx">Asia Checks</asp:HyperLink>
</div>
</form>
</body>
</html>

Ok, this actually ended up being due to a different ASP.NET version specified in the webserver. Specified version was 4 instead of 2.x.
See http://abhijitjana.net/2010/05/18/css-friendly-menu-control-in-asp-net-4-0/
Thanks all

Related

How to add drop down list server and drop down branches on same line or Rows?

I work on asp.net web forms . I face issue on design page print server drop down list and
branches drop down list not display on same line or rows
so How to make both drop down list on same line or rows by bootstrap or CSS.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body
{
padding: 20px
}
</style>
</head>
<body>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<form id="form1" runat="server">
<div style="max-width: 400px;">
<h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
<div class="row">
<div class='col-md-4'>
<asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
<asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
<div class='col-md-4'>
<asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
<asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
</div>
</div>
</form>
</body>
</html>
Expected result
align two drop down same line
last updated post
two drop down list display on same row as i need
but very closed from each other so how to leave space
img show status
You are using Boostrap version 3.0.3, try using the latest version currently available (5.2.3), in this case it works correctly!
last updated post
To leave space between rows you can use bootstrap classes; I removed the max-width that reduced the space, now it commands the container class
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body
{
padding: 20px
}
</style>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<!--OLD STYLE -->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />-->
<!--New style-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<form id="form1" runat="server">
<div><!--style="max-width: 400px;" is no longer needed because it is handled by container (bootstrap)-->
<h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
<div class="container">
<div class="row">
<div class="col-6">
<p>Column 1</p>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
<asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
<asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
<div class="col-6">
<p>Column 2</p>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
<asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
<asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
</div>
<asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label>
<asp:TextBox ID="txtDate" runat="server" AutoPostBack = "True" TextMode="Date"></asp:TextBox>
<asp:Label ID="Label3" runat="server" Text="FromTime"></asp:Label>
<asp:TextBox ID="txtFromTime" runat="server" TextMode="Time" AutoPostBack = "True"></asp:TextBox>
<asp:Label ID="lblToTime" runat="server" Text="ToTime" ></asp:Label>
</div>
</div>
</form>
</body>
<!--OLD JS-->
<!--<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>-->
<!--New JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</html>
Or you can go ahead and replace one version of bootstrap at a time and check from which version everything works correctly

Cannot add Dropdown in asp.net web forms with materialize.css

First of all I am a newbie to asp so may be the question is too silly but still I am not being able to add the dropdown list to my web pages after using materialize.css .Without it dropdown is working fine but on linking the files of materialize it is not working.I have tried adding both the dropdown lists from the toolbox as well as the one belonging to materialize but it is not getting displayed although the code is present.How to solve this?
Here is code snippet of my master page with a dropdown added from toolbox
`
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
<link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
<title></title>
<style>
.wraped {
margin-top:10px;
margin-left:20px;
margin-right:20px;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="wraped">
<div class="container" style="width:80%">
<form id="form1" runat="server">
<div class="row">
<!--Navbar-->
<div class="col s4">
<asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
</div>
<div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
<asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
<StaticHoverStyle BackColor="#003300" ForeColor="White" />
<StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<!--Content-->
<div class="col s12" style="margin-top:20px;">
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList><!--Here is the drop down-->
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
`
And this is the code snippet with dropdown list of materialize
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="font/material-design-icons/material.css" rel="stylesheet" type="text/css" />
<link href="styles/materialize.min.css" rel="stylesheet" type="text/css" />
<title></title>
<style>
.wraped {
margin-top:10px;
margin-left:20px;
margin-right:20px;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="wraped">
<div class="container" style="width:80%">
<form id="form1" runat="server">
<div class="row">
<!--Navbar-->
<div class="col s4">
<asp:Image ID="logo" CssClass="z-depth-3 responsive-img" ImageUrl="~/images/logo.png" runat="server" Height="122px" Width="214px" />
</div>
<div class="col s6 offset-s2" style="border-bottom:solid 4px #669900;margin-top:25px;" >
<asp:Menu ID="Menu1" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" runat="server" StaticMenuStyle-HorizontalPadding="10px" Width="100%">
<StaticHoverStyle BackColor="#003300" ForeColor="White" />
<StaticMenuItemStyle Font-Names="Corbel" Font-Size="Large" ForeColor="#CC3300" HorizontalPadding="23px" Font-Bold="True" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<!--Content-->
<div class="col s12" style="margin-top:20px;">
<div class="input-field">
<select>
<option value="" >Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div><!--Here is the drop down-->
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
I am using Visual Studio 12
Use CssClass="browser-default" inside the DropDownList tag.
You can use
class="browser-default z-depth-5"
for asp dropdownlist control.

Folder is invisible in Site.master ,when using href?

Given this Site.master :
<%# Master Language="C#" AutoEventWireup="true" Inherits="SiteMaster" Codebehind="Site.master.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:Panel ID="panelLogin" runat="server" Visible="false">
Log In
</asp:Panel>
<asp:Panel ID="panelLogout" runat="server" Visible="false">
Welcome <span class="bold"> <asp:Literal ID="LoginName" runat="server"></asp:Literal></span>!
<asp:LinkButton ID="lnkLogout" runat="server" onclick="lnkLogout_Click">Logout</asp:LinkButton>
</asp:Panel>
</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="~/About.aspx" Text="About"/>
</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>
When I run my app (web app) , I get here :
When I hit login , I reach here
It seems that Site.master can't see the Login.aspx .
But when I place Login.aspx outside of the Account folder , it works OK , meaning doing this :
Log In
Any idea how to fix the visibility ?
Here is the hierarchy
check the folder for login..
it is not ~/login.aspx but ~/Account/login.aspx

Why do I get "Error: object expected" when trying to call jQuery?

Code produces an "error object expected" on:
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
What is wrong in this code?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="color: #009933; font-weight: 700">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<p style="color: #336600; font-weight: 700">
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
</p>
</form>
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
</body>
</html>
You probably need to include a jQuery reference inside your <head>
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=609
IF you do have jQuery and that is not the problem, you will not be able to make a label appear using javascript if you have it hidden server side...
This will not be part of the page, so you cannot just make it visible:
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
You could hide it like this perhaps
<asp:Label ID="Label1" runat="server" Text="Label" style="display:none;"></asp:Label>
Does that help?

How to apply CSS to a textbox?

I have this code, and it renders this HTML. How can I apply CSS to my control if they are named ctrctrctr-00000 or something else like that that is only useful to the VIEWSTATE?
<!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><title>
</title><link href="../global.css" rel="stylesheet" type="text/css" />
Informacion General: Paises
</head>
<body>
<form name="aspnetForm" method="post" action="Pais.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyMDk1NTY2MGRkwAKu2OIV85kXfcUcAefBBNmSuRY=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLSha7NBAKqw7ARAvjQlaIKhJ2HMftmmOoxe/+aE4sG3D32QtA=" />
</div>
<div>
<input name="ctl00$ContentPlaceHolder1$txtPais" type="text" id="ctl00_ContentPlaceHolder1_txtPais" />
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id="ctl00_ContentPlaceHolder1_btnSubmit" />
</div>
</form>
</body>
</html>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Frontend._Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Prueba de Escritorio</h1>
<asp:TextBox ID="txtPais" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Guardar" onclick="btnSubmit_Click" />
</div>
</form>
</body>
</html>
How can I use a CSS selector to target ALL textboxes on the page regardless of name?
Thank you.
Why wouldn't you do this either:
input[type=text] { /* style */ } (standard)
or
input.text { /* style */ } (not as standard)
???
You can give it a CSS class, like this:
<asp:TextBox ID="txtPais" runat="server" CssClass="textbox" />
Then just use add what you need in your CSS:
.textbox { color: red; }
The CssClass property doesn't get mangled like the ID and name attributes.
you can use jQuery and do it like this:
$('input[id$=_txt]').addClass('yourClassName maybeAnotherClassName');
$(document).ready(function () {
$("input[type=text]").addClass("textBoxCSS");
}
For applying classes to text boxes on a page, you can further customize the selectors and be more specific.

Resources