?
Solved

Dynamically loading a css file with Stylesheet.aspx

Posted on 2006-03-20
6
Medium Priority
?
1,586 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!

0
Comment
Question by:daveokst
  • 4
6 Comments
 
LVL 11

Expert Comment

by:Ramesh Srinivas
ID: 16236658
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
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16236924
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.
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16236964
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Accepted Solution

by:
AGBrown earned 2000 total points
ID: 16237122
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
0
 

Author Comment

by:daveokst
ID: 16237421
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!
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16237474
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
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question