Home » ASP » ASP.MVC » How to load Javascript for the whole application except few folders or area?

How to load Javascript for the whole application except few folders or area?

When you want to load a specific resource like a Javascript file or a CSS file depending of a view, you can use a RenderSection.

On the other hand, if you always want to load this Javascript file (or CSS) but not in some folder, how can you do it? This can be resolved by using _ViewStart.cshtml file. Every folders can have a defined _ViewStart.cshtml which allow you to choose which Layout to use.

@{
    Layout = "~/Views/Shared/_MasterPage.cshtml";   
}

This is an example of a _ViewStart.cshtml page that define the Layout. If you are using Area within your application, you can have an Area which doesn’t use the same Layout. This can be defined by adding this file to the folder of your views and you change the Layout. It can be at the root of the Area’s view folder or directly into the folder of a specific view. Asp.Net MVC will execute ALL _ViewStart.cshtml from the root to the view. That mean that if you define something at the root, this will remain if not overwritten. It work’s fine with the Layout property which can be redefined in a folder which will override the default _ViewStart.cshtml value.

So, if you want to load a Javascript file for all view except one Area, you cannot do :

//_ViewStart.cshtml : At the root for every views
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    <script src="@Url.Content("~/Scripts/myFile.js")" type="text/javascript" > </script>
}
//_ViewStart.cshtml : Inside the View directory of the Area
@{
    Layout = "~/Views/Shared/_Layout.cshtml";    
}

This won’t work because the _ViewStart.cshtml will be executed first and add the script.

To solve this issue you can use TempData.

//_ViewStart.cshtml : At the root for every views
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewContext.TempData.Add("MyFileKey", @Url.Content("~/Scripts/MyFile.js"));
}
//_ViewStart.cshtml : Inside the View directory of the Area
@{
    Layout = "~/Views/Shared/_Layout.cshtml";   
	ViewContext.TempData.Remove("MyFileKey");
}

This require you to modify the Layout also :

<head>
...
    
	@if(ViewContext.TempData.ContainsKey("MyFileKey"))
	{
	  <script src="@ViewContext.TempData["MyFileKey"]" type="text/javascript" > </script>
	}
...
</head>

That’s it. You have now the Javascript file loaded for the whole application except those areas where it removes it from the TempData. Of course, a even better solution would be to use an object that can have multiple resources which are then handled in the Layout. The goal here is just to show you a way to handle Javascript and CSS file with the perspective of Area where this one remove additionnal resource.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon.

2 Responses so far.

  1. Good website says:

    This is a really good site article, im delighted I came across it. Ill be back down the track to check out other articles that

  2. […] In real life, I have used once the ViewStart with a TempData to set Javascript file name that needed to be loaded but not for 2 folders. In those ViewStart, the entry was removed. In the master page, the TempData was read and the Javascript loaded. You can get more information about this real life example here. […]

Leave a Reply

Your email address will not be published. Required fields are marked *