Mobile

A web site designed for a desktop browser is unlikely to work so well on a mobile device due to the latter's reduced screen size and touch input method, for example. Sometimes it can be enough just to add media-specific css or change the master page layout, but at other times mobile specific versions of pages will also be needed.

ASP.NET MVC 4 introduced a simple mechanism to override a view for mobile browsers. Providing a mobile-specific view just consists of copying the existing view file and adding '.Mobile' to the file name. In VS 2012 The Navigation framework introduces this functionality into Web Forms.

This feature only works for States that have a route configured. Taking the State Information configuration in State Information, to provide a mobile-specific view for State S1 first a route must be added as detailed in ASP.NET Routing and shown below.

<state key="S1" page="~/P1.aspx" route="R/{P}">
	<transition key="T1" to="S2"/>
</state>
Next create a page called P1.Mobile.aspx. Then whenever the State S1 is navigated to in a mobile browser the P1.Mobile.aspx page will be displayed instead of the P1.aspx page.

This feature also applies to master pages and themes. For example, delete the page P1.Mobile.aspx and instead assign a master page called M1.Master to page P1.aspx (either directly in the page itself or through the masters attribute of the State Information configuration). Next create a master page called M1.Mobile.Master. Then whenever the State S1 is navigated to in a mobile browser the page P1.aspx will be displayed but with the M1.Mobile.Master master page.

The Navigation framework's mobile support uses the Display Modes functionality introduced in ASP.NET MVC 4. So it's possible to create views for any individual browser. For example, an iPhone Display Mode can be created by adding the code shown below to the Application_Start method of the Global.asax file (making sure to add a using to the System.Web.WebPages namespace).

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
	ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
		("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});
Then a master page called M1.iPhone.Master will be displayed whenever state S1 is navigated to in an iPhone.

If using VS 2012 is not an option the Navigation framework provides mobile support by allowing any or all of the page, route, theme and masters to be overridden by specifying the mobilePage, mobileRoute, mobileTheme and mobileMasters attributes respectively.

Taking the State Information configuration in State Information the State S1 can be assigned a mobile specific page as shown below.

<dialog key="D1" initial="S1" path="~/Default.aspx">
	<state key="S1" page="~/P1.aspx" mobilePage="~/P1.Mobile.aspx">
		<transition key="T1" to="S2"/>
	</state>
	<state key="S2" page="~/P2.aspx">
		<transition key="T2" to="S3"/>
	</state>
	<state key="S3" page="~/P3.aspx">
	</state>
</dialog>
To be clear, these two approaches to providing mobile-specific views are conflicting and the latter should only be used if VS 2012 is unavailable.

Browser overriding was introduced in VS 2012, allowing a request to be treated as if it originated from a different browser (user agent). The Navigation framework's ViewSwitcher control uses browser overriding to enable toggling between mobile and desktop views (similar to the view switcher functionality introduced into MVC 4).

Sample Web Site

Assign a route attribute to the Details State and add a Web Form called Details.Mobile.aspx to the Web Site with a heading signifying it as a mobile-specific page as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.Mobile.aspx.cs" Inherits="NavigationSample.Details_Mobile" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<h1>Mobile Page</h1>
	</form>
</body>
</html>
Pressing F5 and selecting a person will show the Details.aspx page. One way to see the Details.Mobile.aspx page would be to use a browser that allows the switching of the user agent string to simulate mobile acces (e.g., chrome dev tools).

Another way is to use the ViewSwitcher control. Add a ViewSwitcher control to Listing.aspx, before the FormView, as shown below.

<cc1:ViewSwitcher runat="server" DesktopSwitchText="Deskop view" MobileSwitchText="Mobile view"/>
Pressing F5 and clicking the Mobile view Hyperlink will redisplay the page with a Desktop view Hyperlink visible to enable the switch back. Notice that the search criteria, sorting and paging information are all retained when switching between views. Now selecting a person from the list will display the Details.Mobile.aspx page.

To demonstrate mobile-specific development prior to VS 2012 set the mobilePage attribute as shown below.

<state key="Details" page="~/Details.aspx" mobilePage="~/Details.Mobile.aspx" title="Person Details" route="Person">

Last edited Aug 4, 2013 at 7:32 PM by GrahamMendick, version 4