Introduction

A nice feature of Asp.Net MVC is how Controllers and Views become automatically related through method names, file names and directory structure. 

Some Views can have some related javascript code that could be separated in files(js) and I was wondering if there were some pattern to organize these javascripts and make them automatically included to each correspondent View.

After some research I've found this article by Shayne P Boyer but my project is using Asp.Net MVC 3 with Razor View Engine. 

Besides, I was concerned about Partial Views that could have their own related javascript file and thinking in a way to make these scripts included once on the page even if the same Partial View is used multiple times on the same Page.

Here I show a ViewPageBase that automatically reference javascript files for the current View and for the inner Partial Views (using the structure sugested by Shayne and avoiding that the same file is registered more than once).

ViewPageBase 

The ViewPageBase inherits System.Web.Mvc.WebViewPage<TModel> and overrides InitializePage method that will search for the related javascript file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.WebPages;
using System.Text;
using System.IO;

namespace JSOrganization
{
    public abstract class ViewPageBase<T> : WebViewPage<T>
    {
          protected override void InitializePage()
        {
            base.InitializePage();
           
            AddScriptForView(this.VirtualPath);
        }
		 

AddScriptForView method will check if the javascript file exists for the View and, if so, will keep the reference. 

        void AddScriptForView(string path)
        {
            if (string.IsNullOrEmpty(path)) { return; }

            var dctScripts = GetScriptsDictionary();
            if (!dctScripts.ContainsKey(path))
            {
                //Change path to the javascripts folder
                path = path.Replace("~/Views/", "~/ViewScripts/");
                //Change the extension to .js
                path = Path.ChangeExtension(path, "js");

                //Check if the file exists
                if (File.Exists(Server.MapPath(path)))
                {
                    //Build the javascript reference and keep it in the dictionary
                    var tagBuilder = new TagBuilder("script");
                    tagBuilder.Attributes.Add("type", "text/javascript");
                    tagBuilder.Attributes.Add("src", Url.Content(path));
                    dctScripts[path] = string.Format("{0}{1}", tagBuilder.ToString(TagRenderMode.Normal), System.Environment.NewLine);
                }
            }
        } 

GetScriptsDictionary will search, in the current HttpContext, the dictionary that keeps the javascript file references. At this point the program identifies the first View processed, wich is usually the View returned by the current Action and will include later all the script references in the final Html.  

        bool isPrincipalView = false;
        const string _viewScriptsKey = "__ViewScripts";
        private Dictionary<string, string> GetScriptsDictionary()
        {
            var ctx = Context;
            var dctScripts = default(Dictionary<string, string>);
            if (!ctx.Items.Contains(_viewScriptsKey))
            {
                //If the dictionary is not created yet, then this view is the principal
                isPrincipalView = true;
                dctScripts = new Dictionary<string, string>();
                ctx.Items[_viewScriptsKey] = dctScripts;

            }
            else
            {
                dctScripts = ctx.Items[_viewScriptsKey] as Dictionary<string, string>;
            }
            return dctScripts;
        } 

Then, ExecutePageHierarchy is overriden. It's where the "Principal View" inserts all the javascript references at the top of the html.  

        public override void ExecutePageHierarchy()
        {
            
            base.ExecutePageHierarchy();

            //This code will execute only for the principal view, not for the layout view, start view, or partial views.
            if (isPrincipalView)
            {
                var dctScripts = GetScriptsDictionary();
                var sw = this.Output as StringWriter;
                var sb = sw.GetStringBuilder();

                //add here the javascript files for layout and viewstart
                AddScriptForView(this.Layout);
                AddScriptForView("~/Views/_ViewStart.cshtml");

                //Insert the scripts
                foreach (var pair in dctScripts)
                {
                    sb.Insert(0, pair.Value);
                }             
            }
        }
     }

    public abstract class ViewPageBase : ViewPageBase<dynamic> { }
} 

Using the base view class  

To make it work it's necessary that all the Views inherits from ViewPageBase. There are two ways to acomplish this.  

One way is inheriting per-View, inserting the following clause at the top of each View:  

@inherits JSOrganization.ViewPageBase  

Another way is to specify in Views/Web.config the base class for all the Views:

 <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="JSOrganization.ViewPageBase"> 

Project organization 

 The project structure must be like the following example: 

In the example above each View has your associated javascript file in ViewScripts folder. Remember that even a partial View can have its own javascript that will be referenced just once, even if the View is rendered multiple times in a parent View.