Initial Files Created in the MVC3 Website Script Folder

When creating a new MVC project, a dozen or so JavaScript files are included by default in the Scripts folder. I haven’t been able to find any documentation on which ones should be included in a page in what situations, so I’ve put together the information in this article.

As a precursor to describing the use of individual JavaScript files, it first helps to first understand that MVC3 introduces an alternative approach to working with JavaScript for the two areas of functionality that bridge server-side code with the client-side code, namely AJAX and validation. MVC3 adds support for unobtrusive AJAX and client-side validation, implying appropriately enough that the previous approach was “intrusive”. Unobtrusive JavaScript takes advantage of HTML5 standards (although it works fine in browsers not supporting HTML5) to use element attributes for defining the configuration data used to integrate JavaScript AJAX and client-side validation functionality. This cleans up the emitted markup considerably because it eliminates the need to attach events handlers inline to elements and emit custom script to support the integration. Brad Wilson, who works on the ASP.NET team at Microsoft has two articles explaining this new feature:

Ok, so let’s examine the files contained in the Scripts folder…

The “Microsoft” Javascript Files

If you are using MVC3 and have the unobtrusive features enabled (see Brad’s articles for how), then you do not need any of the scripts that start with the word “Microsoft”. Otherwise, you need MicrosoftMvcAjax.js if you’re using the AjaxForm.BeginForm or the Ajax.ActionLink helpers, and you’ll use MicrosoftMvcValidation.js to activate automatic client-side validation. You need to include MicrosoftAjax.js and jquery-1.x.x.js as well if you’re including either of the other two. These files are all minified. Also included are “.debug.js” versions of these files, which are not minified (i.e. human-readable).

Files Reference

There are multiple versions of most of the files with different suffixes. The minified (“.min”) version if the one you should load into the page. The non-minified version is useful for viewing the code in a human readable form and if you need to debug these libraries. You don’t ever need to include the “-vsdoc.js” versions — they are recognized automatically by Visual Studio to provide intellisense within the editor.

Excluding the Microsoft files, minified and vsdoc files, the following table describes everything you’ll find in the Scripts folder of a new MVC3 project.

Filename When To Include
jquery-1.x.x.js jQuery is the core library that the others depend on, and it the library you will most likely use the most when writing custom JavaScript code. Details at jquery.com.
jquery-ui-1.x.x.js jQuery UI is a standalone add-on that provides a set of themable widgets and advance UI interactions. Many sites don’t need it, some use other widget libraries such as ExtJS and KendoUI. It’s a pretty large file, so only include it if you’re using it. Details at jqueryui.com.
jquery.unobtrusive-ajax.js This is a proprietary file from Microsoft that replaces MicrosoftAjax and MicrosoftMvcAjax to provide an unobtrusive AJAX implemententation. Include it if you intend to use the AjaxForm.BeginForm or the Ajax.ActionLink helpers.
jquery.validate.js This is a popular non-Microsoft jQuery plug-in to provide support for client side validation. Include it if you will be doing using the plug-in directly, or if you want client-side support for the MVC3 validation functionality.
jquery.validate.unobtrusive.js This is a proprietary file form Microsoft that builds the scaffolding to connect MVC3 client validation functionality with the jquery.validate.js plugin.
modernizr-x.x.js Modernizr is a handy script that dynamically adds classes to the <html> element of the page to identify what CSS3 and HTML5 features are supported by the browser. This simplifies writing CSS that styles one way when the feature is supported and a different way when it is not. Modernizr is good to have in your toolkit of files, so read the documentation at modernizer.com to see if it has something you want to leverage. It also includes the HTML5 Shim that makes older browsers recognize new HTML5 elements, which is useful in most circumstances, but consider creating a custom build from their website to create a smaller file with just the features you need.

 

Stay Up-to-Date with NuGet

jQuery, jQuery UI, jQuery Validation, jQuery Visual Studio 2010 Intellisense, and Modernizr are all currently available as NuGet packages. Learn about and install NuGet from here if you don’t have it. NuGet makes it easy to update your external libraries. The first thing I would do on a new project is install all these NuGet packages, remove the older files versions added by default to the new project, and script src references on those that have the version number included in the file name.

Leave a Reply

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