asked on

Dynamically loading a css file with Stylesheet.aspx

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!

Ramesh Srinivas

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

AGBrown

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.

AGBrown

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

ASKER CERTIFIED SOLUTION

AGBrown

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

daveokst

ASKER

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!

AGBrown

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