Use of _references.js file in ASP.NET MVC Project

When you create a new ASP.NET MVC template project, you will find the _references.js file under the ~/Script folder.

This _references.js JavaScript file provides IntelliSense supports based on script references available in a file.

This intellisence support makes easier to write code without any errors by giving the information (i.e objects, functions, properties, and parameters) based on script context while writing JavaScript code.

When you open _references.js file, you will find the following code.

/// <autosync enabled="true" />
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="jquery-1.10.2.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="bootstrap.js" />
/// <reference path="respond.js" />

_references.js file contains list of all JavaScript files references that are available in your project. Based on these references, visual studio wills determines which files to include provide intelliSence support.

Now look at the first statement beginning of _references.js file.

/// <autosync enabled="true" />

These statements specify that if you add any JavaScript file in your project, it will automatically add the script reference in _references.js file.

For example,

Add new JavaScript file (i.e. mycustomjs.js) in a ~/Script folder. And place the following code in that newly created file.

function CalculateSum(number1, number2)
{
   return Number(number1) + Number(number2)
}

Visual studio will automatically add the script reference in _refrence.js file as soon as new JavaScript files are created.

/// <autosync enabled="true" />
/// <reference path="bootstrap.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="jquery-1.10.2.js" />
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="mycustomjs.js" />
/// <reference path="respond.js" />

Now you will get JavaScript IntelliSense support throughout your project.

i.e.

 
Here “reference” directive is responsible for IntelliSense support. This directive enables the Visual Studio to make a link between the script that you are currently editing and script reference that are available in _references.js.

The following example shows how to reference JavaScript files that is not under the ~/Script folder.

/// <reference path="example.js" />
/// <reference path="/Content/js/example .js" />
/// <reference path="../example .js" />
/// <reference path="~/Area/Admin/Content/js/example.js" />

You can also enable or disable this default auto sync behavior by clicking on “Auto-sync JavaScript References” menu button under the editor context menu in the _references.js file.

This JavaScript intelliSense supports are created based on method names available in all script block in your project, inline methods that are available in .html, .htm, .aspx, .ascx, .cshtml, .vbhtml file and JavaScript files that contain another JavaScript file reference.

For more information on JavaScript IntelliSense. click here

I hope you have enjoyed this article. If you have any questions or feedback, then please mention it in the comments section, that will help me to improve my knowledge.