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>
}
Share on Facebook

Leave a Reply

Your email address will not be published.