Adding styles and scripts to ASP.NET web controls (ascx) without repeating inclusion directives

Question

Consider to develop a web control (ASP.NET). What you would really like to do is styling and developing this control in a very good way, here's a very good way to do this (this is how I would like to do, further in this question I will explain why I cannot do this).

A programmatic approach

1) I create my control in a separate folder called WebControls and I name it (for example) MyWebControl. I will have these files: MyWebControl.ascx and MyWebControl.ascx.cs.

2) Given that my control is a complex control I associate a style and a dynamic client behavior referencing, in the control html, a css stylesheet called MyWebControl.ascx.css and a javascript file called MyWebControl.ascx.js.

3) In my control I do the following:

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeFile="MyWebControl.ascx.cs" 
            Inherits="MyApp.WebControls.MyWebControl" %>

<link href="MyWebControl.ascx.css" rel="stylesheet" type="text/css" />
<script src="MyWebControl.ascx.js" type="text/javascript"></script>

<div>
...
</div>

This is it!

The problem

Well there is a problem in this thing: when my control is rendered, and in a page there is more than one of this control of mine, I get the links to the css and js file duplicated or even repeated more than once.

How to link an external stylesheet/javascript file in my control without occurring in this bad stuff?

EDIT

OK, after looking a bit, with the help of others here in the community, I could understand that Page.ClientScript is what comes to the rescue.

However, there are a lot of functionality for a script to be registered... can you tell the difference among these?

1) Page.ClientScript.IsClientScriptBlockRegistered

2) Page.ClientScript.IsClientScriptIncludeRegistered

3) Page.ClientScript.IsOnSubmitStatementRegistered

4) Page.ClientScript.IsStartupScriptRegistered

And the corresponding set methods?

1) Page.ClientScript.RegisterClientScriptBlock

2) Page.ClientScript.RegisterClientScriptInclude

3) Page.ClientScript.RegisterOnSubmitStatement

4) Page.ClientScript.RegisterStartupScript

Furthermore: can this be applied to javascript and css too?

Thankyou

Adelbert

Answer 1

One thought: wouldn't it be possible to use ClientScriptManager.RegisterClientScriptBlock to inject the css-file import?

Something like(not tested):

if(! Page.ClientScript.IsClientScriptBlockRegistered("MyWebControl.ascx.css"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.getType(),"MyWebControl.ascx.css",@"<style type=""text/css"" src=""MyWebControl.ascx.css""></style>");
}

Edited to change RegisterStartupScript to RegisterClientScriptBlock

According to your edits:

• RegisterStartupScript(type, key, script)
• RegisterClientScriptBlock(type, key, script)

The difference between these two methods is where each one emits the script block. RegisterClientScriptBlock() emits the script block at the beginning of the Web Form (right after the tag), while RegisterStartupScript() emits the script block at the end of the Web Form (right before the tag).

To better understand why there are two different methods for emitting client-side script, realize that client-side script can be partitioned into two classes: code that is designed to run immediately when the page is loaded, and code that is designed to run when some client-side event occurs. A common example of code that is designed to run when the page is loaded is client-side code designed to set the focus to a textbox. For example, when you visit Google, a small bit of client-side code is executed when the page is loaded to automatically set the focus to the search textbox.

http://msdn.microsoft.com/en-us/library/aa478975.aspx#aspnet-injectclientsidesc_topic2

Edit: from your comments i'm assuming that it unfortuately does not work this way. Have a look at following links:

• http://forums.asp.net/t/557140.aspx/1?CSS+stylesheet+in+ascx+file/?post=2692177
• http://nathanaeljones.com/146/referencing-stylesheets-scripts-from-content-pages/

There might be some working approaches

As a hint, you could create the HtmlLink programmatically in Page_Init-Handler of your UserControl:

Dim objLink As New HtmlLink();
objLink.ID = "MyWebControlascxcss";
objLink.Attributes("rel") = "stylesheet";
objLink.Attributes("type") = "text/css";
objLink.Href ="~/filname.css";
Page.Header.Controls.Add(objLink);

You should remember to check first with a recursive function if the link was already added to Page.Header.Controls-Collection.

Accad

OK Tim, IT is obsolete, it is necessary to use the Page.ClientScript, see my edits because my question now turns into this one... – Adelbert

@Tim: Well I didn't try it... Visual Studio gave me such a bad notification for obsolete element usage ahahah :) however I think that the right way is using the ClientScript which handles specificcaly these issues. However thankyou, without you I could haven't find the elements now shown in the edit section of my question. – Adelbert

@Tim: Does it work with css and javascript???? By msdn, I found it but your description is a lot better, it seems that only javascript is supported. – Adelbert

@As i've mentioned before, it was only an idea. Have you tried but it does not work? – Accad

@Tim: with javascript works, but it is not good for CSS... Well, it seems that there is not a functionality to apple a stylesheet and include it in the page..... – Adelbert

@Andry: have a look at my posted links, there might be some working approaches, posted also an example. – Accad

@Tim Yes, in the end it is not possible... gotta manually insert the style... however I think this is not a good thing... Microsoft sgould work a bit on this :). Tim you were really helpful thankyou for your time and patience :) – Adelbert