Relative paths in master pages
How to use relative paths in a master page?
One of the most frequently asked questions on the ASP.NET newsgroups is how to define relative paths in a master page?
You want to specify a link to your client javascript file or a Cascading stylesheet file or maybe have to specify a relative path for images in the master page?
So what is the problem ? Well if you specify a relative path in the master page it is in relation to the current page
so if you specify for e.g.:
<link href="../Styles/Main.css" rel="stylesheet" type="text/css" />
the web server will try to find the Styles folder one level up from the current page. So if you have structure as follows :
root
Styles
Modules
---SubModule1
---SubModule2
Using the relative file as above, will work for all the pages under "Modules" folder but will not work for pages under the "SubModule1" or "SubModule2" folders
Tilda (~) to the rescue
We can use tilda(~) which signifies the root folder as follows :
- First we need to specify the
<head> HTML tag as a server side control as follows:
<head runat="server">
-
Now we add the link for the stylesheet as follows in the Page_Init event of the master page :
protected void Page_Init(object sender, EventArgs e)
{
HtmlLink link = new HtmlLink();
//this will be from the root so we are good now.
link.Href = "~/Styles/Main.css";
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(link);
}
Images can be converted to server controls and the image url can be specified using ~ as well. Same goes for any javascript file that you want to reference.
Comments:
slareau @ 10/9/2007 2:58:06 PM
Keep the script tag out side of the head section
slareau @ 10/9/2007 2:57:43 PM
Keep the script tag out side of the head section
slareau @ 10/9/2007 2:57:32 PM
Keep the script tag out side of the head section
swanandmokashi @ 5/11/2007 10:02:46 AM
Suppose you have a javascript file at "Scripts/Common.js". You would like to write the following line, but it doesn't work because the src does not get rebased.
script language="javascript" src="../Scripts/Common.js" type="text/javascript"
Simply replace it with
script language="javascript" src='<%# ResolveClientUrl("~/Scripts/Common.js")' type="text/javascript"
Since ResolveClientUrl is a public method of any web control (page) and runs with respect to the location of the page (not the original master page), the link gets resolved as you would expect.
Sorry I had to do something similar in my current project and had not seen your comments till now.
brad @ 5/26/2006 4:47:53 AM
how do you do this with a script tag, i cant find a way to get it to work.
brad @ 5/26/2006 4:47:47 AM
how do you do this with a script tag, i cant find a way to get it to work.
Login to add your comments