asp.net-mvc - MVC jQuery 移动 iPad

Question

我将这个示例用于 MVC：

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

当我部署该站点时，它在我的 Windows Phone 上看起来不错。当我在 iPad 上访问我的网站时，我看不到 jQuery mobile。如何启用平板电脑支持？

Answer 1

我必须将 iPad 添加为注册设备。这是我的 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);
                    }
            }));
    }
}
}

移动一词将用户重定向到 Shared/Layout/_Layout.Mobile。iPad 一词用于查找设备。更多信息可以在这里找到：

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

“浏览器特定视图”

如果我将 Mobile 更改为 iPad，浏览器将重定向到 _Layout.iPad

转到 ~/Shared/_ViewSwitcher 并更改代码：

@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>
}