Visual Studio 2012 crashes when opening an ASP.NET MVC project with a cshtml open

vscrash A rather long title for this post, but that’s exactly what happened: when I opened an ASP.NET MVC 4 project with a cshtml view open, Visual Studio would crash with the error messages seen on the right. This would only occur if the first project I opened had a cshtml file open. When I opened another (type of) project first and then opened a project with a cshtml file open, the problem did not occur. Debugging Visual Studio with a new instance of Visual Studio (Inception anyone?) made things a bit clearer. (Part of) the exception information:

Source
WebEssentials2012

Message
Could not load type ‘Microsoft.Less.Core.LessMixinDeclaration’ from assembly ‘Microsoft.VisualStudio.Web.Extensions, Version=11.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’.

After searching around a bit, I found this blog post by Mads Kristensen: Web Tools 2012.2 and Web Essentials. This post talks about Web Tools 2012.2 and Web Essentials 2.5, and how an error can occur if you install Web Tools 2012.2 and don’t upgrade to Web Essentials 2.5. However, I do have Web Essentials 2.5.1 installed so this issue shouldn’t be the same as mine.

Although my situation didn’t match the one on Mads’s blog, I decided to install Web Tools 2012.2 just to see what the result would be. As it turned out, installing the Web Tools 2012.2 did solve the problem. Here’s why I think this solved it:

I had an older version of WebEssentials installed, which included specific functionality. This functionality was moved to Web Tools, and out of the new version of Web Essentials. When I updated to the new version of Web Essentials (without having Web Tools installed!), the functionality was no longer available in Web Essentials giving me the ‘Could not load type’ exception.
I’m not sure why the exception did not occur when I opened a different project first or if this is the exact reason of the exception occurring. I’ll contact Mads to share my findings, he might be able to reproduce this.

Hope this helps

Debugging JavaScript with Visual Studio in an ASP.NET MVC 4 application

When debugging JavaScript in an ASP.NET MVC (4) application, it is not always enough to uncheck the ‘Disable script debugging’ checkboxes under ‘Tools’ – ‘Internet Options’ – ‘Advanced’ – ‘Browsing’. JavaScript inside a Razor view (a cshtml file) cannot be debugged from Visual Studio. To debug your JavaScript, move it to a separate .js file and link to that file from your Razor view. This way, breakpoints set in the JavaScript will be hit and you can debug from Visual Studio.

Hope this helps

 

Disclaimer: I know about the F12 Developer Tools, Firebug and all the other possibilities we have to debug JavaScript. This post is about getting JavaScript debugging to work with Visual Studio and breakpoints set in Visual Studio. For those who want it that way. So there… ;)

How To: Create an ActionLink with a Twitter Bootstrap icon in MVC4

Twitter Bootstrap is a… “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” One of the nice things in Bootstrap is you can use icons from Glyphicons. To use these, you can simply use this markup <i class=”icon-fire”></i> get a nice fire icon (fire ).
Translating this into an ActionLink styled as a button in an MVC4 application would look something like the following:

@Html.ActionLink("<i class="icon-fire"></i> Invent fire", "fire", new { @class = "btn" })

Unfortunately, this renders as follows:

encoded

The reason this is not rendered correctly is because Html.ActionLink HtmlEncodes the text you pass in the actionLink parameter. You can check this by opening the System.Web.Mvc assembly in your disassembler of choice, and having a look at the GenerateLinkInternal method on the HtmlHelper class. It HtmlEncodes the linkText, and doesn’t have any option to have it not do that. To solve this, I wrote an extension method called NoEncodeActionLink, looking like this:

public static IHtmlString NoEncodeActionLink(this HtmlHelper htmlHelper, string linkText, string action, object htmlAttributes) 
{ 
    TagBuilder builder; 
    UrlHelper urlHelper; 
    urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 
    builder = new TagBuilder("a"); 
    builder.InnerHtml = linkText; 
    builder.Attributes["href"] = urlHelper.Action(action); 
    builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
    return MvcHtmlString.Create(builder.ToString());
}

Calling the new overload (don’t forget to add a using statement to the namespace holding the extension method), the linkText parameter is not HtmlEncoded, which means the ActionLink now renders fine, including the icon (and the button style):

unencoded

Hope this helps.