Using Less in Visual Studio 2013 Web Project

Here is a cheat sheet on "what to do" to start using LESS on Visual Studio 2013 web project.

1. Install "dotless" using Package Manager Console ("install-package dotless") or the Nuget Package Manager
2. Open Web.config, locate the "dotless" section, and change it as the following.
   The main thing is to add

   <validation validateIntegratedModeConfiguration="false"/>
   

   to the <system.webServer> node.
   

   <dotless minifyCss="false" cache="true" web="false" />
   <system.webServer>
       <validation validateIntegratedModeConfiguration="false"/>
       <handlers>
         <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
       </handlers>
   </system.webServer>
   

3. If the main less file is "my.less", which imports all other less files, add the following comment at the top of each less file except the "my.less".

   /// <reference path="my.less" />
   

Enable vertical split of the same CSHTML view file in Visual Studio 2013

In Visual Studio 2013, you can open the same C# file twice and view them vertically side-by-side by opening the C# file, selecting the menu [Window] --> [New Window] and then selecting [Window] --> [New Vertical Tab Group]. However, for *.cshtml MVC View files, this does not work. The [Window] --> [New Window] menu item is grayed out. To enable [Window] --> [New Window] menu item for *.cshtml file, you can try this registry hack.

1. Close Visual Studio 2013 if currently open.
2. Use RegEdit and go to
   [HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0_Config\Languages\Language Services\HTMLX] .
3. Find "Single Code Window Only" entry. 
4. Change its value from 1 to 0.
5. Start Visual Studio.

Now you should be able to open a *.cshtml file, select [New Window] from the [Window] menu to open another editor window of the same *.cshtml file, right-click on the the new editor window's tab and select [New Vertical Tab Group] to create side-by-side editor view of the same file. Changes you make on one editor window will instantly appear on the other editor window of the same file. 

onclick event handler - get reference to the clicked element

There are a couple of ways to get the reference to the clicked element, which has onclick event on itself.


Method 1

<input type="button" id="btn1" value="Remove" onclick="removeSelf(event)" />

<script type="text/javascript">
  function removeSelf(e){
    var target = (e.target) ? e.target : e.srcElement // IE uses srcElement
    target.style.display = 'none'; 
    target.parentNode.removeChild( target ); // to remove the element
    $(target).remove(); // to remove the element using jQuery
  }
</script>

In Method 1, event is used as parameter. An Event object is created automatically whenever an event is fired, i.e., via user action, key press, mouse movement, etc. To find the source where the event occurred, the property name is either target or srcElement (in IE).


Method 2

<input type="button" id="btn1" value="Remove" onclick="removeSelf(this)" />

<script type="text/javascript">
  function removeSelf(object){    
    object.style.display = 'none';
    target.parentNode.removeChild( target ); // to remove the element
    $(target).remove(); // to remove the element using jQuery
  }
</script>