User Control with external CSS file

Question

I have an ASCX user control in the root of my Web application. It references a stylesheet, something like

<link type="text/css" rel="stylesheet" href="MyStyle.css" />

The problem is if any ASPX pages located in application subfolders reference that user control - they don't see the stylesheet, because href path is relative and stylesheet remains in the app root.

Is there a way besides copying the CSS into all the subfolders to universally reference it from the root? I have no problem referencing external JavaScript, using ScriptManagerProxy I can specify path to external JS file via ASP.NET "~/" notation which gets resolved into real path from any location. Does something similar exist for CSS?

Solution 1

As I mentioned in my comments I didn't want to use <%= %> blocks. But I didn't want to assign URL of CSS file in code-behind either, so I found a compromise. I declare <link> tag with runat="server" attribute and ASP.NET - style href:

<link rel="stylesheet" type="text/css" runat="server" id="xlinkCSS" href="~/MyStyle.CSS" />

and then in code-behind simple resolve that link

xlinkCSS.Attributes("href") = ResolveUrl(xlinkCSS.Attributes("href"))

Using this approach ultimately I can create a function that accepts page as a parameter, loops thru all "link" tags, resolving their URLs.

Solution 2

ResolveUrl will convert application-relative urls for you. http://msdn.microsoft.com/en-us/library/system.web.ui.control.resolveurl.aspx

<link href="<%= ResolveUrl("~/MyStyle.css") %>" rel="stylesheet" />

EDIT: If you don't want to use inline code blocks

code-behind

protected void Page_Load(object sender, EventArgs e)
{
    litStyle.Text = string.Format("<link href=\"{0}\" rel=\"stylesheet\" />", ResolveUrl("~/MyStyle.css"))
}

markup

<asp:Literal ID="litStyle" runat="server"/>

Solution 3

Actually you have two options:

1- to include it in your themes folder, then the asp.net framework will automatically include it in all pages using this theme

2- to add a public variable in your CS code that includes the path, then to use it in your code, as the following code:

public string basepath = "http://" + Request.Url.Authority + Request.ApplicationPath;

then to use it in ASP code:

<link type="text/css" rel="stylesheet" href="<%=basepath %>MyStyle.css" />

Comments

[Yuriy Galanter]

I prefer not to use <%= %> (which is equivalent of Response.Write) since it can misbehave in many cases (e.g. when user control is inside UpdatePanel)

[Lee Bailey]

If you don't want to use <%= %>, then you could use ResolveUrl in the code-behind of your ASCX control and use a literal control to output it to the page.

[Nikhil G]

sir, thank you so much for sharing the solution to this problem. However I have got one confusion here, that, I have understood we are going to resolve the path of css stored in the sub-folder of our project. Though, how uc1.ascs.cs is going to make make use of this xlinkCSS.Attri... line of code - in short css classes. Hope you have understood my confusion. Thank you!

[Yuriy Galanter]

@NikhilG not sure what you mean, but CSS can be anywhere in your application, so can the ASCX. As long as you use approach above to indicate relative path to the CSS - backend code can resolve it to the real path.