RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Windows Mobile Application Development with ASP.NET MVC 4.0

Step by step instructions for using ASP.NET MVC 4.0 instead of ASP.NET Web Forms to create Web applications.


ASP.NET MVC is an alternate to the ASP.NET Web Forms pattern for creating MVC-based Web applications within Microsoft .NET framework. This lightweight framework is integrated with existing ASP.NET features. MVC framework is defined in the System.Web.Mvc namespace and includes ASP.NET Web API, a new framework for creating HTTP services that can reach a broad range of clients, including browsers and mobile devices.

Creating an ASP.NET MVC 4 Mobile App

Before you start, make sure you have the following prerequisites installed.

Assuming all the prerequisites are installed, follow the steps below:

  1. Start Visual Studio 2010.
  2. Select New from the File menu then select Project…
  3. From the Installed Templates section, expand C# and from template pane, select ASP.NET MVC 4 Web Application.

    Click here for larger image

    Figure 1. Select ASP.NET MVC 4 Web Application Template

  4. In the Name box, type the name of any project, for example, MvcAppDemo.
  5. Then click OK.
  6. Select Mobile Application from the available templates and select any engine ASPX/Razor from the combo box.

    Click here for larger image

    Figure 2. Select ASPX/Razor Engine

  7. Then click OK.

Single Page Applications in ASP.NET

ASP.NET MVC 4 has included an experimental support for building applications which have significant client-side interactions. This support mainly includes JavaScript and Web APIs such as:

  • A set of JavaScript libraries that can be used for richer local interactions with cached data
  • Additional Web API components that can be used for unit of work and DAL support
  • An MVC project template with scaffolding to get started quickly

Enhancements to Default Project Templates

ASP.NET MVC 4 project templates have been updated to create a more modern-looking website. The improved functionality in the new template employs a technique called adaptive rendering to look good in both desktop browsers and mobile browsers without any customization. To get a view of what adaptive rendering is, you may use a mobile emulator or just resize the desktop browser into be smaller window. When the browser window gets small enough, the layout changes the page accordingly. Another significant enhancement to the default project template is the use of JavaScript to provide a richer UI.

Mobile Project Template

The Mobile Application project template can be used to create a site specifically for mobile and tablet browsers. This is based on jQuery Mobile, an open-source library for building touch-optimized UIs. The template contains a virtually identical application structure as the Internet Application template, styled with jQuery Mobile to have a better look and feel on touch-based mobile devices.

Display Modes

If you already have a desktop-oriented site to which you want to add mobile-optimized views, or if you want to create a single site that serves differently styled views to desktop and mobile browsers, you can use the new Display Modes feature. Display Modes lets an application select views depending on the browser making the request. For example, while desktop browser requests the Home page, the application might use the Index.cshtml template, and if a mobile browser requests the Home page, the application might return the Index.mobile.cshtml template. You can override Layouts and partials for particular browser types. For example:

  • If your Views\Shared folder contains both the _Layout.cshtml and _Layout.mobile.cshtml templates, the application by default will use _Layout.mobile.cshtml during requests from mobile browsers and _Layout.cshtml during other requests.
  • If a folder contains both _MyPartial.cshtml and _MyPartial.mobile.cshtml, the instruction @Html.Partial("_MyPartial") will render _MyPartial.mobile.cshtml during requests from mobile browsers, and _MyPartial.cshtml during other requests.

To customizing further to specific views, layouts or partial views for other devices, the developer needs to register the DefaultDisplayMode instance, specifying which name to search for when a request satisfies particular conditions. For example, you could add the following code to the Application_Start method in the Global.asax file to register the string "iPhone" as a display mode that applies when the Apple iPhone browser makes a request:

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

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date