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>
Related
I have an large existing ASP.NET WebForms application. This application has a masterpage who manager security, navigation, ...
Pages developped are in a ContentPlaceHolder.
I would like to develop new pages in JS with web components. To use a web component on a page, it must be imported (<link rel="import" href="...">). This import must be on the <head> part of the page. In my case, the <head> is on the master page. So I have to import all the existing web components in the master page to be able to use them.
It does not sound like a very good idea.
How can I do it otherwise ?
Asp.Net lets you place ContentPlaceHolder in head tag. You can load the web components required by the page instead of loading them all in Master Page.
Master Page
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cpHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cpBody" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Web Form
<asp:Content ID="Content1" ContentPlaceHolderID="cpHead" runat="server">
<link rel="import" href="...">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpBody" runat="server">
</asp:Content>
Your HTML will look like
<html>
<head>
<title></title>
<link href="..." rel="import">
</head>
<body>
</body>
</html>
You would normally use RegisterClientScriptInclude. This will add the script file to the top of the page, but not in the <head>.
ClientScript.RegisterClientScriptInclude("myScript", "myJavaScriptFile.js");
If you really want it in the <head> you need to use a HtmlGenericControl
HtmlGenericControl genericControl = new HtmlGenericControl("script");
genericControl.Attributes.Add("type", "text/javascript");
genericControl.Attributes.Add("src", "myJavaScriptFile.js");
this.Page.Header.Controls.Add(genericControl);
It does not matter where you place this code (Master, Page, User Control). Aspnet will ensure they end up in the right place client side.
I have a master page which has 10 content pages linked to it.
Now a CSS file attached to the Master page gets applied to the content page on its own.
If however, I want a different CSS file only for one of the content pages (and none of the master page CSS should apply to it). How to do it??
You can add that style to a placeholder of the specific page not the masterpage
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Detail.aspx.cs" Inherits="Test.Detail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="<%= Page.ResolveUrl("~/styles/style.css")%>" type="text/css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
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>
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.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<link rel="stylesheet" type="text/css" href="Home.css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<div id="banner" style="font-family: Calibri, Serif; color: #FFFFFF">
blah blah
</div>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Home.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home"
MasterPageFile="~/MasterPage.master" Title="Welcome to StuartStudios!"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
</asp:Content>
Does Home.aspx not print whatever I define in the ContentPlaceHolder1 ? At the minute it prints nothing out. :S
When you specify markup in a ContentPlaceHolder inside of a MasterPage, that markup will only be rendered if the pages that use your master pages don't use the ContentPlaceHolder. So in Home.aspx, if you get rid of the Contact1 element, you should see your "banner" div.
So if you want your banner div to appear on ALL pages, you should move it to outside the ContentPlaceHolder control.
On your individual pages that use your master page, the Content tag should contain the stuff that's unique to the specific page.
No... ContentPlaceholder1 should be left blank in the masterpage.
I am no expert in ASP.Net, but as far as I understand the way <asp:ContentPlaceHolder /> works, when you add a <asp:Content> tag in your page file, you override the content of the ContentPlaceHolder in the master page. The contents of which will only be displayed if you do not have a corresponding Content tag.
Two things I see:
Your div in your master page has color set to white. So unless I'm mistaken, you're printing white on white.
Your Content item in Home.aspx IS empty, so why would it print anything else?