JavaScript IntelliSense in Razor Views

There’s an issue with getting JavaScript IntelliSense to display in a Razor view of an ASP.NET MVC project.

 

Turns out that despite having the JavaScript file corrected referenced within your _Layout.cshtml (or some other “global” location) like so:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
    @RenderSection("HeadContent", required: true)
</head>

 

The Visual Studio IDE won’t recognise or parse the:

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>

line when you’re working inside other views within your project.

 

There’s a hacky workaround for this, though.  You have to reference the JavaScript file from within the view that you’re currently working in.  Although this seems counter-intuitive, and you certainly don’t want a doubly-referenced script as part of your actual solution code, you can place this “dummy” reference in a conditional block of code that will never be reached when your solution is running:

@* Stupid hack to get jQuery intellisense to work in the VS2010 IDE! *@
@if (false)
{
   <script src="../../Scripts/jquery-1.6.2-vsdoc.js" type="text/javascript"></script>
}

The if (false) conditional ensures that, when this code is running, the script reference will never be output to the page as the conditional will never evaluate to false (it’ll always evaluate to true).  Despite this, when you’re working in the Visual Studio IDE, the script reference will be parsed and the relevant JavaScript file included (in this case a vsdoc.js file containing the IntelliSense information for jQuery 1.6.2).  This is because the IDE doesn’t care that this script reference code is effectively unreachable, and will happily parse the entire code block anyway!

Intellisense, Web Extensions & Razor Views in ASP.NET MVC 3

TearOutHair

Well, what a fun hour or two I’ve had today tearing out my hair trying to get a DLL of ASP.NET MVC 3 web extensions referenced in the project, with Razor view Intellisense working in a global manner.

 

The Web Extensions in question are the rather superb Telerik Extensions for ASP.NET MVC.

 

Basically, the process consists of:

 

1. Copying the compiled Telerik.Web.Mvc.dll to your projects local bin folder (along with some other script and content files).

 

2. Referencing the Telerik.Web.Mvc.dll component within your project references.

 

3. Adding the relevant namespace to the web.config configuration file.

 

4. Using your newly added extension!

 

Well, except it’s never quite that easy is it?  First mistake I made was to add the following section of web.config configuration settings:

 

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc,
              Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="Telerik.Web.Mvc.UI"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>

 

to the wrong web.config file!  Yes, this stuff above has to go in the web.config file that sits inside your “Views” folder.  Put this stuff in the main web.config that sits in your “root” folder and it won’t work.

 

So, having fixed that little problem, I proceeded to the joys of trying to actually use the HTML extension.

 

image

 

Hey, what’s with the red squiggle, Visual Studio?

 

I’ve added the DLL to the bin folder, referenced said DLL in my project references, and even ensured I’ve added the namespace directive in the correct section of my correct web.config file.  So, why the errror?

 

Well, it turns out the magic to getting this to work, after you’ve added the web.config bits and referenced the DLL is two-fold:

 

1) Build your project.

 

This is required to ensure that Visual Studio is now “aware” of your newly added references, and can rebuild it own internal cache of namespaces, types and methods that will eventually be populated within the Intellisense picker.

 

 

2) Make sure you close the View’s code window in the IDE, then re-open it.


This step is the one that got me.  I hadn’t done this, and nowhere (except after a long hand slog of trawling through Google search results) does it mentions that this is needed.  Well, seems it’s a…err.  ahem, feature, of Visual Studio that is required in order to get otherwise working Intellisense to actually work in the currently open file that you’re editing.

 

That’s it!  That was the problem.  I’d had the view’s code window open all the time within the Visual Studio IDE.  It wasn’t necessarily always the code window with the focus, but it was there within my list of windows tabs.  Closing and re-opening the code window caused the Intellisense to be re-initialised, and all was well.

 

My hair was saved!