Update the ASP.NET MVC 2 Template for jQuery 1.4.2

Visual Studio 2010 ships with jQuery 1.4.1 out-of-the-box. This works great, fixes some issues and works fine with jQuery UI but it does not have all the performance improvements and tweaks of 1.4.2 including the delegates and support for hover() with live().

1.4.2 is nearly twice as fast as 1.4.1 on similar tasks.

“I Am Speed.”

You can take advantage of Visual Studio’s Export Template feature from the File menu to do update the template very quickly. The steps would be as follows:

1. Create a new project using the template that you want to update (like, ASP.NET MVC 2 Empty Web Application).
2. Make any changes that you like, including updating the jQuery references, or perhaps baking jQuery into a Site.Master file that you add.
3. Create an icon that you would like to use for your template (optional).
4. Grab a screen shot that represents your changes or maybe a picture of your mom or something that you can use to identify your project in Visual Studio (optional, especially the Mom pic).
5. Click File –> Export Template and fill in the name, description and optionally the graphic files that you wish to use.
6. Make sure the auto-import checkbox is ticked, then run the export.

The next time you create a new project your exported template will be in the list to choose.

Or, if you want Job Security…

If you want to learn more about what’s going on behind the scenes, why not try doing it manually? It takes a lot longer and you can mess it up, but it’s also good to learn what’s going on when you run through a wizard.

I don’t want to have you bork your templates, so let’s find and make a copy of the existing template used. Mine was located here:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplates\CSharp\Web\1033

…and was titled EmptyMvcWebApplicationProjectTemplatev2.0.cs.zip

Copy the template and paste it into:

My Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#

Unzip the package to a directory of the same name as the ZIP, then delete the ZIP file. I also renamed my extracted folder to EmptyMvcRefresh.

Make Some Changes

Next, go grab the latest version of jQuery. You can include any other custom scripts and frameworks that you want at this point. jQuery 1.4.2 is current at the time of this post, but there is no VSDOC for it yet.

Navigate into the scripts directory in the extracted files and paste in the updated jQuery source. I also grabbed the minified version (which I use in production) and deleted the 1.4.1 files.

Next, we need to hand-edit the project file. Open up EmptyMvcApplication.csproj and find the jQuery references and update them accordingly:

<Content Include="Scripts\jquery-1.4.2.js" />
<Content Include="Scripts\jquery-1.4.2.min.js" />

Do the same sort of thing in the EmptyMvcWebApplicationProjectTemplate.cs.vstemplate file, also in the root of the extracted directory:

<ProjectItem ReplaceParameters="true" TargetFileName="jquery-1.4.2.js">jquery-1.4.2.js</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="jquery-1.4.2.min.js">jquery-1.4.2.min.js</ProjectItem>

We also have a bit of housekeeping to do in the vstemplate file. Here is what my updated TemplateData section looks like:

<TemplateData>
<Name>Empty MVC 2 Refresh</Name>
<Description>Updated with the latest jQuery</Description>
<ProjectType>CSharp</ProjectType>
<ProjectSubType>Web</ProjectSubType>
<SortOrder>51</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<DefaultName>MvcApplication</DefaultName>
<ProvideDefaultName>true</ProvideDefaultName>
<LocationField>Enabled</LocationField>
<PromptForSaveOnCreation>true</PromptForSaveOnCreation>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<RequiredFrameworkVersion>3.5</RequiredFrameworkVersion>
</TemplateData>

What did we just do?

The vstemplate template is responsible for ensuring the correct files get copied into the new project when it is created. We update that file to get the correct scripts into the project. We also changed the title and description and removed the references to the MS-proper name and description so that our project would properly display.

The project file is what we see as an item in the solution that is created when we use our template to create a new MVC application. We need it to point to files that will properly exist for them to be available in the IDE.

Final Step: Compression

All that’s left to do is add all the files to a zip folder (right-click –> send to –> Compressed Folder). Make sure you compress the files and not the directory as the files need to be in the root of the compressed folder for Visual Studio to pick them up.

You can leave the uncompressed folder around to make changes more easily in the future (like, when the next version of jQuery is released).

Make sure you shut down any copies of Visual Studio 2010 and when you re-open them the updated template will be available for you to select:

And the updated scripts will be present in your project:

Though we don’t have an updated VSDOC file (yet) for 1.4.2 we can still use the 1.4.1 documentation file and have full IntelliSense support for everything other than delegates.

To be Quick, or Not to be Quick?

While the IDE provides a great mechanism for updating the template from right within the IDE, it is still possible to do the work by hand.

I just can’t think of why you’d want to…and to be honest I don’t know that I would…but…it was a good exercise in learning a little more about project templates and how they can be customized!