I'm new to ASP.NET coming from a PHP and ColdFusion background and I have a pretty simple question:
Within my Master Page, how can I make one of my CSS file links a variable, so when the appropriate page (Home for example) comes in, it contains the variable with the correct CSS file to use?
<!-- Custom CSS Files -->
<link href="<Page Specific CSS Variable>" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
Would this be the answer? Home.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="PageStylesheet" runat="server">
<link href="../../Content/Styles/Home.css" rel="stylesheet" type="text/css" />
</asp:Content>
And then in Master Page:
<!-- Custom CSS Files -->
<asp:ContentPlaceHolder ID="PageStylesheet" runat="server" />
Is that right?
One solution would be to add a property to the master page that you can set from each web content form. So for example:
MasterPage.Master
<!-- Custom CSS Files -->
<link href="<%=this.PageSpecificCSSURL%>" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
MasterPage.Master.cs
private string mPageSpecificCSSURL = string.Empty;
public string PageSpecificCSSURL
{
get
{
return mPageSpecificCSSURL;
}
set
{
mPageSpecificCSSURL = value;
}
}
WebForm1.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
((SiteMaster) this.Master).PageSpecificCSSURL = "mypage.css";
}
Use a content section in the page header in the master page. That's its purpose; for CSS and/or script and whatnot that are specific to a content page. The content will be merged with the content of the master page, resulting in a full head section. All content placeholders can be put pretty much anywhere; title, head, foot, whatever you like, and you can nest master pages. They are just templates; you don't have to restrict yourself to BODY content.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="REO.master.cs" Inherits="REO.REO" %>
<!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>REO CMS</title>
<link rel="Stylesheet" href="REO.css" type="text/css" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jqueryui-1.8%20jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AddCaseContact.aspx.cs"
Inherits="REO.AddCaseContact" MasterPageFile="~/REO.Master" %>
<asp:Content ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function showMessage(wTitle, msg) {
var $dialog = $('<div></div>')
.html(msg)
.dialog({
autoOpen: false,
title: wTitle,
modal: true,
height: 300,
buttons: { "Ok": function() { $(this).dialog("close"); } }
});
$dialog.dialog('open');
}
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
With you're help, the answer is within my edits. Perfect.
Related
net site with master and child pages. I am generating title via .cs code file on each child page. It works fine on the desktop. However, when I try to browse via mobile, it throws the above error. Below is code for master page.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="xyz.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" type="text/css" >
</head>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
****child page code behind ***
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlTitle title = new HtmlTitle();
title.Text = "child page title";
Header.Controls.Add(title);
}
}
*** child page ****
<%# Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="childpage.aspx.cs" Inherits="xyz._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
what is the best way to handle this. Appreciate your thoughts on this.
I'm trying to create razor #section in one of my views, using umbraco:Macro tag, in order to add scripts/styles specific for each view into head tag.
My current code looks like this(head section of master page):
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css">
<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.js"></script>
<script type="text/javascript" src="/js/js.js"></script>
<umbraco:Macro runat="server" language="cshtml">
#if(IsSectionDefined("JSIncludes"))
{
#RenderSection("JSIncludes")
}
#if(IsSectionDefined("CSSIncludes"))
{
#RenderSection("CSSIncludes")
}
</umbraco:Macro>
</head>
and this(actual section in view):
<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">
<umbraco:Macro runat="server" language="cshtml">
#section JSIncludes
{
<script type="text/javascript" src="/js/main_page.js"></script>
}
</umbraco:Macro>
But when i'm trying to open a page, i'm getting "Error loading MacroEngine script (file: )" error on top of my page.
Do anyone know the reason of this?
Would be great, if somebody knew how to add things like this properly.
Thanks in advance.
You don't need to use a razor macro to add page-specific script references, use a ContentPlaceHolder
Master page:
<head>
<asp:ContentPlaceHolder ID="PageScripts" runat="server" />
<asp:ContentPlaceHolder ID="PageStyles" runat="server" />
Content page:
<asp:Content ID="PageScript" runat="server" ContentPlaceHolderID="PageScripts">
<script type="text/javascript" src="/js/main_page.js"></script>
</asp:Content>
Reference
I have Master page and some content pages.
I want to assign different css file to each of the content pages.
(without using themes)
How can I do that?
I did that once by adding a header-placeholder in the master-page, and explicitly specifying the css in the content-pages.
In the Master:
<head runat="server">
<title></title>
<link href="~/css/common.css" rel="stylesheet" type="text/css" />
<!-- loads of other stuff / -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
and in the Content:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../css/SomeContent.css" rel="stylesheet" type="text/css" />
<script src="../js/SomeJsToo.js" type="text/javascript"></script>
</asp:Content>
If you're using visual studio 2008, you're going to have a real easy time. First make a master page 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="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Now make a content page based off of this master page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Now in the Content1 placeholder you just place the stylesheet that you would like to have applied to that page.
That's it. Hope this works for you.
Use an external master CSS file for all pages using:
<link rel="stylesheet" type="text/css" href="master.css" />
Then you can use embedded CSS on the individual content pages using the style tag, e.g:
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
I have tried many of the above ways but still getting error. Finally i use the following codes on the page load and it works fine:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim css1 As New HtmlLink
css1.Href = ResolveUrl("report.css")
css1.Attributes("rel") = "stylesheet"
css1.Attributes("type") = "text/css"
css1.Attributes("media") = "all"
Me.Page.Header.Controls.Add(css1)
End Sub
In my view, I have included the Master page as follows:
<%# Page Title=""
Language="C#" MasterPageFile="~/Views/Shared/Mall.Master"
Inherits="System.Web.Mvc.ViewPage<DomainModel.Entities.Seller>" %>
And in my Mall.master file, I add a link to include a general css file
<link rel="Stylesheet" href="../../Content/MallMaster.css" type="text/css" />
However, I need another more specific purpose css file CheckOut.css in my view. Since the style defined in Checkout.css only applies for one page, I do not want to include the file in the master page. Is there any way to include the file in my view?
You should add a new content () placeholder in your MasterPage and then in your view you can add another css to this placeholder.
<asp:ContentPlaceHolder ID="head" runat="server">
<title></title>
<link rel="Stylesheet" href="../../Content/MallMaster.css" type="text/css" />
</asp:ContentPlaceHolder>
This may be helpful for you - How to pass page’s meta tags in ASP.NET MVC?
If you don't want to override existing tags in the master, you can add a content placeholder inside the head tag too:
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="title" runat="server">
Default Title</asp:ContentPlaceHolder>
</title>
<!-- The ContentPlaceHolder is placed inside the title tag to make sure that the
document validates in the VS editor - <title> needs to be a direct child of
<head>. The output will validate. -->
<script src="theAllFamous_jQuery.js" type="text/javascript" />
<link href="sitewide.css" type="text/css" rel="Stylesheet" />
<asp:ContentPlaceHolder ID="headContent" runat="server />
</head>
And in your view:
<asp:Content ID="title" ContendPlaceHolderId="title" runat="server">
Page specific title
</asp:Content>
<asp:Content ID="head" ContentPlaceHolderId="headContent" runat="server">
<link href="pagespecific.css" type="text/css/ rel="Stylesheet" />
</asp:Content>
That way you won't have to duplicate code that you want in all head tags on your site.
I have an ASP.NET page .In the page load i set the value of a public variable.and in the inline coding part,I Am loading a CSS which is the folder with the name which is available in the public variable.My HTML markup is as follows
<%# Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Theme="GridView" Inherits="GUI.MyPage" %>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyPage</title>
<link href="../Vendors/<%=vendorName%>/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%=vendorName %> <!-- here value is printed correctly -->
...
</body>
and in my code behind
public partial class MyPage: MyCommonClass
{
public string vendorName = "";
protected void Page_Load(object sender, EventArgs e)
{
vendorName = "ACLL";
}
}
But when i run the page, the <%=VEndorId%> is not replaced with the value in it .But in the Body,It is printing properly.But in the head it is not coming.I checked the ViewSource and find the source HTML as follows
<link href="../Vendors/<%=vendorName%>/Lib/css/tradein.css" rel="stylesheet" type="text/css" />
The two options are:
<link href="<%= string.Format("../Vendors/{0}/css/style.css", vendorName) %>" type="text/css" rel="Stylesheet" /> // as Greco stated
and
<style>
#import url("../Vendors/<%=vendorName%>/css/style.css");
</style>
Add the runat="server" tag to the link element.
Similar question and good answer here.
The solution is to move the quotes around the inline code into the code
<link href=<%="'../Vendors/" + vendorName + "/css/style.css'"%> rel="stylesheet"...
^ ^