Download the
project sample � MVC4Mobile

This is a
mobile app for showing Conference details. Sessions data for the conference is
kept in the following XML file:

~/App_Data/Sessions/RawSessionsData.xml

The project
starts with no pleasant mobile view (or desktop view for that matter)

Background

CSS Media
Queries

These are
CSS extensions for media types. Used to create rules to override the default
CSS rules based on browser (user agent) sizes. For example:

Viewport
Meta Tag

The viewport
is the browser window width, on mobile devices this is actually much larger
than actual width of device so that full webpages could be loaded onto the
page. That way the user can zoom in/out of the page. If setting viewport to the
actual width of the device, no zooming is available. In ASP.NET MVC, the
viewport is set as follows:

<meta name="viewport" content="width=device-width">

Overriding
Views, Layouts and Partial Views

MVC 4 allows
override of any view (including layouts and partial views) for mobile browsers
in general or specific browsers. This allows creation of mobile-specific
layouts. Simply create a layout of view with *.mobile.cshtml. For
example:

–         
_Layout.mobile.cshtml

–         
AllTags.mobile.cshmtml

jQuery Mobile

jQuery
Mobile applies progressive enhancement to mobile browsers that support CSS and
JavaScript. To start � install jQuery.Mobile.MVC from NuGet package. Also
remove any override layouts and views, as jQuery mobile don�t need these.

The jQuery.Mobile.MVC NuGet package installs the following:

�        
The App_Start\BundleMobileConfig.cs file,
which is needed to reference the jQuery JavaScript and CSS files added. You
must follow the instructions below and reference the mobile bundle defined in
this file.

�        
jQuery Mobile CSS files.

�        
A ViewSwitcher controller widget (Controllers\ViewSwitcherController.cs).

�        
jQuery Mobile JavaScript files.

�        
A jQuery Mobile-styled layout file (Views\Shared\_Layout.Mobile.cshtml).

�        
A view-switcher partial view (MvcMobile\Views\Shared\_ViewSwitcher.cshtml)
that provides a link at the top of each page to switch from desktop view to
mobile view and vice versa.

�        
Several .png  and .gif image
files in the Content\images folder.

RequireConsistentDisplayMode

You can globally disable a default
(non-mobile) view from rendering inside a mobile layout by settingRequireConsistentDisplayMode to true in
the Views\_ViewStart.cshtml file, like this:

Setting this
to false will enable the mobile views.

The RequireConsistentDisplayMode can be set the
global ViewStart file or at each individual view file, such as Views\Home\AllSpeakers.cshtml.

Custom
CSS

jQuery
mobile comes with its own custom CSS. Reference here for all CSS definitions.

Example:

<ul data-role="listview">

��� @foreach(var
speaker in Model) {

������� <li>@Html.ActionLink(speaker,
"SessionsBySpeaker", new {
speaker })</li>

��� }

</ul>

This enables
a mobile friendly list view.

There are
also custom jQuery Mobile features available, such as data-filter, data-role,
and list-divider.

The follow
example groups the date list into days (AllDates.mobile.cshtml):

@model IEnumerable<DateTime>

@{

��� ViewBag.Title = "All
dates";

��� DateTime
lastDay = default(DateTime); //
initial date

}

<h2>Dates</h2>

<ul data-role="listview">

��� @foreach (var date
in Model)

��� {

������� if
(date.Date != lastDay) // group dates together

������� {

����������� lastDay = date.Date;

����������� <li data-role="list-divider">@date.Date.ToString("ddd,
MMM dd")</li>

������� }

������� <li>@Html.ActionLink(date.ToString("ddd,
MMM dd, h:mm tt"), "SessionsByDate", new {
date })</li>

��� }

</ul>