MVC4 Mobile Application

Very nice setup for templating Tablet and Mobile devices.  Uses JQuery Mobile and some features from HTML5 like CSS Media Queries for sizing pictures.



Partial Views allow for easy maintanance, Like turning li into td etc.  When you are swithing from Web to Mobile.
Tested with Firefox User Agent and with my Android tablet, Windows Phone and iPhone.  MVC4 seems to know what device is calling the web site.

Excellent work, this is more of a placeholder for digging deeper later this holiday season.
 

protected
void Application_Start()
        {
AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
DisplayModes.Modes.Insert(0, newDefaultDisplayMode("Android")
            {   
                ContextCondition = (context => context.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });
DisplayModes.Modes.Insert(0, newDefaultDisplayMode("WindowsPhone")
            {
                ContextCondition = (context => context.Request.UserAgent.IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) >= 0)
            });
DisplayModes.Modes.Insert(0, newDefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });
        }
ViewSwitcher.cshtml
 
@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<divclass="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
else
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
</div>
}

Categories: Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: