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.

Symbians Phones commented on 2/5/2015 8:14:31 AM

Considering the web organizing situation now relevant, it is easy to state which frequently, totally free web host is among the most majority with difficult features over the internet relating so that you can today. Massive name with regards to totally free web host ideas might be the result of win with regards to brand-new website on the concept without the need of sincerely calibrating the forthcoming gains.


Communication Software commented on 2/5/2015 8:16:01 AM

Want to find out how you may enhance publicity for your personal web website, within an attractive in combination with steady usually means? You won't understand this yet many webpage workers utilize the identical key to produce visitors to get essentially nothing at all.


Stand Alone GPS commented on 2/5/2015 8:17:23 AM

Around 1-tuch, we have learned to make your web blog stand out of the competition. We offer a number of comprehensive WEBSITE POSITIONING and search engine optimization services that provide you with incredible success. From WEBSITE POSITIONING consulting plus paid investigation management so that you can copyrighting plus web progression, our company of industry experts will be sure.

Your Comment:






Blog Home RSS Feed
SBP Home Contact

Recent blog entries



Archives

All tags