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.

login page

 

To see the adaptive rendering in action, open the page using a mobile device.

Here’s how the page looks on an iPhone.

login page on mobile

And here’s how the page look on an iPad.

login page on 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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.