MORE Making a switchable Desktop and Mobile site with ASP.NET MVC 3

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.

<!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("scripts", required: false)
    </body>
</html>

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.

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
 
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
 
<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>

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s