ASP.NET - Including CSS and JS file references

Jul 21, 2009 by Constantin


If you're wondering what is the best way to include CSS and JS file references in ASP.NET pages, here is a quick guide that outlines the available options and shows which approach suits each situation.

First, the most basic approach, can be done from within the head tag, as in the example below:

<head id="Head1" runat="server">
   <title>Title of Page</title>
   <link href="../styles/MyStyles.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="~/scripts/MyJScript.js">
   </script>
</head> 

This approach works well for stylesheets &  scripts that are included only in one page, so that you don't unnecessarily load them in other pages. 

It is recommended to use the ResolveUrl function (ex. < %= ResolveUrl("~/scripts/MyJScript.js") % >), because the path to these files depends on the path of the page which references them, and using relative paths would be risky.

But if the references are needed in most of the pages, you should place then in the master page. In this case, you will have two options – one similar to the default usage:

<head id="Head1" runat="server">
   <title>Title of Page</title>
   <link href='<%= ResolveUrl(~/styles/MyStyles.css") %>' rel="stylesheet" type="text/css" />
   <script type="text/javascript" src='<%= ResolveUrl("~/scripts/MyJScript.js")' %>">
   </script>
</head>

and the other option, from code behind, in the Page_Init event handler:

Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
   If Not Page.IsPostBack Then
      ' Add JS reference
      Dim myJs As New HtmlGenericControl()
      myJs.TagName = "script"
      myJs.Attributes.Add("type", "text/javascript")
      myJs.Attributes.Add("language", "javascript")
      myJs.Attributes.Add("src", ResolveUrl("~/jscripts/MyJScript.js"))
      Page.Header.Controls.Add(myJs)

      ' Add CSS reference
      Dim myCss As New HtmlGenericControl()
      myCss.TagName = "link"
      myCss.Attributes.Add("type", "text/css")
      myCss.Attributes.Add("rel", "stylesheet")
      myCss.Attributes.Add("href", ResolveUrl("~/styles/MyStyles.css"))
      Page.Header.Controls.Add(myCss)

      linkHome.NavigateUrl = Page.ResolveUrl(PagePaths.Toc)
   End If
End Sub 

Placing the CSS / JavaScript references in the markup is suitable for most of the cases so this should be the default approach.

Including them from code behind is better only in dynamic scenarios - such as when most of the pages use a specific script, but a few pages use a different one. In this case, working from the code-behind makes conditional references easier to implement.


Tags: ASP.NET  Programming 


Comments


Rosetta Stone Chinese commented on 11/13/2010 1:13:32 AM

Absolutely brilliant post guys, been following your blog for 3 days now and i should say i am starting to like your post. and now how do i subscribe to your blog?

Pandora commented on 5/3/2011 3:34:11 AM

This is a really good read for me, Must admit that you are one of the best bloggers I have read. Thanks for posting this informative article.

ASP.NET Developer India commented on 10/20/2011 12:02:08 PM

Hello,

Many thanks for sharing your knowledge and given such nice explanations.Thanks for your efforts. Waiting for your next post.

erre commented on 5/9/2013 10:38:16 AM

rererererererererereret

.NET Development commented on 5/29/2013 8:37:19 AM

Guys, Your information about CSS and JS file references in ASP.NET pages are awesome and helpful me a lot and may be helpful to others.

HiramMcintosh commented on 5/30/2013 10:29:56 AM

It is recommended to use the Resolve Url function because the path to these files depends on the path of the page which references them, and using relative paths would be risky.

Your Comment:






Blog Home RSS Feed
SBP Home Contact

Recent blog entries



Archives

All tags