The following article is excerpted from the following links:
http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
What is View Switcher?
View Switcher is a component available as part of jQuery.Mobile.MVC NuGet package for ASP.NET MVC 4. It contains prototype helpers for jQuery Mobile in ASP.NET MVC 4. Generally when we are browsing mobile site in mobile/tablet sometimes we may want to switch to desktop view, but usually as per the browser detection technique, application always redirects to mobile page.
View Switcher gives the provision to user to switch from mobile view to desktop view and vice-versa.
We can get jQuery.Mobile.MVC package as part of our solution in 2 ways.
Using The Package Manger Console
Go to View Menu –> Open Package Manger Console
Run the following command : Install-Package jQuery.Mobile.MVC
In Solution Explorer
Right click on the solution explorer –> From popup menu choose “Manage Nuget Packages…”
It will pop up the “Manage Nuget Packages…” dialog –> choose online from left side options –> then in right side top of the window in “Search Online” textbox type “jquery mobile”.
From the options choose “jQuery.Mobile.MVC” –> click on install, It will popup a window to choose the projects in your solution, choose the required projects, if you have more than one project in solution .
It will install all the components as part of that package.
Once you install this NuGet package, it will install following components into solution.
ViewSwitcherController (~/Controllers/ViewSwitcherController.cs)
_ViewSwitcher.cshtml (~/Views/Shared/_ViewSwitcher.cshtml)
_Layout.Mobile.cshtml (~/Views/Shared/_Layout.Mobile.cshtml – jQuery Mobile based Layout)
ViewSwitcher partial view is added in _Layout.Mobile.cshtml, so that when u are in mobile page while browsing in mobile, you can switch to desktop page.
The highlighted UI is generated by _ViewSwitcher.cshtml partial view, this is the mobile page , if you click on “Desktop View” hyperlink, you will be redirected to desktop page.
Lets try to understand view switcher code and how it works, lets us understand _ViewSwitcher.cshtml,if we look at the code:
It will find out whether the request is from mobile browser & it should be a http get request,then if both conditions satisfies, it will start rendering the code inside it.
Now it will check whether the request is actually from mobile device are not, using “ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice” property.
If the request is from mobile device, it will render the hyperlink to switch to desktop view.
@: Displaying mobile view @Html.ActionLink(“Desktop view”, “SwitchView”, “ViewSwitcher”, new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = “external” })
This hyperlink will actually redirect the request SwitchView() action method with ViewSwitcher Controller with parameters “mobile = false” (because this link should redirect to desktop page, so mobile is false) and “returnUrl =Request.Url.PathAndQuery” (Request.Url.PathAndQuery – Gets the AbsolutePath and Query properties separated by a question mark (?))
When the request reaches SwitchView() action method with in ViewSwitcher Controller.
It will compare Request.Browser.IsMobileDevice (Gets a value indicating whether the browser is a recognized mobile device) with mobile parameter value, we are passing mobile parameter as false.
Request.Browser.IsMobileDevice is actually true because we are sending a request from mobile browser, mobile mobile parameter as false, so condition fails.
Now it set the overrides as actual mobile browser with desktop browser using SetOverriddenBrowser() method & returns to the passed URL desktop view.
When comparing the Request.Browser.IsMobileDevice against the mobile parameter value , if condition is true, then it will removes any overridden user agent for the current request using ClearOverriddenBrowser() method and returns to the passed URL actual view (if the request is from mobile browser it redirects to mobile view, else the request is from desktop browser it redirects to desktop view).
When checking “ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice” property is false then, it will render the hyperlink to switch to mobile view:
@: Displaying desktop view @Html.ActionLink(“Mobile view”, “SwitchView”, “ViewSwitcher”, new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = “external” })
This hyperlink also works in same way as explained above, but it will render link to switch to mobile view from a desktop view.
Note : ViewSwitcher component is actually using new Brower Overriding API, introduced with ASP,NET MVC 4. If you want to understand more about Brower Overriding API, read my article on Brower Overriding API here : http://theshravan.net/blog/browser-overriding-features-in-asp-net-mvc-4/
================================================================
ASP.NET MVC4 : Create a Mobile Application
In this post, I will show you three new functionalities brought by MVC4 for mobile websites.
One interesting feature of this new version of the ASP.NET MVC framework 4 is the new Mobile Application template. With this template you’ll be able to develop quickly a website especially for mobile and tablet.
1 – Create a full-mobile Website
In Visual Studio, Create a new MVC4 project and select the “Mobile Application” template.
Mobile Application Template - MVC4
I consider that you’ve already develop a classic MVC application. If true, you will not be surprised by the generated project. It’s almost the same as a classic MVC desktop website.
So what the difference?
In the “content” folder you will find another JavaScript library: jQuery Mobile. ASP.NET MVC4 Mobile Template is based on the famous JavaScript framework for mobile application. You can learn a lot if you visit the jQuery mobile website.
Models and Controller are similar to a classic MVC Application.
In the view, you just have to add some tag to tell how jQuery mobile needs to display the page.
If we take a look at this code (Menu of the website generated by MVC4), you will probably recognize the Razor syntax. Nothing change when you want to develop Mobile Application with MVC4. You just have to use special attribute in your HTML.
Here, we declare a classic HTML list….and jQuery Mobile will transform it into an accessible list for mobile devices user.
Navigation
@Html.ActionLink("About", "About", "Home")
@Html.ActionLink("Contact", "Contact", "Home")
.
http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
What is View Switcher?
- The mobile Application Template
- The View Switcher
- The Display mode by Browser type
{
@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" })
}
}
{
if (Request.Browser.IsMobileDevice == mobile)
HttpContext.ClearOverriddenBrowser();
else HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);
return Redirect(returnUrl);
}
{
ContextCondition = (context => context.Request.UserAgent.IndexOf ("Android", StringComparison.OrdinalIgnoreCase) >= 0)
});
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("WindowsPhone")
{
ContextCondition = (context => context.Request.UserAgent.IndexOf ("Windows Phone OS", StringComparison.OrdinalIgnoreCase) >= 0)
});.
If you want to change the user agent without buy every mobile on the market, you could use amazing extension like User Agent Switcher (For Firefox).