Update Visual Studio for HTML5 Development with .Net

By Alan Pasho on 11|29|11

As many companies and developers are making the move to creating HTML5 apps many are wondering how to develop HTML5 applications in their current version of Visual Studio with .Net? There are two updates that developers can apply to Visual Studio 2010 that will allow development in HTML5. First, one needs to download and apply the Visual Studio 2010 Service Pack 1. Before installing, be sure to (1) disable any anti-virus software and (2) run the install as an administrator by right clicking on setup.exe and choosing ‘Run as administrator’ if you are using Windows 7. The installation process should take less than an hour. If it appears to be stuck, cancel the installation and refer to this link.

Once installed you can set the HTML5 as the default schema by selecting Options from the Tools menu and then selecting Validation from the options list in the left column and making HTML5 the target validation schema.

The second update is the Web Standards Update for Microsoft Visual Studio 2010 SP1.

Now let us create a sample HTML5 ASP.NET application. Create an ASP.NET Web Application. We will name it, HTML5 Features. First, we will add modernizr.js:

Right click on Scripts

Add Existing Item

Select the file modernizr.js which you can download from modernizr.com

Next we will modify the Site.Master file:

First, replace the current doc type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

with

<!DOCTYPE html>

And add some JavaScripts to the Head section

<script src="<%=ResolveUrl("~/Scripts/modernizr.js") %>"></script>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

And we will also add the JavaScript code for printing the feature status, which is too long to reproduce here (see the project download for the full code):

<script type="text/javascript">
        $(document).ready(function () {
            if (Modernizr.websockets) {
                $("#web-sockets").html('Yes');
            }
            else {
                $("#web-sockets").html('No');
            }
…
 
            if (Modernizr.svgclippaths) {
                $("#svgclippaths").html('Yes');
            }
            else {
                $("#svgclippaths").html('No');
            }
 
        });
    </script>

In the Body section, change “My ASP.NET Application” to “My ASP.NET HTML5 Browser Features Application”

And in Default.aspx replace the contents of

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

with:

	       <p><strong>HTML5 Features</strong></p> 
		<p>Audio support? <span id="audio"></span></p>
		<p>Canvas support? <span id="canvas"></span></p>
		<p>Canvas Text support? <span id="canvastext"></span></p>
		<p>Cross Window Messaging support? <span id="crosswindowmessaging"></span></p>
		<p>Drag and Drop support? <span id="draganddrop"></span></p>
		<p>Geolocation support? <span id="geolocation"></span></p>
		<p>Hashchange support? <span id="hashchange"></span></p>
		<p>History Management support? <span id="historymanagement"></span></p>
		<p>Indexed DB support? <span id="indexeddb"></span></p>
		<p>Video support? <span id="video"></span></p>
		<p>Web SQL Database support? <span id="sqldb"></span></p>
		<p>Web Socket support? <span id="web-sockets"></span></p>
		<p>Local Storage support? <span id="localstorage"></span></p>
        	<p>Web Workers support? <span id="webworkers"></span></p>		
        	<p>Application Cache support? <span id="applicationcache"></span></p>
		<p>Session Storage support? <span id="sessionstorage"></span></p>
		<p>SVG support? <span id="svg"></span></p>
		<p>SMIL support? <span id="smil"></span></p>
		<p>SVG Clippaths support? <span id="svgclippaths"></span></p>

Now you can build and run the program. This will be the result: