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.
- Visual Studio Web Developer Express SP1 (If you have Visual Studio 2010 instead of Visual Web Developer 2010, install the WPI installer for ASP.NET MVC 4 Beta and Visual Studio 2010 prerequisites)
- WPI installer for ASP.NET MVC 4 Beta
- SQL Server Compact 4.0 (runtime and tools support)
Assuming all the prerequisites are installed, follow the steps below:
- Start Visual Studio 2010.
- Select New from the File menu then select Project…
- From the Installed Templates section, expand C# and from template pane, select ASP.NET MVC 4 Web Application.
- In the Name box, type the name of any project, for example, MvcAppDemo.
- Then click OK.
- Select Mobile Application from the available templates and select any engine ASPX/Razor from the combo box.
- 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 ViewsShared 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, newDefaultDisplayMode("iPhone"){ ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) });JQuery Mobile, the View Switcher and Browser Overriding
JQuery Mobile is an open source library for building touch-optimized web UIs. If you want to use jQuery Mobile with an ASP.NET MVC 4 application, you can download and install a NuGet package that helps you get started. To install it from the Visual Studio Package Manager Console, type the following command:
Install-Package jQuery.Mobile.MVCThis installs jQuery Mobile and some helper files, including the following:
- Views/Shared/_Layout.Mobile.cshtml, which is a jQuery Mobile-based layout.
- A view-switcher component, which consists of the Views/Shared/_ViewSwitcher.cshtml partial view and the ViewSwitcherController.cs controller.
After you install the package, run your application using a mobile device. You’ll see that your pages look quite different, because jQuery Mobile handles layout and styling. To take advantage of this, you can do the following:
- Create mobile-specific view overrides as described under Display Modes earlier. Create ViewsHomeIndex.mobile.cshtml to override ViewsHomeIndex.cshtml for mobile browsers.
- To learn more about how to add touch-optimized UI elements in mobile views read the jQuery Mobile documentation.
The jQuery.Mobile.MVC package includes a sample view-switcher component to switch between Desktop/Mobile views. To enable this switching feature, add the following reference to _ViewSwitcher to your desktop layout, just inside the element:
@Html.Partial("_ViewSwitcher") ...The view switcher uses a new feature called Browser Overriding. This feature lets your application treat requests as if they were coming from a different browser (user agent) than the one they’re actually from. The following table lists the methods that Browser Overriding provides:
HttpContext.SetOverriddenBrowser(userAgentString) | Overrides the request’s actual user agent value using the specified user agent. |
|---|---|
HttpContext.GetOverriddenUserAgent() | Returns the request’s user agent override value, or the actual user agent string if no override has been specified. |
HttpContext.GetOverriddenBrowser() | Returns an HttpBrowserCapabilitiesBase instance that corresponds to the user agent currently set for the request (actual or overridden). You can use this value to get properties such as IsMobileDevice. |
HttpContext.ClearOverriddenBrowser() | Removes any overridden user agent for the current request. |
Browser Overriding is a core feature of ASP.NET MVC 4 and is available even if you don’t install the jQuery.Mobile.MVC package. However, it affects only view, layout, and partial-view selection — it does not affect any other ASP.NET feature that depends on the Request.Browser object.
By default, the user-agent override is stored using a cookie. If you want to store the override elsewhere (for example, in a database), you can replace the default provider (BrowserOverrideStores.Current). Documentation for this provider will be available to accompany a later release of ASP.NET MVC.
Conclusion
The MVC pattern helps you create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. The pattern specifies where each kind of logic should be located in the application. In addition to managing complexity, the MVC pattern makes it easier to test applications than it is to test a Web Forms-based ASP.NET Web application. However, one must consider carefully whether to implement a Web application by using either the ASP.NET MVC framework or the ASP.NET Web Forms model. The MVC framework does not replace the Web Forms model; you can use either framework for Web applications. (If you have existing Web Forms-based applications, these continue to work exactly as they always have.)
