Recently I was catching up on some reading and discovered Scott Hanselman’s Making a switchable Desktop and Mobile site with ASP.NET MVC 4 and jQuery Mobile post. His post reminded me that this functionality is also available for ASP.NET MVC 3 by using the MobileViewEngines NuGet package that Scott and I have worked on over the past several years.
In this example, we are going to create a very simple ASP.NET MVC 3 Web Application that allows Mobile Device users to switch from a Mobile view to a Desktop view. The source for this MobileViewEngine NuGet project is available on GitHub.
The first step is to launch Visual Studio and create a new ASP.NET MVC 3 Web Application by going to File | New | Project | ASP.NET MVC3 Application. Next, using NuGet, install the MobileViewEngines package. You can do this by either right clicking on References and selecting Manage NuGet Packages or by using the Package Manager Console and typing:
Next, we need to add mobile-friendly Index and _Layout views.
First, we need to create a new view in the Shared directory for our mobile-friendly layout. Below is the code from my sample _Layout.Mobile.cshtml.
[code lang=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
@if (IsSectionDefined("Header")) {
@RenderSection("Header")
} else {
<h1>@ViewBag.Title</h1>
@Html.Partial("_LogOnPartial")
}
</div>
<div data-role="content">
@RenderBody()
</div>
<div data-role="footer">
@Html.Partial("ViewSwitcher")
</div>
</div>
@RenderSection(&quot;scripts&quot;, required: false)
&lt;/body&gt;
</html>
[/code]
Next, we need to create a new view in the Home directory for our mobile-friendly Index view. Below is the code from my sample Index.Mobile.cshtml.
[code lang=”html”]
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
<h2>@ViewBag.Message</h2>
To learn more about ASP.NET MVC visit &lt;a href=&quot;http://asp.net/mvc" title=&quot;ASP.NET MVC Website&quot;&gt;http://asp.net/mvc</a>.
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
[/code]
Now that you have the basic pieces in place, you can run the project in your favorite Mobile Web Browser, I like Electric Mobile Studio from Electric Plum(thanks Shaun!), and you will see the Mobile version of the views.
If you select the ‘Desktop View’ link on the page, it switches your views to the Desktop friendly views.
At this point, the basics of Mobile View Switching are setup and you are free to continue by adding jQuery Mobile or your mobile framework of choice.
Leave a Reply