What is View Switcher?

November 12, 2011  /  1 response

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
  1. Go to View Menu => Open Package Manger Console
  2. Run the following command: Install-Package jQuery.Mobile.MVC

• In Solution Explorer
  1. Right click on the solution explorer => From popup menu choose “Manage Nuget Packages…”
  2. 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”.
  3. 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 .
  4. 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 “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://65.1.162.244/blog/browser-overriding-features-in-asp-net-mvc-4/