Click here to Skip to main content
11,931,584 members (51,879 online)
Click here to Skip to main content
Add your own
alternative version


26 bookmarked

Developing Mobile specific Views using jQuery Mobile in ASP.NET MVC 4 - Part 2

, 6 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Developing Mobile specific Views using jQuery Mobile in ASP.NET MVC 4 - Part 2


This article is the second and final part of article series “Using jQuery Mobile for Mobile View in ASP.NET MVC 4” after Part 1. This article series is all about developing a web application having mobile specific views along with desktop views in ASP.NET MVC 4. The UI design targeting a mobile is very different than targeting desktop screens. We are using jQuery Mobile to develop mobile Views in demo application.


This article series has two parts. For Part 1, click here. In Part 2, we will include the following topics:

  • Installing jQuery Mobile
  • Creating Bundles for Mobile Views
  • Designing Layout for Mobile Views
  • Designing Products Page for Mobile
  • Designing Category wise Products page for Mobile
  • References

In the first part of this article, we stated with an internet template for ASP.NET MVC 4 in Visual Studio 2012 and created a working application. It has displays products information and each page has two kinds of views for Desktop and Mobile. But we have not done anything to make mobile views different than desktop views. Both are having the same look and feel so far other than added text "Mobile View".

In this article using jQuery Mobile, we will modify mobile views for better look and feel on mobile devices. For this article, the application which we completed in Part 1 is base, so please download that solution from Part 1 and continue by installing jQuery Mobile as per the next section.

Installing jQuery Mobile

To develop the mobile specific view, we will use jQuery Mobile. It is a framework for developing responsive website or web applications for all kinds of smartphones and tablets and desktops devices.

  1. Click on TOOLS tab and go to “Library Package Manager” > “Manage NuGet Packages for Solution” option.

    NuGet Package Manager UI

  2. Search for jQuery mobile as we searched for in the first part of this article and click on Install as shown in the below screenshots button.

    Searching for JQuery Mobile

  3. As you will click on Install button, you need to confirm the popup for projects to which you would like to install by clicking OK as we done for It will install jQuery Mobile in your project and you will be able to see some new CSS added to Content folder and new Scripts file added to Scripts folder as shown in the below screenshots:

    Content Folder

    Script Folder:

    Script Folder

    Now jQuery Mobile is installed in our solution.

    The alternate way to install jQuery Mobile is using Nuget Package manager console as described in Part 1 for, but this time you need to use the following command:

    Install-Package jQuery.Mobile                 

    You would get as shown in below screenshot:

    Using NuGet Console

Creating Bundles for Mobile Views

Go to App_Start folder and open BundleConfig.cs, and in RegisterBundles method, add the following code:

bundles.Add(new ScriptBundle("~/bundles/Mobilejs").Include(

bundles.Add(new StyleBundle("~/Content/Mobilecss").Include(

Here, we are creating two bundles: one having JavaScripts and the second one having all CSS to be used in mobile specific views. We will refer to those bundles in Mobile Specific layout page.

Designing Layout for Mobile Views

  1. Open Views > Shared folder. Copy existing _Layout.cshtml and paste at Shared folder. Now rename “Copy of _Layout.cshtml ” to “_Layout.Mobile.cshtml”. Write the following code to head tag:
    <meta charset="utf-8" />
        <title>@ViewBag.Title &ndash; Mobile Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />

    Here, we are referring to newly created bundles which we created in the above section.

  2. Inside body tag, delete all existing code and write the following code:
      <div data-role="page" data-theme="a">
        <div data-role="header" data-position="fixed" data-theme="b">
            <div data-role="navbar" data-theme="a" data-iconpos="top">
                    <li><a href="@Url.Action("Index", "Home")" data-icon="home">Home</a></li>
                    <li><a href="@Url.Action("AllProducts", "Product")" data-icon="check">Product</a></li>                    
            @RenderSection("featured", false)

    There are many amazing things with the above code. Focus on attributes like: data-role, data-position, data-theme, etc. and their values. They are attributes defined in jQuery mobile to provide shape and behavior to a div for specific use. The names and purposes are much correlated, it makes those self-explanatory. You can learn more about such attributes from jQuery Mobile demos here.

    Just by having this much code, the Header of mobile views would be mobile friendly. You can run the application and check how the header of mobile views look like.

Designing Products Page for Mobile

Delete the existing code in AllProducts.Mobile.cshtml and write the following code:

@model IEnumerable<ShopOnline.Models.Product>
    ViewBag.Title = "All Products";

<div class="ui-grid-a">
    <div class="ui-block-a">
        <hgroup class="title">
    <div class="ui-block-b">
        <a class="ui-btn ui-btn" style="color:blue" data-role="button" 
        href="@Url.Action("CategoryWiseProducts", "Product")">Category wise Products</a>

@* Making collapsible set of all products using data-role*@
<div data-role="collapsible-set" data-inset="true">
    @foreach (var item in Model)
        <div data-role="collapsible">
            <ul data-role="listview" data-theme="a" data-divider-theme="a" >
                <li style="white-space:normal">

Here, first we are creating a Grid having title of page and a button to navigate to “CategoryWiseProducts.Mobile.cshtml” page. After that, we are creating a collapsible set of products detail. Here <li style="white-space:normal"> is very critical code to make the text wrapable otherwise the detail text would not wrap as per the width of bowser screen. If you want to explore more about any attributes or look into possibilities (if you want to design in some other way), please visit jQuery Mobile - Demos and look into controls available there.

Designing Category wise Products Page for Mobile

Delete the existing code in CategoryWiseProducts.Mobile.cshtml and write the following code:

@model ShopOnline.ViewModels.ProductCategoryVM
    ViewBag.Title = "Category wise Products";
    SelectList cat = new SelectList(Model.AllCategories, "CategoryId", "CategoryName");  

<h2>Category wise Products</h2>
<div class="ui-field-contain">
    <select name="select-custom-1" id="categorySelect" data-native-menu="false">
        <option value="0">Select a Category</option>
        @foreach (var item in Model.AllCategories)
            <option value="@item.CategoryId">@item.CategoryName</option>
<div id="tblProductData"></div>

    $("#categorySelect").change(function () {
        var selectedCategory = $(this).val().trim(); 
        var allProducts = @Html.Raw(Json.Encode(Model.AllProducts));
            var frontheaders = '<div data-role="collapsible-set" data-inset="true">';           
            var backheaders = '</div>';           
            var elements = '';
            for (var i = 0; i < allProducts.length; i++) {
                if(allProducts[i].ProductCategory.CategoryId == selectedCategory)
                    elements = elements + '<div data-role="collapsible"> <h3>' + 
                    allProducts[i].ProductName + '</h3> <ul data-role="listview" 
                    data-theme="a" data-divider-theme="a"> <li style="white-space:normal"> 
                    <h4>Detail:</h4> <div>' + 
                    allProducts[i].ProductDescription + '</div> </li> </ul> </div>';                
            if (elements != '')
            {   var data = frontheaders + elements + backheaders

Here, first we are creating a select box having all categories. On selection of a category, we are adding products data in tblProductData div under selected category using JavaScript.

Now we are done with code modification. Run the application and using User Agent Switcher, check for mobile views. You must be able to see the views as shown below:

Mobile Specific "All Products" Page:

All Products Mobile View

Mobile Specific "Category wise Products" Page:

CategoryWiseProducts Mobile View


In this article series, we learned why we need separate views for mobile and how we can use and jQuery Mobile along with in ASP.NET MVC 4. Hope you have enjoyed the code walkthrough and little journey towards the new world of mobile web application development. Your queries and comments are most welcome in this respect. Thanks.


  1. jQuery Mobile Demos
  2. Mobile Apps & Sites with ASP.NET


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Snesh Prajapati
Software Developer
India India
I am a Software Developer working on Microsoft technologies (primarily on web applications). My interest is exploring and sharing the awesomeness of emerging technologies.

You may also be interested in...

Comments and Discussions

Question51 Degrees Pin
Pascualito14-Aug-15 6:06
memberPascualito14-Aug-15 6:06 
AnswerRe: 51 Degrees Pin
Snesh Prajapati14-Aug-15 8:05
mvpSnesh Prajapati14-Aug-15 8:05 
QuestionThanks heap Pin
Member 9453777-Jan-15 17:03
memberMember 9453777-Jan-15 17:03 
AnswerRe: Thanks heap Pin
Snesh Prajapati7-Jan-15 20:01
professionalSnesh Prajapati7-Jan-15 20:01 
GeneralMy vote of 1 Pin
Andres Fabrizio27-May-14 23:07
memberAndres Fabrizio27-May-14 23:07 
AnswerRe: My vote of 1 Pin
Snesh Prajapati28-May-14 0:10
professionalSnesh Prajapati28-May-14 0:10 
GeneralRe: My vote of 1 Pin
thatraja6-Aug-14 4:40
protectorthatraja6-Aug-14 4:40 
GeneralRe: My vote of 1 Pin
Pascualito14-Aug-15 6:09
memberPascualito14-Aug-15 6:09 
GeneralMy vote of 5 Pin
albertbear20-Mar-14 18:59
memberalbertbear20-Mar-14 18:59 
AnswerRe: My vote of 5 Pin
Snesh Prajapati20-Mar-14 19:07
professionalSnesh Prajapati20-Mar-14 19:07 
QuestionMY VOte of 5 Pin
Mohsin Azam7-Mar-14 6:27
memberMohsin Azam7-Mar-14 6:27 
AnswerRe: MY VOte of 5 Pin
Snesh Prajapati7-Mar-14 7:38
professionalSnesh Prajapati7-Mar-14 7:38 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun6-Mar-14 22:32
memberHumayun Kabir Mamun6-Mar-14 22:32 
AnswerRe: My vote of 5 Pin
Snesh Prajapati6-Mar-14 23:15
professionalSnesh Prajapati6-Mar-14 23:15 
Thank you very much for encouragement.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 6 Mar 2014
Article Copyright 2014 by Snesh Prajapati
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid