We help IT Professionals succeed at work.

Dynamically loading a css file with Stylesheet.aspx

Medium Priority
1,614 Views
Last Modified: 2013-11-19
I have a client who needs to load dynamic stylesheets per each of their client's personal settings.  I have seen the following used...

<LINK REL="STYLESHEET" TYPE="text/css" HREF="Stylesheet.aspx>

My question is how do I build my Stylesheet.aspx page to become a style used by a calling page?  Her eis what I have that doesn't seem to work yet:

Test.aspx (Html view)
      <HEAD>
            <title id="MetaTitle">Dynamic Title</title>
            <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="C#" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <meta name="Keywords" runat="server" content="" id="MetaKeywords">
            <link rel="stylesheet" type="text/css" href="Stylesheet.aspx" />
      </HEAD>
...

<TABLE id="Table5" cellSpacing="0" cellPadding="0" width="760" border="0">
      <TR>
            <TD>
                  <P>footer</P>
                  <P>
                        <cc1:Label id="lblTestCss" runat="server" CssClass="test">Test CSS</cc1:Label></P>
            </TD>
      </TR>
</TABLE>

Stylesheet.aspx (Html view)
<%@ Page language="c#" Codebehind="Stylesheet.aspx.cs" AutoEventWireup="false" Inherits="Foo.Web.StyleSheet" %>

.test{
    font-size: <%= fontSize %>;
}


Stylesheet.aspx (Code-behind view)

protected string fontSize;

private void Page_Load(object sender, System.EventArgs e)
{
      this.fontSize = "20";
}

Am I missing something key here?

Thx!

Comment
Watch Question

Ramesh SrinivasTechnical Consultant
CERTIFIED EXPERT

Commented:
Hi,

Not sure about that method but, you could probably initially save the client's settings.

In your page which requires the styles, place a literal control in your <head> tag.

Then in codebehind, ( maybe in page_load or pre-render event), build  a string which will represent all the style attributes and then set the text property of the literal control to this string.

hope that helps,

regards,

KS

Commented:
I wonder if the css link you have seen refers to an HttpHandler, not an actual aspx page. Your aspx page will probably be returning the wrong headers, and won't be interpreted as a css page.

If you replace your style with something like
.body {
      background-color:#ff0000;
}
do you get a red background? If you open Stylesheet.aspx you will see the text you've printed.

Commented:
Sorry, managed to submit before I'd finished. Have a play with Fiddler (available on the web) to check the headers that are coming back from your page and css files. Css files should return Content-type=text/css. I'll bet your page is returning something like Content-Type: text/html; charset=utf-8. You can change this in your Page_Load with the Response.ContentType property.

Andy
Commented:
Dave,

It looks like it is the headers. Note that the style I posted above should have been
body {
     background-color:#ff0000;
}

and not

.body {
     background-color:#ff0000;
}

If you add the lines
            private void Page_Load(object sender, System.EventArgs e)
            {
                  Response.ContentType = "text/css";
                  Response.ContentEncoding = System.Text.Encoding.UTF8;
            }
into your code-behind, it should work.

Andy

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Response.ContentType = "text/css";
Response.ContentEncoding = System.Text.Encoding.UTF8;

Excellent... the above settings were what I was missing.  After testing the ouput of Stylesheet.aspx I was able to hewn in on the correct syntax... now I can have all my styles in one sheet, set the dynamic ones via the page variables based on a clientId I pass in the <link rel="stylesheet" type="text/css" href="Stylesheet.aspx" id="link" runat="server" />, which with a HttpGenericControl I can set it to end up like <link rel="stylesheet" type="text/css" href="Stylesheet.aspx?clientId=foo"/>.

Much thanks!

Commented:
Nice, glad it work.

You could also maybe not pass the clientId in the query string, as the cookie sent with the request should just let you get the clientId from the session, that way you don't have to put your database ids out in the html.

Andy
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.