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:
This 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 Views\Home\Index.mobile.cshtml to override Views\Home\Index.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 <body> element:
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:
|Overrides the request's actual user agent value using the specified user agent.
|Returns the request's user agent override value, or the actual user agent string if no override has been specified.
|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.
|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.
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.)