Not sure if the derived page is actually relevant to the problem here, but ran into an interesting gotcha on some code I'm working through at the moment.
I have a custom masterpage class, which derives from System.Web.UI.MasterPage so that it can be extended with additional useful properties.
The page that that uses this masterpage has a declaration at the top (note the Page Title being set).
<%# Page Language="C#" MasterPageFile="~/MasterPages/Landing.master" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" Title="Welcome to the site" %>
In addition, the master page has stylesheet references in the head which are pulled from a CDN that is defined in a config file.
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="<%= CDN %>/css/main.css" />
</head>
Now the example above obviously doesn't work, because the runat attribute in the head container means that the codeblock in the the link is static text, and renders as is, in the resulting html.
If I remove the runat attribute from head, the CDN works, but now I notice that the Title is no longer being set. If I debug, and try to access Page.Title in the Immediate Window, I get an exception:
// Using the Title property of Page requires a header control on the page. (e.g. <head runat="server" />).
So, is there a way to get the Page Title from the declaration, put my own title placeholder in the head and set it from the master page code-behind, or, is there a better way to dynamically set the CDN domain for the stylesheets? The only way I think I can do that is to build the entire html link tag(s) and append it to the header control, but I thought there might be a more elegant solution, so I'm asking here first.
Insofar as the CDN goes, we build a special Url.ResolveContentUrl() method that spoke with our configuration and pointed at the correct stylesheets (and any other static asset) depending on running mode, etc. So your dev and QA work locally then your production goes to the CDN with zero code changes.
Also, you should put a content placeholder into the part of the masterpage. It is the only way to fly.
In your masterpage, you can create a routine like this:
Public Sub AddStyleSheetLink(ByVal fileName As String, Optional ByVal media As String = "all")
Dim stylesheetLink As New HtmlLink
With stylesheetLink
.Attributes("href") = fileName
.Attributes("type") = "text/css"
.Attributes("rel") = "stylesheet"
.Attributes("media") = media
End With
MasterHeader.Controls.Add(stylesheetLink)
End Sub
And in your Page_Init (the page that inherits your masterpage), so something like this
CType(Master, MasterPage).AddStyleSheetLink(CND & "/css/main.css")
You can dynamically add what you need without messing with your <head> tags and page title.
Related
I've inherited an .net 4 aspx solution and I need to make a number of changes. All the styles in the main seem to be set in-line. So to make it a bit more maintainable I'm trying to create seperate css files for each aspx file. This may seem overkill, but it's a first stage of gradually moving over to .net core.
Ordinarily I'd simply do something like:
<asp:Content......
<link href="myStyleSheet"....
</asp:Content>
but the link statement causes an error stating that it cannot be nested within a td element. Placing it outside the content block also errors stating that Content is not supported outside the content block.
How should I reference my stylesheets on an individual basis without placing a reference to them all in the <head> section of the master page?
the link statement causes an error stating that it cannot be nested within a td element
Well, that's true. You don't put <link> elements inside a table. According to MDN they can go in "Any element that accepts metadata elements." <td> definitely is not such an element. <head> certainly is, and is probably the safest place to put these.
In your master page you can add a ContentPlaceHolder in the <head>:
<head runat="server">
<title>Your page title</title>
<!-- etc. -->
<asp:contentplaceholder id="HeaderPlaceholder" runat="server" />
</head>
Then in the individual pages put the <link> elements in a Content control for that placeholder:
<asp:Content ID="ContentHeader" ContentPlaceHolderID="HeaderPlaceholder" runat="server">
<link href="myStyleSheet" etc... />
</asp:Content>
This may seem overkill
Ya, it kinda does. Why a separate stylesheet for each page? Seems like it would make more sense to have one stylesheet for the site. For any styling that needs to target only a specific page and nothing else, some wrapper element around that page's content (such as a <div>) with a specific id will make that easy.
It seems straightforward enough, and testing it, it actually works:
<title>Default text</title>
In the Masterpage. And:
<%# Page Title="Specific name"...
in the specific page. Or in its codebehind:
Title = "Specific name";
So why am I asking? Because searching for it I've found all sorts of more complicated methods for doing that. (Yes. In Asp.net.)
So is there any drawback to the way I wrote above?
Not sure what you've found but that's how it is normally done.
Master page has the default, with overrides from specific pages.
An alternative (and I'm not specifying it's better) is to use a Content Placeholder.
On Master Page
<title>
<asp:ContentPlaceHolder id="PageTitle" runat="server">Default Title</asp:ContentPlaceHolder>
</title>
On specific page
<asp:Content ContentPlaceHolderID="PageTitle" runat="server">Specific Title</asp:Content>
But the drawback is that it's not as easy to set the title from code-behind.
What you have to know here that the <title></title> can not change from the code behind, or from the page declaration if is NOT inside the header with runat="server" So only if you have like that :
<head runat="server">
<title>Default Title</title>
</head>
you can have it as default, and then change it on pages. If the head is not runat="server" then the code behind can not find it to change it and the default title is shown.
All the rest stands as they are, I also use the same way, a default title on the master page, that I change it from the page if I can, or if not the default title is shown.
I'm really new to ASP.NET. I was just checking out a default ASP.NET web application. It comes by default with a few pages (Default.aspx, About.aspx etc).
I noticed that the Site.master file is the file where i create the main layout for my pages.
But i also noticed that the head tag has a runat="server" attribute.
I know this tag is used in <asp:XXX> tags, but why in a <head> tag???
Also, when i remove that attribute, then all of the styles are gone from the webpage. So appearently it's doing something. I just don't understand what its exactly doing...
So why is it there, on an HTML tag...??? I don't see any code in there that should be run on the server...
<head runat="server">
<title>Hallo</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<!-- This part is run on the server. So why does the head tag
also need a runat=server ?? -->
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
You asked why the styles are not applied anymore when removing the runat="server" from the<head> element.
It is simple: by running on the server side, the parser will replace the ~/ from the stylesheet declaration <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> with the root path of the application.
The ~ is illegal in a URL. Thus, if this is not replaced by the parser, the file will not be found thus the stylesheet will not be applied.
Oh, btw, setting the runat="server" attribute on the <head> element will force all its sub-elements to be run on the server, thus why the <link> element is run on the server.
The head element contains a runat="server" attribute, which indicates that it is a server control (rather than static HTML). All ASP.NET pages derive from the Page class, which is located in the System.Web.UI namespace. This class contains a Header property that provides access to the page's region. Using the Header property we can set an ASP.NET page's title or add additional markup to the rendered section. It is possible, then, to customize a content page's element by writing a bit of code in the page's Page_Load event handler.
' Programmatically add a <meta> element to the Header
Dim keywords As New HtmlMeta()
keywords.Name = "keywords"
keywords.Content = "master page,asp.net,tutorial"
Page.Header.Controls.Add(keywords)
For more info see Specifying Meta Tags in ASP.NET with VB.NET.
The runat="server" tag in ASP.NET allows the ability to convert/treat most any HTML element as a server-side control that you can manipulate via code at generation time. Some controls have explicit implementations, others simply revert to a generic control implementation.
The runat attribute basically tells ASP.Net that it needs to parse the element, its attributes and it's contents as a server control. Enabling code, on the server, to be executed to configure the response.
Without it, any child controls contained within the <head> section will not get parsed. So, any dynamic header includes, title manipulations or any other server-controls will not be interpreted.
I have a page login.aspx in a folder which is linked to masterpage. In the page load event of masterpage I have added some styles. When I redirect to login.aspx, it is just not able to get the styles from the masterpage's pageload event. I analysed the problem found that because my login.aspx is not in root folder, but in a folder which is inside root folder.
How do I run masterpage's pageload event in login.aspx?
You can place all your style sheets in a folder structure as follows:
App_Themes/Style/mystylesheet.css
Then in your content ASPX pages, just add Theme="Style" to the page directives and ASP.NET will automatically resolve it for every page that you have :-)
I assume you're talking about CSS stylesheets, and not ASP.NET styles (themes).
In that case, you can using a tag like the following from your Master page:
<link runat="server" rel="Stylesheet" href="~/scripts/common.css"
type="text/css" />
Or you can insert the same tag programmatically from your Page_Load() handler. However, in that case, it's best if you add the HtmlLink control to the Head control. Alternatively, you can add an ID to the control and use Visible="True" to control whether it appears in the generated markup.
If the code works when you move the code to your templatized page (not the but the one that uses it) then it suggests that you are using a relative link for the stylesheet.
I'd recommend using a relative URL off the root (something in the form of "/stylesheet.css") so that when you have pages that use the template, but in a subdirectory, it can resolve the stylesheet correctly.
The problem is that the section of the markup is located in the Master Page, so the reference to the StyleSheet cannot be made
Dim link As New HtmlLink
link.Href = "LocationOfStyleSheet.css"
link.Attributes.Add(HtmlTextWriterAttribute.Rel.ToString(), "stylesheet")
Page.Header.Controls.Add(link)
Hello all I have a problem. I have a masterpage that all of my Content pages inherit from. Within this masterpage I have a script tag pointing to the Javascript file folder ~/Scripts/validation.js
On my content pages I use different usercontrols that require the use of many of the functions within the validation.js file however if I dont put the <script> tag and the Javascript functions within a contentholder on the contentpage the usercontrols do not see these functions and I get errors like OnNameValidation is not defined.
Of course I can copy the Javascript code into all of the pages but that's 30+ pages and a maintenance nightmare if I find a bug in one of the Javascript functions.
So the question (if you haven't already figured out from my long dissertation) is how can I declare the script tag with the path to the validation.js file so that contentpages and their usercontrols etc. can access the functions/code.
What you are trying to do should work, so I suspect that the path to your javascript file is wrong (without seeing your html code I can only assume). Keep in mind that you can only reference the javascript file like this: "~/Scripts/validation.js" if you have the link in a HEAD runat="server" tag. Without the runat="server" it won't find the file. You would have to do something like "../scripts/validation.js"
As a test I would try to call your javascript function in the masterpage, so you can rule out a bad file reference.
I picked up this tip from ScottGu here.
Add this to you user control which enables Intellisense in user controls but always evaluates false:
<% if (false) { %>
<script src="/Scripts/validation.js" type="text/javascript"></script>
<% } %>
I am currently doing this in my site by going to the Source code on the master page and putting the following in the head and outside of the ContentPlaceHolder.
<head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script src="CP.js" type="text/javascript"></script>
</head>
The path you are assigning for your js file is probably not matching in all the pages.
script src="../JavaScript/Scriptaculous/scriptaculous.js"
It should have something like above this if you have separate folder for Scripts, MasterPages, Pages & Controls.