Introduction

This article is about developing a web application having Mobile specific Views along with Desktop Views using ASP.NET MVC. The UI design targeting a mobile is very different than targeting desktop screens. We are using jQuery Mobile to develop mobile Views.

Why We Need Separate Mobile View

There are two most prominent reasons to design the Mobile web page in a different way:

You have very less space to display the content on mobiles screens in comparison to desktops/laptops screens.

The touch is less precise than that of mouse. Using mouse, you can click on small text links but with thumb or fingers it is difficult and sometimes impossible.

There are more things to consider while targeting mobile devices for a web application as described at this link. Nowadays, we are having concept of designing for Multiple Form Factors too as discussed in this blog post.

But for the simplicity of demo in this article, we will not go in such detail. For this article, we will consider only two categories: typical desktop page where user has wider display with typical mouse and keyboard, Mobile page for mobile/tablets where users have smaller display with touch enabled screen to interact with web page.

Overview of Demo Application

In demo application, we will create a web application to display the available products. The default page of application will display all products available and we have another page to filter the products based on selection of the category. The application will have two versions of Views: Desktop and Mobile View. For the sake of simplicity, we will use hardcoded data to display on web pages. For mobile specific views, we will use jQuery Mobile in second part and in this part, we will create mobile views without jQuery Mobile.

As we are having two pages with almost the same information, we have to render particular View based on the environment/browser which is sending the request. If the request is coming from a mobile browser, the mobile specific view will be rendered, otherwise application would render normal view for desktop browser. To detect the environment/browser from where request is coming at server, we will use 51Degrees.mobi to detect the user agent of requesting browser. We will discuss more about this in a later section.

Finally to test the application specially web pages for mobile, we need emulator for mobile or we can use browser which can behave like a browser on mobile. For this purpose, I am using Safari browser User Agent Switcher test both kind of Views. We will discuss more about it in the last section of this article called "Running the Application".

Starting with Internet Template

Let us create a sample application by selecting ASP.NET MVC4 Web Application template and give it project name as ShopOnline and click "OK".

Select project template as Internet Application. Visual Studio 2012 adds a ShopOnline project in the solution as shown below in the screenshot:

Installing 51Degrees.mobi

The user-agent header of incoming http request identifies the application requesting the information from the server, typically a browser. This string used for identification is called the user-agent string and contains tokens that provide specific details about the program making the request. To know more about user agent, please visit here.
There are two most widely used options to detect the browser:

Using 51Degrees.mobi. Using this library device data, accurate screen sizes, input methods, plus manufacturer and model information are all available to application.

We will use 51Degrees.mobi here. There are two ways to install 51Degrees.mobi by using Nuget Packages Console or using Nuget Packages tool. Here we will install it by using NuGet packages tool. NuGet is an open source package manager tool which is inbuilt for Visual Studio 2010 and 2012. It downloads packages and required dependencies. There are following steps to download the 51Degrees.mobi:

Click on TOOLS in Menu bar, go to "Library Package Manager" and the choose "Manage NuGet Packages for Solution" option as shown in the below screenshot.

From left hand side menu, select Online > All. Now click in the search text box at right hand side (top), and write “51”, in search the 51.Degrees.mobi would appear as shown below. Click on Install button appeared beside 51.Degrees.mobi.

It will give you a pop up for confirmation with project name as shown below, just click ok.

Hope you will be able to see “51Degrees.mobi.config” file in your project as shown below:

By default, it will create a “mobile” folder in application. We should delete that unnecessary folder and we will be having our mobile view in Views folder only.

Open 51Degrees.mobi.config file and comment the following lines of code (as it is redirects the request from Mobiles to “~/mobile/default.aspx” which we do not want here).

Using Nuget Package Manager Console

An alternate way to install 51Degrees.mobi is using “Nuget Package Manager Console”. You need to go to Top menu “TOOLS > Library Package Manager > Package Manager Console” as shown below:

It will open a console window. Now you need to run the flowing command: Install-Package 51Degrees.mobi as shown below”:

It will do the same thing that you achieved from step 1 above. All things as shown in Step 2 would be added and then you need to follow steps 3 and 4 to remove unnecessary folder and setting. If you want to learn more about how 51Degrees.mobi works, please have a visit here and look into section "How does it work?"

For the sake of simplicity, we are using hardcoded data in Repository for demo purposes. In real time application, Repository is supposed to do CRUD operations by communication persistent data source like SQL Server, XML or whatever. For this demo, now our model and repository are ready for use.

Now we will create a ViewModel as we need to pass both Category and Product model to "Category wise Products" page. To know more about ViewModel, Please visit "ViewModel" section of this article. Now add a “ViewModels” folder in project by right clicking at project > Add > New Folder as shown below:

Inside ViewModels, add a class called “ProductCategoryVM” and add the following code in it:

Creating Views

We will create two views for each action method in Controller: One specific for desktop and second for Mobile. As of now in mobile specific view, we will just write the text saying that it is mobile specific. We will install jQuery Mobile, design and complete mobile specific view in Part 2 of this article.

Follow the below steps to add Views:

First, build the project (otherwise model class would not appear in listbox while creating Views). Now on ProductController, right click on “AllProducts” action method and from menu, select “Add View”. You will get a popup as below fill the details shown here and click OK.

It will add AllProducts.cshtml in Views > Product folder.

In AllProducts.cshtml, delete header and below Action link for “Create New” as we would not use it:

<h2>All Products</h2><p>@Html.ActionLink("Create New", "Create") </p>

Add a new the table (in place of deleted “Create New” action link) as shown below:

Now again go to ProductController, right click on “CategoryWiseProducts” action method and from menu select “Add View”. This time we will get a popup as below fill the details shown here (we will go for empty View so uncheck the checkbox for "Create a strongly-typed view") and click OK.

Write the following code in the new View added CategoryWiseProducts.cshtml.

Now in Views > Product folder, copy both AllProducts.cshtml and CategoryWiseProducts.cshtml, and paste by right clicking on Product folder itself. You will get “Copy of AllProducts.cshtml” and “Copy of CategoryWiseProducts.cshtml”, rename those as “AllProducts.Mobile.cshtml” and “CategoryWiseProducts.Mobile.cshtml” respectively.

It is just to identify that if the request is coming from mobile device, the .Mobile.cshtml View would be rendering. We will design and optimize those views for mobile screen in the next part of this article.

Running the Application

The simplest way to test mobile views is using Safari browser because it is inbuilt user agent switcher. Follow this link to know how to activate and use it. For this application, I have used Safari and taken screen shot for that only.

If you are using Chrome, you can use extension User-Agent Switcher for Chrome. There are many resources on how to use it. If you do not want to install anything new, you can even change user agent without any addition tool too as described here. Further, you can use emulator or other techniques also as described here.

Using Safari browser inbuilt user agent switcher, you can see the output for both kinds of Views for "Category wise Products" we developed so far as shown in the below screenshots:

Desktop View:

Now change the user agent as following:

We can see Mobile View:

Conclusion

In this article, we demonstrated the use of 51Degrees.mobi and how it automatically detects the incoming request and renders appropriate view. In Part 2, we will take the application developed in this article as base and first we install jQuery Mobile and move ahead with developing Mobile specific screens. Your queries and comments are most welcome in this respect. Thanks.

I'm working on mobile app using jquery-mobile ... Onclick of footer ,bottom right corner of page should flip and below there should be another page displaying... Could anyone help me on this.. Thx a lot in advance