November 2011 Entries
This is the 5th post in the series of HTML5 for ASP.NET Developers
Support for HTML5 in Visual Studio 2010 has been quite good with Visual Studio Service Pack 1
However, HTML5 Boilerplate template has been one of the most popular HTML5 templates out in the internet. Now, there is one for your favorite ASP.NET Webforms as well as ASP.NET MVC 3 Projects (even for ASP.NET MVC 2). And its available in the most optimal place, i.e. NuGet.
Lets see it in action. Let us fire up Visual Studio 2010 and create a “File – New Project – ASP.NET Web Application” and leave the default name to create the project. The default project template creates Site.Master, Default.aspx and the Account (membership) files.
When you run the project without any changes, it shows up the default Master Page with the Home and About placeholder pages.
Also, just to check the rendering on devices, lets try running the same page in Windows Phone 7 Emulator. You can download the SDK from here
Clearly, it looks bad on the emulator and if we were to publish the application as is, its going to be the same experience when users browse this app.
Close the browser and then switch to Visual Studio. Right click on the project and select “Manage NuGet Packages”
The NuGet Package Manager dialog opens up. Search for HTML5 Boilerplate. The options for MVC & Web Forms show up. Click on Install corresponding to the “Add HTML5 Boilerplate to Web Forms” options.
It installs the template in a few seconds. Once installed, you will be able to see a lot of additional Script files and also the all important HTML5Boilerplate.Master file.
This would be the replacement for the default Site.Master. We need to change the Content Pages (Default.aspx & other pages) to point to this Master Page. Example <%@ <% Master Language="C#" AutoEventWireup="true" CodeBehind="Html5Boilerplate.Master.cs" Inherits="WebApplication14.SiteMaster" %> would be the setting in the Default.aspx Page.
You can do a Find & Replace for Site.Master to HTML5Boilerplate.Master for the whole solution so that it is changed in all the locations.
So, now when we run the page from Visual Studio, the following is what we get. Notice the site.icon automatically added. The page otherwise looks similar to what it was earlier.
Now, when we also check this page on the Windows Phone Emulator, here below is what, we get.
As you can see, we definitely get a better experience now. Of course, this is not the only HTML5 feature that we can use. We need to wire up additional code for using Canvas, SVG and other HTML5 features. But, definitely, this is a good starting point.
You can also install the HTML5boilerplate Template for your ASP.NET MVC 3 and ASP.NET MVC 2 from the NuGet packages and get them ready for HTML5.
One of the cool things about HTML5 is the ability to play audio/video files out of the box without the dependency on plugins. Earlier I had written about HTML5 Video and the fallback using Silverlight for non-supported scenarios
Visual Studio 2010 SP1 has decent support for HTML5, in terms of intellisense, validation etc., But, one issue that is constantly faced when using the HTML5 Video tag in an ASP.NET Application (Web/MVC) built using Visual Studio is that, the videos doesn’t play when running the application from Visual Studio on IE9.
Taking a step back, Visual Studio uses ASP.NET Development Server as the default setting when debugging and running applications on the local machine. The ASP.NET Development Server (also called as Cassini) has been there ever since Visual Studio 2005 days.
So, I created a simple MVC Application with “File – New - Project – ASP.NET MVC 3 Web Application” and left the defaults to create an Application. I added a videos folder and added a H.264 encoded mp4 video (one of the supported HTML5 Video formats) inside the folder.
Then, I added the following line of code in the “Index.cshtml” file.
<video src="@Url.Content("~/Videos/video.mp4")" id="myVideo" controls ></video>
All I got was the above. Basically a broken link. I verified that the path is right and the video is indeed playable on Windows Media Player etc.,
The issue was that, since by default Visual Studio uses the ASP.NET Development Server and the ASP.NET Development Server doesn’t have the flexibility to configure MIME types, It doesn’t understand the video format and hence could not play. When I ran the application on IE9 and checked the Network Tab of the Developer Toolbar, all I got was what you see below
I switched the Project to use IIS Express using “ProjectName” – Right Click – Properties – Web Tab
Still had the same result. Since IIS Express also doesn’t have the MIME Type to play video, configured by default, it couldn’t recognize the video and couldn’t play it.
The simple option is to configure it to use the “Actual IIS” (in the above screen, remove the check from “Use IISExpress”) which can play the video.
But, thankfully this blog post has steps on how to configure MIME types for IIS Express. Only thing is, I had to change it for configuring the MIME type for playing MP4 video.
So, the steps are
1. Click on Start button
2. Type CMD
3. Right click on the CMD that is listed and choose “Run as Administrator”
4. Do a cd to navigate to the IIS Express directory CD “Program Files (x86)”\”IIS Express”
5. And then run the following command
appcmd set config /section:staticContent /+[fileExtension='.mp4',mimeType='vieo/mp4']
That’s it. When I re-ran the application, it could play the video.
Please note, I was unable to configure or figure out how to do it for the ASP.NET Development Server. So, if we need to play HTML5 Video from Visual Studio we either need to use IIS Express or use the full fledged IIS. And from the performance and configuration perspective IIS Express offers a lot more than ASP.NET Development Server and hence it makes more sense to use IIS Express for local development.
Much has been the expectation about Silverlight 5 ever since the fire-starter in December 2010
Silverlight 5 has been the expectation of every SL developer ever since the SL4 release and the huge momentum surrounding HTML5 on the web. While HTML5 is definitely promising, Silverlight and other proprietary plugins have their own strengths in terms of rich capabilities such as Digital Rights Management which have evolved to a great extent.
In MIX 2011, Scott Guthrie unveiled Silverlight 5 Beta among much fanfare! You can read about the complete list of Silverlight 5 Beta features
In the meantime, Silverlight 5 RC is available for download from here