Injecting CSS / Javascript on your page, revised

A long time ago, I had posted a method to include Javascript in your .ascx skin’s HEAD section. Things have evolved till then, DNN supports JQuery out of the box, and we need an easy way to inject scripts and css stylesheets in our page, taking care that core stylesheets and jquery are loaded BEFORE our scripts, so they can work correctly. This is especially important with JQuery plugins.

Latest DNN versions include two placeholder controls on the default.aspx page, with Ids CSS and SCRIPTS accordingly. These are the controls that can hold our scripts and stylesheets after all core stuff has been loaded, and we can have code inside our .ascx skins that uses these controls and injects stuff like jquery plugins or custom stylesheets inside our page’s HEAD section.

I’ve written some reusable code to do so, which, in this basic implementation, can be used to control what scripts and stylesheets are loaded per skin. Of course, you can customize it even more to control things even on a tab level.

The code has basically two functions, AddCSS and AddJS (what they do is obvious). You must override the Page_Init function and add your calls to the functions there.

Here’s the code. You can use it inline inside your .ascx page, preferrably right after your last @Register statement. 

<script runat="server">
    ''' <summary>
    ''' An enum which holds the various type of elements to be 
    ''' injected in the HEAD section of our page    
    ''' </summary>
    ''' <remarks></remarks>
    Private Enum htmlHeadElementType As Integer
        css = 1
        javascript = 2
    End Enum
    
    ''' <summary>
    ''' Add a CSS element to the HEAD section of our page
    ''' </summary>
    ''' <param name="csspath">The path to the CSS file</param>
    Private Sub AddCSS(ByVal csspath As String)
        AddHTMLHeadElement(csspath, htmlHeadElementType.css)
    End Sub
    
    ''' <summary>
    ''' Add a JavaScript element to the HEAD section of our page
    ''' </summary>
    ''' <param name="jsPath">The path to the js file</param>
    Private Sub AddJS(ByVal jsPath As String)
        AddHTMLHeadElement(jsPath, htmlHeadElementType.javascript)
    End Sub
    
    ''' <summary>
    ''' This is the actual function. 
    ''' It addds the element to the HEAD section of our page.    
    ''' </summary>
    ''' <param name="elementPath">The path to the file (css, js etc)</param>
    ''' <param name="elementType">a htmlHeadElementType corresponding 
    ''' to the type of the element
    ''' we are adding to the HEAD section.
    ''' </param>
    Private Sub AddHTMLHeadElement( _
          ByVal elementPath As String _
        , ByVal elementType As htmlHeadElementType)

        Dim containerControl As Control 
        
        Select Case elementType
        
            Case htmlHeadElementType.css 
                
                containerControl = Me.Page.FindControl("CSS")

            Case htmlHeadElementType.javascript 
        
                containerControl = Me.Page.FindControl("SCRIPTS")
                
        End Select
        
        If Not containerControl Is Nothing Then

            'Create our generic html control
            Dim oLink As HtmlGenericControl
            
            'Decide on what type of element to add
            Select Case elementType
                
                Case htmlHeadElementType.css
                    
                    oLink = New HtmlGenericControl("link")
                    oLink.Attributes("rel") = "stylesheet"
                    oLink.Attributes("type") = "text/css"
                    oLink.Attributes("href") = elementPath
                
                
                Case htmlHeadElementType.javascript
                    
                    oLink = New HtmlGenericControl("script")
                    oLink.Attributes("language") = "javascript"
                    oLink.Attributes("type") = "text/javascript"
                    oLink.Attributes("src") = elementPath
            
            End Select
            
            'Add a script reference to the head section 
            If Not oLink Is Nothing Then
                containerControl.Controls.Add(oLink)
            End If
            
        End If
        
    End Sub
 
    
    Private Sub Page_Init( _
        ByVal sender As System.Object _
        , ByVal e As System.EventArgs _
        ) Handles MyBase.Init

        'Add the various files to the HEAD section of our page.
        AddJS("/somepath/myscript.js")
        AddCSS("/somepath/mystylesheet.css") 
    End Sub

</script>

Read more...