I saw several post similar to mine but couldn't find a solution that fits my issue (the masterpage issue :) ).
I have a masterpage with side menu , that I created with a list (ul > li).
Whenever I select a li which refers to nowhere("ftq" for example) - the function works great and changes the css setting as I want.
But, whenever I select a li which refer to a "real" page ("updateinspec.aspx" for example) and there's a postback, all the CSS is gone .
here's the code - any help will be great
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="MasterVC.master.vb" Inherits="HangarApp.MasterVC" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="MasterCSS.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function myFunction(x) {
x.classList.toggle("change");
}
var lst;
function cngclass(obj) {
if (lst) lst.className = '';
obj.className = 'listactive';
lst = obj;
}
</script>
<asp:ContentPlaceHolder ID="headtitlePH" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="topcontent">
<div class="menudiv" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="divtitle">
<img src="../images/logo1.png" />
<asp:Label runat="server" ID="userlbl" style="padding:12%;"></asp:Label>
</div>
</div>
<div id="subtopdiv">
<div id="sub_inspec">
<br />
<asp:Label ID="stationname" runat="server" CssClass="subtopdiv"></asp:Label>
<asp:Label ID="stationcode" runat="server" Visible="false" ></asp:Label>
<asp:Label ID="linecode" runat="server" Visible="false"></asp:Label>
<asp:Label ID="typecode" runat="server" Visible="false"></asp:Label>
<asp:Label ID="lblinspecnum" runat="server" Visible="false"></asp:Label>
</div>
</div>
<div id="maincontent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<h1></h1>
<div class="innerdiv" id="divlefttop">
<asp:ContentPlaceHolder ID="divlefttopPH" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="innerdivdtop" id="divrighttop" runat="server">
<asp:ContentPlaceHolder ID="divrighttopPH" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="innerdivld" id="divleftdown" runat="server">
<asp:ContentPlaceHolder ID="divleftdownPH" runat="server" >
</asp:ContentPlaceHolder>
</div>
<div class="innerdivd" id="divrightdown">
<asp:ContentPlaceHolder ID="divrightdownPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="leftcontent">
<div id="menuinsp" runat="server">
<ul>
<li><a onclick="cngclass(this);" class="active" href="Inspec_Main.aspx">Inspection APP</a></li>
<li><a onclick="cngclass(this);" class="nactive" href="#ftqpage">FTQ</a></li>
<li><a onclick="cngclass(this);" class="nactive" href="#managepage">MANAGE</a></li>
<li><a onclick="cngclass(this);" class="nactive" href="UpdateInspec.aspx">UPDATE</a></li>
<li><a onclick="cngclass(this);" class="nactive" href="#about">ABOUT</a></li>
</ul>
</div>
</div>
<div id="footercontent">
<label>LAHAV IT SYSTEM - DANA B COHEN - TEL:58840</label>
</div>
<asp:ContentPlaceHolder ID="footertitlePH" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
I think your master page isn't in the same directory as the aspx pages and you didn't use correct href in below link:
<link href="MasterCSS.css" type="text/css" rel="stylesheet" />
You need use server side link like this.
Modify your Mastercss.css link as given below and let us know if problem still exist.
<link href="/MasterCSS.css" type="text/css" rel="stylesheet" />
Related
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.
I am having a problem with the AutoPostBack event. My dropdown"s AutoPostBack does not work. It worked fine until I introduced bootstrap into the mix.
Dropdown
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="namesSQL"
DataTextField="Name" DataValueField="EmplID" AutoPostBack="true"
CssClass="form-control">
</asp:DropDownList>
SQL Data Source
<asp:SqlDataSource ID="namesSQL" runat="server"
ConnectionString="<%$ ConnectionStrings:Myapp %>"
SelectCommand="SELECT EmplID, EmpName, LastName,
{ fn CONCAT(EmpName, LastName) } AS Name
FROM Employees
ORDER BY { fn CONCAT(EmpName, LastName) }">
</asp:SqlDataSource>
The data source works fine, I listed it since I know someone will ask for it...
UPDATED
OK, I found that when I plugged that page into another master, it worked. Here is the master that it did NOT work in. From the original that worked, I formatted some divs to encapsulate the content sections, and added bootstrap links.
<%# Master Language="VB" CodeFile="is.master.vb" Inherits="masterPages_subMaster" %>
<!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="Head1" runat="server">
<title>Home</title>
<%--<link href="~/App_Themes/default/subpage.css" rel="stylesheet" type="text/css" media="screen" />--%>
<link rel="shortcut icon" type="image/x-icon" href="../images/green_m.ico" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" type="text/css" />
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="col-md-10 col-md-offset-1"
<form id="form1" runat="server">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<asp:Repeater runat="server" ID="topmenucontainer" DataSourceID="SiteMapDataSourceMainNavigation">
<ItemTemplate>
<li >
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("url")%>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</nav>
<asp:SiteMapDataSource ID="SiteMapDataSourceMainNavigation" runat="server" ShowStartingNode="False" SiteMapProvider="isMapProvider"/>
<div class="row">
<div class="col-md-10">
<h1>Information Services</h1>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<br />
<div class="row">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" />
</div>
</form>
</div>
</div>
</body>
</html>
I am confused if we can apply css to divs that are inside the DataList.I have a stylesheet and a aspx page that is inheriting a master page.The master page has a contentplaceholder.And the content placeholder is where i have defined my DataList.Now i have many divs inside the datalist that needs styling.How do i give them style form stylesheet NOT from the aspx page itself like <div style=" height:200px " >.It works but i need to define the css in the stylesheet not in the aspx.
Here my datalist
<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
As you can see i have a div at the starting of the contentplaceholder whose id is ccont and i can apply css there from stylesheet.Its not working for the divs inside the datalist.
EDIT
Here's my css
#lft_c_down
{
background-color:Aqua;
color:Red;
}
DataList's Default rendered html is Table. That is why your css is not working. If you dont want table style, Try Repeater this css will work.
Please try this.
Place a ContentPlaceHolder in the Head section of your Masterpage like this;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ccont" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Then, in the Webform, put the link to the external CSS file in head sections placeholder like this;
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="24857957.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ccont" runat="server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="lft_c">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='http://placehold.it/140x140' Height="140px" Width="140px" />
<br/>
</div>
<div class="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"product") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>
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
I can't seem to get my JQuery Growl notification to fire.
I have included pretty much the entire masterpage of my site for reference.
What I've Tried.
This started out in a content page but didnt work so i moved it to the master page to try and eliminate the issue as not having anyting to do with the content pages themselves.
I have a reference made in my masterpage to a jquery.blockUI.js CDN which i beleive is valid.
I tried throwing a button directly in my masterpage's footer and using the default blockUI example for a growl notification.
I can't seem to get it going. Basically on button click it just seems to do a screen refresh and thats it. Any help would be stellar.
Below is my code:
<!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>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../style/style.css" media="all" />
<script src="../script/modernizr.custom.51561.js" type="text/javascript"></script>
<script src="http://code.google.com/p/yes/source/browse/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="container">
<div id="header">
<div id="logincontrol" style="text-align: right">
<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>
<div id="nav">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
DataSourceID="WebSitemap" ItemWrap="false" />
<asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<div id="footer">
<button id="LoginButton1">GROWLL</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#LoginButton1').click(function () {
$.growlUI('Growl Notification', 'Have a nice day!');
});
});
</script>
</body>
</html>
The reference you were adding for the js was actually retrieving html instead of js
I also had to add an onlcick to prevent the page to post
see here the fiddle http://jsfiddle.net/ySz8x/
and just in case here is the code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../style/style.css" media="all" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://yes.googlecode.com/svn/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="container">
<div id="header">
<div id="logincontrol" style="text-align: right">
<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>
<div id="nav">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
DataSourceID="WebSitemap" ItemWrap="false" />
<asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<div id="footer">
<button id="LoginButton1" onclick="return false">GROWLL</button>
</div>
</div>
</form>
<script>
//$(document).ready(function () {
$('#LoginButton1').click(function () {
$.growlUI('Growl Notification', 'Have a nice day!');
});
//});
</script>
</body>
</html>
btw... this is not the jGrowl I've used in the past :)