如何创建一个按钮,我的MVC网站的移动和桌面模式之间进行切换?
我有一个检测正在使用何种设备(手机或桌面浏览器),并显示相应的意见MVC网站:要么MySite.cshtml或MySite.Mobile.cshtml。这是工作的罚款。我希望能有这两种模式之间切换的网站上的一个按钮。我该怎么做?
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
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
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)
)
))
});
这是创建一个这样的移动设备使用MySite.Mobile.cshtml和桌面网站使用MySite.cshtml的看法。
This creates it so a mobile device uses the view MySite.Mobile.cshtml and desktop sites use MySite.cshtml.
我可以添加一行code以这样的DeviceConfig.cs
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)
让桌面浏览器如Chrome将被识别为移动网站。
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?
所以点击一个名为手机版会叫MySite.Mobile.cshtml按钮,点击一个名为桌面版按钮,会打电话MySite.cshtml。
So clicking a button called "Mobile Version" would call MySite.Mobile.cshtml and clicking a button called "Desktop Version" would call MySite.cshtml.
下面是谈论这个问题的问题,但他们似乎是实现移动网站的不同方式。我不想改变我选了一个移动网站在这一点的方式(该项目几乎完成,手机网站正在移动设备上)。不过,我以为有人也许能调和这一建议与我的问题。我试过,并能做到这一点。
Switching一个自定义的移动显示模式和桌面模式在ASP.NET MVC4
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
我已经做了,在过去类似的措施。让你的切换到桌面指向该设置一个布尔会话变量的动作(比如说FORCEDESKTOP)设置为true。这将被用于强制的网站变成桌面/移动模式。
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.
然后,在你的code,检查观众:
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
)
))
});
然后,当FORCEDESKTOP是真的,你可以切换视图code,允许用户通过您用来设置同样的行动再次禁用它。
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.