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.
- The mobile Application Template
- The View Switcher
- The Display mode by Browser type
Smartphone and tablet are able to read websites not optimized for tiny screen but if a user can jump automatically on an optimized version of the website, it’s better for everyone!
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")
.
The mobile version of ... Coding-in.net !
This new template is perfect to start learning ASP.NET MVC4 mobile functionnalities and JQuery Mobile. If you already worked with MVC 3, you will see a big different between generated websites ! The MVC 4 website is simple, clean and uses jQuery. It’s a very good point to start learning !
2 – Classic and mobile Website
I will not describe all the new mobile features in MVC 4 in this post but there’s two another interesting features that I want to talk about and wich can interest some of you. It’s the “Display mode by Browser type” and the “View Switcher”.
“View Switcher”
A lot of mobile website have a special link to switch between mobile and classic view. ASP.NET MVC4 allows you to do this in … 1 click !
This browser overriding ability allows user with mobile device to switch onto the classic version and vice versa.
To add this functionnality to your ASP.NET MVC4 website, just open the Package Manager Console (Visual Studio > Tools > Library Package Manager) and paste this line :
Install-Package jQuery.Mobile.MVC
NuGet is awesome isn’t it ? Your solution is updated and you now have a beautiful view switcher in your website !
If we take a look at the added code, you should have a new partial View (in the Shared folder) called _ViewSwitcher.cshtml.
@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
@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" })
}
}
In this code we can see the new GetOverridenBrowser method which returns the request’s user agent override value, or the actual user agent string if no override has been specified.
The view call the SwitchView action in the ViewSwitcher controller.
public RedirectResult SwitchView(bool mobile, string returnUrl)
{
if (Request.Browser.IsMobileDevice == mobile)
HttpContext.ClearOverriddenBrowser();
else HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);
return Redirect(returnUrl);
}
Here again we could take a look at some new method wich allows overriding brower agent value.
“Display mode by Browser type”
Okay, that is cool. You are now able to develop a full mobile website … But how to switch automatically between classic and mobile website depending on the browser type ? Thanks to MVC 4 , everything can be done easily !
For example, if you already developped a classic website, you can easily develop the Mobile version with a new view called by the same name and with the extension .mobile.cshtml.
If you have a Home.cshtml, create a Home.mobile.cshtml. If a user tries to acces to your website, the mobile version will be displayed.
Better, you can override this feature and develop particular pages for a specific device. Thanks to the User Agent name available in the page request, you can, for example, target an iPhone, Android or WP7 user.
In the Global.asax file, in the Application_Start method, just copy the code below.
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Android")
{
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)
});.
Here, we are saying to MVC 4 that we will add particular views (With .Android.cshtml and .WindowsPhone.cshtml) to the solution. If the user Agent is declared as an Android or Windows Phone browser, MVC4 will try to find the good view for this device. Simple and efficient !
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).
Okay that’s all for today ! I hope you will enjoy as me these new functionnalities.
Stay tuned of Coding-in.net, I will publish some post about MVC4 !