May 2012

Volume 27 Number 05

ASP.NET MVC 4 - What’s New for Mobile Development in ASP.NET MVC 4

By Keith Burnell | May 2012

For a long time, developers have been looking for the holy grail of tooling that allows a single codebase to reach every platform, and this is more important than ever today. Because of the increasing popularity and variety of mobile smartphones and tablets around the world, it’s crucial that your site have a pleasant and usable mobile interface. You could certainly go the native application route and create specific applications for iOS, Android, Windows Phone, BlackBerry and so forth, but unfortunately, native applications require platform-specific skill sets and code.

Fortunately, HTML5 and CSS3 appear to be the toolset that will finally allow you to truly “write once, run anywhere.” Although not yet finished specifications, HTML5 and CSS3 are quickly becoming industry standards for multitargeted, browser-based sites, with most of the features already supported by the major browsers. The great thing about the HTML5/CSS3 combo is that it’s just straight HTML markup that can be leveraged from any HTML-based toolset—from PHP to ASP.NET MVC.

This article will dive into the new features of ASP.NET MVC 4, many of which leverage the browser-agnostic capabilities of HTML5 and CSS3 to make it easier for you to develop sites targeted specifically at mobile browsers, as well as those aimed at both mobile and desktop browsers.

If you don’t yet have ASP.NET MVC 4 installed and are running Visual Studio 2010, you can download the bits from the Web Platform Installer or directly from the ASP.NET MVC Web site (asp.net/mvc/mvc4). Visual Studio 11 includes ASP.NET MVC 4.

Adaptive Rendering

Adaptive rendering is the process of displaying a Web site differ­ently depending on the capabilities of the targeted device and browser. Many adaptive rendering techniques have been included with ASP.NET MVC 4.

Viewport Meta Tag By default, browsers—even those on mobile devices and tablets—assume they’re rendering pages on the desktop and display content at a width of 980 pixels and zoomed out. Figure 1 shows a site created using the default Internet site template from ASP.NET MVC 3. Notice that even though the site is being displayed in a mobile browser, the browser still assumes it’s rendering for the desktop. Although the site rendered in this fashion is still usable, it’s certainly not ideal.

The Default Display Created Using ASP.NET MVC 3
Figure 1 The Default Display Created Using ASP.NET MVC 3

Instead, you can use the viewport meta tag to tell the browser explicitly the width, height and scale to render the content. You can also configure the viewport meta tag to render based on the capabilities of the device:

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

Figure 2 shows the page after the meta viewport tag was added to the _Layout.cshtml. The site is now scaled to the width of the device. If you create a new ASP.NET MVC 4 project using any of the project templates (except the Web API template), you can open up the _Layout.cshtml file and you’ll see the viewport meta tag in the head section. 

Scaling to the Device with ASP.NET MVC 4
Figure 2 Scaling to the Device with ASP.NET MVC 4

CSS Media Queries  When you’re developing a multitargeted site, you generally want mobile users to see a view that’s different from the one your desktop users see. Typically, the functionality is nearly the same, but the style and display of the content are not. With CSS media queries you can conditionally apply specific CSS styles based on the capabilities of the browser making the request to your Web site:

@media only screen and (max-width: 850px) {
    header{
      float: none;
    }
  }

This media query will apply the contained styles only when the media is screen, not print, and the maximum width of the area the site is being rendered on is less than 850 pixels. This technique allows you to change the style of your content in any conceivable fashion based on the rendering capabilities of the browser.

When dealing with mobile browsers, you always have to take bandwidth into account. Generally when you’re using a mobile device, you aren’t connected to Wi-Fi or another high-speed network, so when you serve up your site to these devices you’ll want to do so in the most efficient manner possible. For example, if images aren’t necessary to the functionality of your site, don’t include them in mobile views. If you do need images, make sure to serve images of the correct size—that is, be sure to actually send the image sized to the dimensions at which it is to be displayed. Just as you can specify an image with CSS, with CSS media queries you can specify different images based on the capabilities of the device and browser.

All of the default ASP.NET MVC 4 project templates, excluding the Web API template, include some examples of CSS media queries. To demonstrate this, create and run a new ASP.NET MVC 4 project with the Internet Application project template. Maximize your browser and then slowly start reducing the size of the window. Once you get the window size to 850 pixels or less, you’ll notice many changes to the display of the default page. To get details on the exact changes, take a look at the Site.css file starting with line 466.

When It Just Can’t Be Done with CSS Alone

Sometimes modifying the styles isn’t enough to get your site rendered and usable on all devices. In such cases, your only real option is to create views tailored to the browser types and devices you want to reach.

Serving up Mobile-Specific Views The idea of serving up specific pages based on the browser making the request isn’t new. Developers have been browser sniffing for a long time. In earlier versions of ASP.NET MVC you could create a custom view engine implementation that inherits from either the Web Forms or Razor view engines, override the FindView method, add some browser sniffing, and return a view specific to the consuming browser. There are two new features in ASP.NET MVC 4 that allow you to accomplish this at different levels with a lot less effort.

New functionality in ASP.NET MVC 4 lets you globally override views for mobile devices using convention rather than configuration. When ASP.NET MVC 4 is servicing a request from a mobile browser and it’s determining what view to serve, it first looks for views with the naming convention of [view].mobile.cshtml. If a view matching the naming convention is found, ASP.NET MVC will serve it up; otherwise it will fall back to the standard view.

As you can see in Figure 3, I made a copy of _Layout.cshtml and renamed it _Layout.mobile.cshtml per this convention. I highlighted the line of HTML that was added to make it obvious which _Layout.cshtml is being used to render the page. When the site is rendered in the desktop browser nothing changes, but when I render the site in the mobile browser, as shown in Figure 4, you can see that the mobile version of _Layout.cshtml is being used.

Mobile-Specific _Layout.cshtml
Figure 3 Mobile-Specific _Layout.cshtml

Mobile-Specific View
Figure 4 Mobile-Specific View

Serving up Browser-Specific Views For the most part, it’s no longer necessary to serve up browser-­specific views or content on the desktop. If you’ve been developing Web sites for any length of time, however, chances are you wrote code or CSS to get something to work in one specific browser or another. That’s where we are now with mobile browsers, but the problem is compounded because of the vast number of mobile platforms, each with its own browser. And, as if that weren’t enough, we now have the concept of “native” sites. It’s no longer sufficient that your site renders well on mobile browsers; to be truly top-notch, the site needs to have the look and feel of applications that run natively on the device. This requires specific views to be served not only for mobile browsers in general, but for specific mobile browsers with styling to match the platform.

To accomplish this, ASP.NET MVC 4 introduced Display Modes. This new feature allows you to combine the ease of convention over configuration with the robustness of using browser sniffing to serve up browser-specific views.

In order to take advantage of Display Modes you must first define them in the Application_Start method of the Global.asax, like so: 

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

This is a Display Mode created for the iPhone browser. The first instance of “iPhone” defines the suffix of the view that ASP.NET MVC will look for when determining what view to render. The second instance of “iPhone” refers to the user agent making the request and defines the condition ASP.NET MVC will use to match the naming convention [view].iPhone.cshtml. You can essentially translate this as: When an iPhone browser is making the request, look first for views matching the suffix “iPhone.”

To demonstrate the iPhone browser Display Mode, I made another copy of _Layout.cshtml and named it _Layout.iPhone.cshtml per the naming convention defined when I created the Display Mode. I then modified it to make it obvious that the iPhone layout is being used when I browse the site with the iPhone. If I look at the site in the desktop browser or the Windows Phone emulator browser, I don’t see my modification, but when I pull up the site in the iPhone browser, as shown in Figure 5, I can see the modification.

iPhone-Specific View
Figure 5 iPhone-Specific View

The addition of these features to ASP.NET MVC 4 allows you to easily serve up mobile- and browser-specific views with little to no plumbing. Using view overriding and display modes in ASP.NET MVC 4, you can serve up mobile- and browser-specific views, giving you the opportunity to fully tailor your site to the device on which it’s being rendered.

jQuery Mobile and jQuery.Mobile.MVC

jQuery Mobile is an open source library for building UIs for mobile devices based on jQuery Core. Because jQuery Mobile is a well-documented toolset and because implementing jQuery Mobile in ASP.NET MVC 4 is no different than implementing it in any other language or framework, I’m not going to go into it here, except to note how to incorporate it into ASP.NET MVC 4.

jQuery Mobile isn’t included by default with the ASP.NET MVC 4 project templates (other than the Mobile Application project template), but adding it to an ASP.NET MVC 4 application isn’t difficult. You should use NuGet to install the scripts and other necessary files and then go into _Layout.cshtml and manually add the required script and CSS references. Alternatively, you can install the jQuery.Mobile.MVC NuGet package, which will install all the scripts and other necessary files; create a _Layout.Mobile.cshtml; and add references to all the jQuery Mobile script and CSS files. The jQuery.Mobile.MVC NuGet package also adds view-switching functionality that lets users viewing the mobile version of the site switch to the full desktop view, as shown in Figure 6.

jQuery Mobile View with View-Switching Functionality
Figure 6 jQuery Mobile View with View-Switching Functionality

Project Template

If you want to create a standalone site that specifically targets mobile browsers, ASP.NET MVC 4 has created a project template that lets you to do exactly that. When you create a new ASP.NET MVC 4 project, you now have the option to choose a “Mobile Application” project template. 

Create a project with the ASP.NET MVC 4 Mobile Application project template and then take a look at the overall project structure. You’ll see that nothing obvious has changed as compared with the standard ASP.NET MVC 4 application project template—you still have the same models, views and controllers. When you run the application, however, you’ll see that the site is specifically tailored for mobile browsers.

As I briefly mentioned earlier, the ASP.NET MVC 4 Mobile project template includes jQuery Mobile out of the box. Moreover, it implements jQuery Mobile in all the default views:

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc"
    title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Navigation</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

This code is from Views/Home/Index.cshtml. If you aren’t familiar with jQuery Mobile and how it’s implemented, the first things you probably noticed are the “data-” (“data dash”) attributes. These are what jQuery Mobile uses to configure controls on the page.

The ASP.NET MVC 4 Mobile Application project template is great for when you’re creating a site that targets only mobile browsers, or to serve as a reference when you want to implement mobile browser-specific features. Most of the time, you’ll probably be creating a site that’s really aimed at desktop browsers. Still, you want your site to render in a usable fashion on mobile browsers without having to spend a ton of extra time and effort making mobile-specific code modifications. Fortunately, the ASP.NET MVC 4 Mobile Application project template can be used here and as a starting point for introducing mobile-specific features into an existing desktop browser-based MVC application.

With the popularity of mobile devices, it’s no surprise that improving the mobile Web site development experience was such a focus in ASP.NET MVC 4. Utilizing the new features in ASP.NET MVC 4 will ensure that sites not only reach their full audience, but do so without requiring major coding and duplication in the UI layer.


Keith Burnell is a senior software engineer with Skyline Technologies. He’s been developing software for more than 10 years, specializing in large-scale ASP.NET and ASP.NET MVC Web site development. Burnell is an active member of the developer community and can be found on his blog (dotnetdevdude.com) and on Twitter at twitter.com/keburnell.

Thanks to the following technical experts for reviewing this article: John Ptacek and Clark Sell