Question

We primarily use an ASP.NET environment at work. Right now I’m building an application which uses ‘Modules’, which is just a UserControl, with its’ Javascript right in the control, and a link element to the stylesheet for that control. I want to keep it modular, and would like the style of this control to be independent from the markup/javascript.

So I’m wondering what the preferred method of doing this is? Obviously if I didn’t want the ‘theme’ functionality I’m after, I could just use style tags at the top of the control. Right now I have a link element, as I said, and this isn’t proper I don’t think.

Does anyone have any preferred methods, and if so, what and why?

---

I considered ASP.NET themes briefly, but the idea of these controls are a little different, I think.

It’s basically a shopping cart system. I don’t want to get into it all, but we are using a really neat security system, and we don’t want to use a premade shopping cart. I’m developing a set of controls that can be dropped on a page, for instance in SiteFinity (which is the CMS system we use) or for any other project we might have. Normally I would compile these into a DLL so we get ACTUAL controls we can drag & drop from the toolbox, then I could use internal ‘generic’ styling and allow for any additive styling someone might want, as well as supplying a few fancier styles as well.

This is the first time I’ve ever done this, or really the first time anyone in our shop has done this either so I’m kind of figuring it out as I go. I might be pretty far off-base, but hopefully I’m not.

---

Right, the idea for this is to have a ‘theme’, which is really just a CSS file and a jQuery template. I have them named the same, and have a Theme property on the usercontrol to set it.

When these controls are finalized, I might refactor the javascript to a RegisterScriptBlock on the code-behind, but for now they just in script tags on the control itself.

What prompted this question was DebugBar for IE, giving me warnings that link elements are not allowed inside a div. I don’t much care, but after thinking about it, I had no idea how to link to the css file without doing that. I considered very briefly having an ’empty’ link tag on the master and then setting THAT in the code behind on Page_Load of the UserControl, but that just seems like ass.

I could use @import I guess but I think link tags are preferred, correct?

Answer 1

It sounds like you’re rolling your own theme engine… why not use ASP.NET Themes?

If you’re determined to do it yourself, here’s some code from the CssFriendly project that may be of interest to you. (I think it should be ok to post the code as long as I cite where it’s from.) The .css files are flagged as Embedded Resource and the code below is used to include them as needed.

string filePath = page.ClientScript.GetWebResourceUrl(type, css);  // if filePath is not empty, embedded CSS exists -- register it if (!String.IsNullOrEmpty(filePath)) {     if (!Helpers.HeadContainsLinkHref(page, filePath))     {         HtmlLink link = new HtmlLink();         link.Href = page.ResolveUrl(filePath);         link.Attributes['type'] = 'text/css';         link.Attributes['rel'] = 'stylesheet';         page.Header.Controls.Add(link);     } }