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?

Lee Bailey · Accepted Answer · 2013-09-02 10:17:37Z

9

+25

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"/>

edited Sep 2, 2013 at 10:17

answered Sep 1, 2013 at 11:30

Lee Bailey

3,6142 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Comfortably Numb Over a year ago

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 Over a year ago

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.

Comfortably Numb · Accepted Answer · 2013-09-02 17:06:49Z

8

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.

answered Sep 2, 2013 at 17:06

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

2 Comments

Nikhil G Over a year ago

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!

Comfortably Numb Over a year ago

@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.

Hazem Torab · Accepted Answer · 2013-09-01 10:48:23Z

1

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" />

answered Sep 1, 2013 at 10:48

Hazem Torab

3791 silver badge10 bronze badges

2 Comments

Comfortably Numb Over a year ago

As I mentioned in other answer 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). Can you elaborate more on Themes approach?

Hazem Torab Over a year ago

In the App_Themes folder you can add your own theme for the web application, this theme includes CSS files, once you added the theme to your page it will automatically adds all the CSS files in this folder to your page. and writes the <link> tag with the correct paths

Love Trivedi · Accepted Answer · 2013-08-30 04:51:27Z

-2

You should make bundle.config file and then you can use this in your code

answered Aug 30, 2013 at 4:51

Love Trivedi

4,0913 gold badges22 silver badges29 bronze badges

1 Comment

Comfortably Numb Over a year ago

Can u elaborate please?

Collectives™ on Stack Overflow

User Control with external CSS file

4 Answers 4

2 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related