Archive

Posts Tagged ‘phone emulator’

ASP.NET MVC 4, Browser-Specific Views

15/08/2012 1 comment

Introduction

In this post I am going to write about an interesting and powerful feature in ASP.NET MVC 4 , View Overriding or Browser- Specific Views. But, what does it mean?!  It’s a  lovely new feature that lets you to override views ,  layouts and partial views  globally or individually for mobile devices or  a specific  browser such as iPhone’s safari. MVC4 aims at mobiles and tables devices so it’s a good support  to develop a mobile version for  your website or even more such as a  particular version for iPhone or iPad.

Requirement

  1. Visual Studio Express 2010 SP1
  2. ASP.NET MVC 4 RC
  3. Windows 7 Phone Emulator
  4. Apple Safari Browser

Getting Start

Start by running Visual Studio  and select New Project from the Start page. In New Project window, choose ASP.NET MVC4 Web Application.

VS - New Project Window

New Project Window

Keep going by choosing Mobile Application in New ASP.NET MVC 4 Project  window then OK.

New ASP.NET MVC 4 Project

New ASP.NET MVC 4 Project

Visual Studio Creates the project and you are able to run it immediately.

Our Project

You can go around and have a look at other pages (About & Contact)  as well. It looks perfect, doesn’t it? Thanks to jQuery Mobile which is bringing an awesome mobile experience to the website.

As you can see, all tools and facilities have been prepared by MVC 4  to develop a mobile web application with a nice and familiar appearance.

Lets modify the first page (Views/Home/index.cshtml)  as following:

@{
    ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>Desktop</strong> computer</pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

Now, if you run the project again, the following screen shot will be what you can see

View on desktop

View On Desktop

View Overriding:

To provide a mobile-specific view,  you can copy a view file and add .Mobile to the file name. so copy Views\Home\Index.cshtml to Views\Home\Index.Mobile.cshtml.

Then, please modify Index.Mobile.cshtml file as following:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>Mobile</strong> device</pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

When you are running the project on your  desktop, there is on change but lets to check it on  Windows 7 Phone Emulator .

As you can see, the mobile version of our view (Index.Mobile.cshtml) has been rendered. That means MVC 4 is able to detect the client agent automatically.

Browser-specific View

Are you interested in developing defferent specific views for some specific! clients such as iPhone or iPad!? Not a big deal. Copy the view file and add .iphone or .ipad to the file name. So copy Views\Home\Index.cshtml to Views\Home\Index.iphone.cshtml and do the same for Index.ipad.cshtml. Modify the files to have a proper content as following:

For iPhone in Index.iphone.cshtml file:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>iPhone</strong></></pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

For iPad in Index.ipad.cshtml:

@{
ViewBag.Title = "Home Page";
 }</pre>
<h2>Welcome,</h2>
<pre>
You are visiting our website on your <strong>iPad</strong></pre>
<ul data-role="listview" data-inset="true">
	<li data-role="list-divider">Navigation</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<pre>

In the next step you should modify Global.asax file, so add a new private method and name it registerDisplayMode. Here’s the complete method:

private void registerDisplayMode(string agent, int index = 0)
 {
      DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode(agent)
      {
             ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                                   (agent, StringComparison.OrdinalIgnoreCase) >= 0)
      });
 }

Then call this method in Application_Start method as following:

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);

            registerDisplayMode("iPhone", 0);
            registerDisplayMode("iPad", 1);
        }

Also, you have to add following line to the using section of Global.asax

using System.Web.WebPages;

Now, you have registered your new display mode for two individual browser agents (iPhone & iPad) so those will be matched against each incoming request. If the request come form an iPhone or iPad (user agent contains the string “iPhone” or “iPad”), MVC will look for views whose name contains the “iPhone” or “iPad” suffix. You well be able to test it in Apple Safari by changing its agent to iPhone or iPad (more details).

iphone view

iPhone View

iPad View

iPad View

Mvc4 supports you  to switch between different views base on the user agent just with few lines codding and  jQuery Mobile provides a familiar mobile experience  on your website for users.

To be continued …

Source code is available here.

Categories: MVC 4 Tags: