Iv'e got a content page with a link to a style sheet which I want to be specific for that page , i.e. I want the design to be specific for that page when it loads and takes its place in the contentplaceholder on the main page.
IN MY CONTENT PAGE :
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
</asp:Content>
IN MY MAIN PAGE :
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
MY STYLE SHEET ~/Styles/StyleSheet1.css just for example I'll give this id to some table in my content page.
#defualt_tbl
{
background-color:Gray;
}
<table id="defualt_tbl">
The table does not become gray , when I click viewsource in the master page the link is present in the head section.
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
You can only use the ~ root specifier in server controls, the browser doesn't understand that URL, and doesn't know where your application root is either even if it would.
Put runat="server" in the link tag, or use an URL that is relative to the site root:
<link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
I'm not sure you can use the tilda ~ for the path in the link. I think the tilda(~) is a .net shortcut, and since your just rendering html the browser won;t know where to look.
found it !
but i belive your answers work as well .
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href='<%= ResolveClientUrl("~/Styles/StyleSheet1.css") %>' rel="stylesheet" type="text/css" />
</asp:Content>
Related
In MVC one can use in _Layout.cshtml:
#if (IsSectionDefined("styles"))
{#RenderSection("styles", required: false)}
together with #Section styles on content page / layout to include css styles within <head> if given section is needed.
Is there an efficient way to mimic the same behaviour in Web Forms?
To summarise: I would like to have a possibility to render css and js on master page, only if they are required by specific child page based on that master page. So it will be not be included on pages which do not require those css and js files.
You could use ContentPlaceHolder. In your master page, define a content place holder as follows:
<head runat="server">
<title>..</title>
<meta charset="utf-8"/>
..
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
..and those child pages that require a special css or js files can use this content place holder to inject their needed files, e.g.:
<%# Page Title="" Language="C#" MasterPageFile=".." AutoEventWireup="true" CodeBehind=".." %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="some css file dedicated only to this child page" rel="stylesheet" />
<script src="..js.."></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
..
<h1><asp:Label ID="lblPageTitle" runat="server" Text=""></asp:Label></h1>
..
</asp:Content>
in a ASP.net C# application
I have a Checkbox with a custom css.
the Css file is:
<link href="css/default.css" rel="stylesheet" type="text/css" />
the check box
<input id="boxcheck" runat="server" type="checkbox" checked="checked" class="customCheckbox" onclick="ChangeSett();"/>
Everything works correctly.
But when I put it inside an update panel. The style is lost when I do a partial postback.
Thanks for any help
I had similar problem.
I solved it moving css <link .. from the <page> to the <header>.
Since I use a MasterPage and I don't want the link in all pages, I found useful putting a ContentPlaceHolder in the MasterPage's Header
<head id="Head1" runat="server">
...
<asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server"/>
</head>
and then the link inside the desired page:
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server">
<link rel="stylesheet" type="text/css" href="CSS/my.css" />
</asp:Content>
How do I include CSS reference in only certain pages on my asp.net website? If I include the reference in my master page, all pages of the website share the CSS reference.
Just add a CSS ContentPlaceHolder with a default value in it.
Basically, the CSS file you specify as default will be included unless you override that placeholder with an <asp:Content /> tag from a child page.
Your Master Page should look something like this.
<head>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/master.css" type="text/css" />
</asp:ContentPlaceHolder>
</head>
Then from any pages using that Master Page, you can simply override that with a different stylesheet.
On (example) AboutUs.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/form.css" type="text/css" />
</asp:Content>
In my situation, i used the same masterpage from different locations in the solution. And since the ~ (Tilde) prefix on the reference to my css files, i added a response.write to the reference like so:
<%= ResolveUrl("~/css/myStyle.css") %>
You can use more than one Master page on your site.
You can also use nested master pages. The Top level might have the general site structure, and then one Master nested master page for each of your different areas.
When you right click your project and select Add, you choose the option WebContentForm, instead of WebForm. Then you can select the appropriate masterpage.
In your nested masterpages, you set the MasterPageFile equal to your top level masterpage.
Edit When combined with #Marko's approach you could have the following...
The advantage here is that all of your overrides only have to be written once.
Top Level MasterPage:
<head>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/default.css" type="text/css" />
</asp:ContentPlaceHolder>
</head>
Nested MasterPage with no override
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
//don't reference the Stylesheets ContentPlaceHolder and the default is rendered
Nested MasterPage One with override.css
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/override.css" type="text/css" />
</asp:Content>
Nested MasterPage Two with secondOverride.css
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/secondOverride.css" type="text/css" />
</asp:Content>
Then, just set the appropriate master page on any of your web forms.
Normally when we are using Master/Content style pages, we apply the css to Master page so every page child of the master page can use the style but I don't want this,I want I wanna apply css to content page directly instead of master page. Where should I put
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
that reference code ?
Thanks in advance by the way.
Normally I put a content placeholder in the head section of the master page. That way any content page can add extra css/js/etc references to the head of the page.
In your master page put the following
<head>
... title, meta tags, js and css links ...
<asp:contentPlaceholder id="head" runat="server" />
</head>
Then in your pages you can include extra elements in the head using this
<asp:content contentplaceholderid="head" runat="server">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</asp:content>
Put a content placeholder in the head portion of your master page. Not all content pages will need to place anything in it but this particular content page can place the CSS file you want to link.
You can't apply a style sheet to a content page only, it applies to the whole web page.
I have a page which has a masterpage. Do I put script and link tags inside the asp:content place holders or outside or does it matter.
When I put it outside, I get the following warning:
Only Content controls are allowed directly in a content page that contains Content controls.
I can see five (or 8) ways of doing it:
In the codebehind (.cs or .vb) using:
Scriptmanager.RegisterClientScriptinclude - using an absolute/relative path
Scriptmanager.RegisterClientScriptInclude - using an embedded resource
Scriptmanager.RegisterSlientScriptBlock - with your source inside
Adding it inline to your ASPX page in the designer
Sticking it inside the asp:content where the content lives inside the body tag.
Sticking it inside the asp:content where the content lives inside the head (You've said this isn't an option, so ignore this).
Adding it programmatically using the ScriptManager inside a control you use on the page as above.
"Only Content controls are allowed directly in a content page that contains Content controls" - did you forget the runat="server"?
If it's scripts and links for all pages, it should go outside any ContentPlaceHolders. If it's scripts and links for this page, it should go inside a Content inside the head. If it's default scripts, put it inside a head ContentPlaceHolder, and it can be replaced by the child page if needed. (VS usually complains about a ContentPlaceHolder in the head, but it works fine for me).
// master Page
<head runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
<!-- Default scripts and CSS -->
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="jquery.js"></script>
</asp:ContentPlaceHolder>
<!-- Mandatory scripts and css -->
<link rel="stylesheet" type="text/css" href="all.css" />
<script type="text/javascript" src="all.js"></script>
</head>
<body>
Master Page!
<asp:ContentPlaceHolder id="body" runat="server" />
</body>
// Child (no JQuery)
<asp:Content ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="default.css" />
<!-- Don't need JQuery -->
<script type="text/javascript" src="prototype.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
// Child 2 (with JQuery)
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
If you are referring to <asp:Content /> tags, you can't put anything outside of them in an .aspx page. So you're limited to putting them inside the <asp:Content /> tag. If you want <script /> and <link /> tags you need to either put a <asp:ContentPlaceHolder /> in the <head> of your master page, or add them dynamically via the Page's Controls collection.
Outside. Tthe inside of the ContentPlaceholders is going to be replaced with content from your pages anyhow so it doesn't make much sense to put anything in there.
outside. in the master page
The place holders are the wrapping controls for pages which descend from master pages.
Use asp.net scriptreference tag in master page to add reference to javascript file and you will be able to access all you need in the javascript file as if you would have added to the local page.