ASP.NET MVC relative paths without breaking JavaScript IntelliSense?

Question

Adding a script to a view generally involves something like this:

<script src="../../Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>

Unfortunately, this doesn't work if the app is deployed in a virtual directory under IIS 6. The alternatives discussed here involve using Url.Content with "~" to resolve the path dynamically, but this completely breaks JS IntelliSense.

Is there a way to get around this and make IntelliSense work without losing the ability to deploy the app in a virtual directory?

Answer 1

Check out the JScript IntelliSense FAQ on the Visual Web Developer Team Blog. The comments also reference Srully's if(false) trick.

Answer 2

For deployment code you can use the google ajax apis to load JQuery. It is recommended because it help the page load time due to the use of the google CDN.

to get intellisense add this to your page

<% if(false){ %>
    <script src="../../Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>
<%}%>

this will not be emitted because it is within an if(false) but intellisense will recognize it

Answer 3

I use something like this:

   <script src="<%= ResolveUrl("~/Content/jquery-1.2.6.js") %>" type="text/javascript"></script>   

   <%--<script src="../../Content/jquery-1.2.6.js" type="text/javascript"></script>--%> 

You then have to uncomment the second reference when you want to use intellisense. It's annoying, but the only workaround I've encountered.

Answer 4

In VS2010, one way to reference the "*vsdoc.js file in a virtual folder/directory and get Intellisense to work properly in a view without using a CDN is to simply use localhost in the address. A virtual directory is essential when centralizing script and content files for multiple web applications. In the example below, I created the "Shared" virtual directory in IIS 7.5. Hope this helps someone.

@if (false)
{
   <script src="http://localhost/Shared/jQuery/js/jquery-1.7.2-vsdoc.js" type="text/javascript"></script>
}

Answer 5

I have created a HtmlHelper extension (PathReference is a JetBrains.Annotations attribute for ReSharper and can be omitted):

public static class HtmlHelperExtensions
{
    public static MvcHtmlString Script(this HtmlHelper html, [PathReference]string scriptFile)
    {
        var filePath = VirtualPathUtility.ToAbsolute(scriptFile);
        return new MvcHtmlString("<script type=\"text/javascript\" src=\"" + filePath + "\"></script>");
    }
}

I then do like this in my master page

<%
    if (false)
    {
%>
    <script src="../../Scripts/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script&gt;
<%
    }
%>
<%:Html.Script("~/Scripts/jquery-ui-1.8.9.custom.min.js")%>

I now have both intellisense and correct runtime references.

(Thanks to Sruly for the if(false) trick)