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

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.