MVC jQuery Mobile iPad - asp.net-mvc

Question

I am using this example for MVC:
http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
When I deploy the site, it looks fine on my Windows Phone. When I visit my site in an iPad, I see no jQuery mobile. How do I enable tablet support?

Answer 1

I had to add iPad as a registered device. Here is my global.asax
using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;
using MvcMobile;
using System.Web.Http;
using System.Collections.Generic;
using System.Web;
using System.Linq;
namespace JMA.Web
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
protected void Application_Start()
{
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
RegisterCustomDisplayModes();
}
private void RegisterCustomDisplayModes()
{
Dictionary<string, Func<HttpContextBase, bool>> displayModes = new Dictionary<string, Func<HttpContextBase, bool>>
{
{"Mobile", c => c.Request.UserAgent.IndexOf("iPad", StringComparison.InvariantCultureIgnoreCase) > 0}
};
displayModes.Keys.ToList().ForEach(
key => DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode(key)
{
ContextCondition = c =>
{
if (c == null || c.Request == null || string.IsNullOrEmpty(c.Request.UserAgent))
{
return false;
}
return displayModes[key](c);
}
}));
}
}
}
The word mobile redirects users to Shared/Layout/_Layout.Mobile. The word iPad looks for the device. More info can be found here:
http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
"Browser Specific Views"
If I were to change Mobile to iPad, the browser redirects to _Layout.iPad
Go to ~/Shared/_ViewSwitcher and change the code:
#if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET" ||
Request.UserAgent.IndexOf("iPad", StringComparison.InvariantCultureIgnoreCase) > 0 )
{
<div class="view-switcher ui-bar-d" data-theme="d">
#if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice || Request.UserAgent.IndexOf("iPad", StringComparison.InvariantCultureIgnoreCase) > 0 )
{
#: 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>
}