ASP.NET MVC 4 Developer Preview: Enhanced Default Templates
This is the third article focusing on the new additions to ASP.NET MVC 4. This article will focus on the enhanced default templates. Previous versions of MVC have come with a default template that, quite frankly, wasn’t very appealing. The ASP.NET team have listened and they’ve updated the default template to play nicely with different devices and browsers.
Before going any further, you should read the first and second article in this series on ASP.NET MVC 4 Developer Preview.
Installation
Before undertaking any development, you’ll need to install the MVC 4 builds. The simplest way to do this is via the Web Platform Installer. MVC 4 is available for Visual Studio 2010 or Visual Studio 2011 Developer Preview.
All of the MVC articles I’m authoring are developed in Visual Studio 2011 Developer Preview. Below are the links to get started.
Enhanced Default Templates
When you create a new project, the default website looks quite different from previous versions. Besides the improved aesthetics, the default website has improved functionality thanks to a technique called adaptive rendering.
Adaptive rendering is where the page is rendered specific to the browser without any customization. This is an absolute must for most developers today; write once, run everywhere. The adaptive rendering is made possible thanks to media queries.
After you creating a new website, you’ll be able to see the improvements in the default layout.
To see the adaptive rendering in action, open the page using a mobile device.
Here’s how the page looks on an iPhone.
And here’s how the page look on an iPad.
The page renders differently depending on the size of the screen. Making the page do that without media queries is tricky. Using media queries makes it simple.
One final thing to note is the default template takes advantage of jQuery UI also. The Login and Register links show you how to use this JavaScript library to provide a richer UI. You can read all about the other features that are available to you with jQuery UI here.
Testing with Emulators
To test these new features, you can either use a physical iPhone or iPad, or you can use an emulator. The emulator I was using is from MobiOne. You can download a 15 day free trial here.
The Windows Phone RC emulator is free and can be downloaded here.
