How do I create a button to switch between mobile and desktop modes of my MVC site?

问题

I have a MVC site that detects what device (mobile or desktop browser) is being used and displays the appropriate views: either MySite.cshtml or MySite.Mobile.cshtml. This is working fine. I would like to be able to have a button on the site that toggles between these two modes. How can I do that?

One of the things I'd like to do is make it able for a desktop user to view the mobile version. I would do this to demo this for a client. I could also see reasons a mobile user might want to see the desktop view (for example, they have a larger screen on their smart phone or their generic tablet is being recognized as a mobile device).

Here is how I choose the mobile or desktop view:

Global.asax.cs

public class MvcApplication : System.Web.HttpApplication
{
 protected void Application_Start()
 {
  AreaRegistration.RegisterAllAreas();
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  WebApiConfig.Register(GlobalConfiguration.Configuration);
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  DeviceConfig.EvaluateDisplayMode();
 }
}

DeviceConfig.cs

public static void EvaluateDisplayMode()
{
 DisplayModeProvider.Instance.Modes.Insert(0,
  new DefaultDisplayMode(DeviceTypePhone)
  {
   ContextCondition = (ctx => (
    (ctx.GetOverriddenUserAgent() != null) &&
     (
      (ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) >= 0) ||
      (ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) ||
      (ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) >= 0)||
      (ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) >= 0)
      )
    ))
   });

This creates it so a mobile device uses the view MySite.Mobile.cshtml and desktop sites use MySite.cshtml.

I can add a line of code to the end of the DeviceConfig.cs like this

                    ||
                    (ctx.GetOverriddenUserAgent().IndexOf("webkit", StringComparison.OrdinalIgnoreCase) >= 0) ||
                    (ctx.GetOverriddenUserAgent().IndexOf("moz", StringComparison.OrdinalIgnoreCase) >= 0)

so that desktop browsers like Chrome will be recognized as mobile sites.

How can I create a button (or other control) to toggle between these two versions of the site?

So clicking a button called "Mobile Version" would call MySite.Mobile.cshtml and clicking a button called "Desktop Version" would call MySite.cshtml.

Here's a question that talks about this issue, but they seem to be implementing mobile sites a different way. I don't want to change the way I pick a mobile site at this point (the project is almost finished and the mobile site is working on mobile devices). However, I thought someone might be able to reconcile this suggestion with my question. I've tried and been able to do so. Switching between a custom mobile display mode and desktop mode in ASP.NET MVC4

回答1:

I have done something similar to this in the past. Have your "Switch to Desktop" point to an action that sets a bool session variable (let's say "FORCEDESKTOP") to true. This will be used to "force" the site into Desktop/Mobile mode.

Then, in your code that checks the viewer:

public static void EvaluateDisplayMode()
{
   DisplayModeProvider.Instance.Modes.Insert(0,
      new DefaultDisplayMode(DeviceTypePhone)
   {
       ContextCondition = (ctx => (
           (ctx.GetOverriddenUserAgent() != null) &&
           (
           (ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) >= 0) ||
           (ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) ||
           (ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) >= 0)||
           (ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) >= 0) ||
            Convert.ToBoolean(HttpContext.Session["FORCEDESKTOP"]) != true
            )
        ))
});

Then, when FORCEDESKTOP is true, you can switch the view code to allow the user to disable this again via that same action you used to set it.

来源：https://stackoverflow.com/questions/30620403/how-do-i-create-a-button-to-switch-between-mobile-and-desktop-modes-of-my-mvc-si

标签

android

asp.net-mvc

asp.net-mvc-4

jquery-mobile

mobile