The session mainly focused on the following topics in ASP.NET MVC 4:
- How to use the HTML5 viewport attribute and adaptive rendering to improve display on mobile devices
- How to create mobile-specific views
- How to create a view switcher that lets users toggle between a mobile view and a desktop view of the application
ViewPort Meta Tag:
Mobile browsers define a virtual browser window width (the viewport), which can be larger than the actual width of the mobile device. The viewport
<meta> tag in the ASP.NET MVC 4 layout file sets the viewport to the device width. This tag can be used in any web application and is not ASP.NET MVC 4 specific.
The following line shows the viewport
<meta> tag in the ASP.NET MVC 4 layout file: <meta name=”viewport” content=”width=device-width”>
ASP.NET MVC 4 provides a new feature with which you can override layout and partial views for mobile browsers as well as specific browsers. If you need a different view for the mobile browser, you simply copy a view file and add .Mobile to the file name. Then you need to create a mobile-specific view. I provided a link to a sample on ASP.NET/MVC , which outlines the entire process in detail.
This is a package for easily converting views to mobile, when creating mobile-specific views. This package should be available through the new Recipes feature for ASP.NET MVC 4, which can be installed using NuGet.
You can install JQuery.Mobile.MVC for ASP.NET MVC 4 as a NuGet package.
This is a partial view, which provides a link at the top of each page to switch from desktop view to mobile view and vice versa. The desktop layout does not include a view switcher by default, so there is no link to browse to the mobile version of a view from the desktop layout.
Download link for ASP.NET MVC 4 Developer Preview:
Release Notes for ASP.NET MVC 4:
Link to ASP.NET MVC RoadMap:
Sample to follow along (sample files available for download):
Download link for Windows Phone SDK 7.1 (for the emulator):
Install NuGet for ASP.NET MVC4 recipes:
On a side note: