Post
Ask Question

Multi-Platform UI Support Using 51Degrees.mobi In ASP.NET MVC 5

Introduction

Today, I will show you how to develop an ASP.NET MVC 5 web application that has multi-platform UI support (like Mobile View and Desktop View).


Mobile View v/s Desktop View

The User Interface for building a mobile View is very different than building desktop Views. So, ASP.NET MVC can help us to fulfill it using 51Degrees.mobi library package.

Description

The start page of this application will display all Cricket player's achievements and we have another page to filter the achievements based on selection of the player name. I have two types of UI Views: Desktop View and Mobile View. We use static data to display on web pages for mobile specific Views.

If we have two pages with the same information, we have to retrieve a particular View based on the platform and browser . If the requests come from a smart phone browser, the mobile View will come, otherwise the application will come in the normal View for desktop/laptop browser.

To detect the platform and browser from where the request is coming at server, I used 51Degrees.mobi to detect the user details. Then, to run the application for mobile View, we need emulator for mobile or we can use browser which can behave like a browser on mobile. For this purpose, I am using Mozilla Firefox browser to test both kinds of Views.

Process to develop this application using ASP.NET MVC 5.

Step 1

Create a sample application by selecting ASP.NET MVC  web application template and give project a name, such as SatyajQueryMobileMvc, and click "OK".

Select project template as internet application. Visual Studio 2013 adds SatyajQueryMobileMvc project in the solution, as shown in the screenshot.


Step 2

Install 51Degrees.mobi 

51Degrees.mobi is a library device package. By using this, we will get details of library device data, accurate screen sizes, model information which are all available to the application.

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.

Type 51Degrees.mobi in search textbox and the "Install" option will show up, download and install it.




Now, you will be able to see “51Degrees.config” file in your project.


It will create a “Mobile” folder in application. I will delete that unnecessary folder and i have our mobile view in Views folder only.


Also, we have to comment out some code in 51Degrees.config as it will redirect the request from mobiles to “~/mobile/default.aspx”.

Commented code ref by me - 

  1. <redirect devicesFile="" timeout="20" firstRequestOnly="true"  
  2.       originalUrlAsQueryString="false" mobileHomePageUrl="~/Mobile/Default.aspx"  
  3.       mobilePagesRegex="/(Mobile|Tablet)/">  
  4.       <locations>  
  5.         <clear />  
  6.         <location name="noredirect" url="" matchExpression="" enabled="true">  
  7.           <add property="Url" matchExpression="[&|\?]noredirect" enabled="true" />  
  8.         </location>  
  9.         <location name="Mobile" url="~/Mobile/Default.aspx" matchExpression=""  
  10.           enabled="true">  
  11.           <add property="IsMobile" matchExpression="True" enabled="true" />  
  12.           <add property="IsTablet" matchExpression="False" enabled="true" />  
  13.         </location>  
  14.         <location name="Tablet" url="~/Tablet/Default.aspx" matchExpression=""  
  15.           enabled="true">  
  16.           <add property="IsTablet" matchExpression="True" enabled="true" />  
  17.         </location>  
  18.       </locations>  
  19.     </redirect>  

It can be done using a second way also.

Go to top menu “TOOLS > Library Package Manager > Package Manager Console”.


It will open a console window. Now, you need to run the following command:

Install-Package 51Degrees.mobi
 

Please visit site here to know How it works. 

http://51degrees.codeplex.com/
 

Step 3

WORKING WITH MODELS.

Create a Model Class file named “Player.cs”;

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace SatyajQueryMobileMvc.Models  
  7. {  
  8.     public class Player  
  9.     {  
  10.         public int PlayerId { get; set; }  
  11.         public string PlayerName { get; set; }  
  12.     }  
  13. }  

Code Description

Two entities PlayerId and PlayerName are declared publicly to access in other class files. Then, we created a Model Class file named “Achieve.cs”.

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace SatyajQueryMobileMvc.Models  
  7. {  
  8.     public class Achieve  
  9.     {  
  10.         public int AchieveId { get; set; }  
  11.         public string AchieveName { get; set; }  
  12.         public string AchieveDescription { get; set; }  
  13.         public Player PlayerAchieve { get; set; }  
  14.     }  
  15. }  

Code Description

The entities AchieveId, AchieveName, AchieveDescription, PlayerAchieve are declared here publicly  to access the data in other class files. Then we created a Model Class file named “DataRepository.cs”.

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace SatyajQueryMobileMvc.Models  
  7. {  
  8.     public class DataRepository  
  9.     {  
  10.         public List<Achieve> GetAchieves()  
  11.         {  
  12.             List<Achieve> Achieves = new List<Achieve>{   
  13.                     new Achieve () { AchieveId = 1, AchieveName = "MS DHONI'S ICC ICC WORLD CUP", AchieveDescription = "MS DHONI has ICC ICC WORLD CUP.",  
  14.                     PlayerAchieve =  new Player () { PlayerId = 1, PlayerName = "MS DHONI"}},  
  15.                       
  16.                     new Achieve () { AchieveId = 2, AchieveName = "MS DHONI'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "MS DHONI has ICC CHAMPIONS TROPHY.",  
  17.                     PlayerAchieve =  new Player () { PlayerId = 1, PlayerName = "MS DHONI"}},  
  18.   
  19.                     new Achieve () {AchieveId = 3, AchieveName = "SOURAV GANGULY'S ICC ICC WORLD CUP", AchieveDescription = "SOURAV GANGULY has no ICC WORLD CUP.",  
  20.                     PlayerAchieve = new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"}},  
  21.                    
  22.                     new Achieve () {AchieveId = 4, AchieveName = "SOURAV GANGULY'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "SOURAV GANGULY has ICC CHAMPIONS TROPHY.",  
  23.                     PlayerAchieve = new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"}},  
  24.   
  25.                     new Achieve () {AchieveId = 5, AchieveName = "MOHAMMAD AZHARUDDIN'S ICC ICC WORLD CUP", AchieveDescription = "MOHAMMAD AZHARUDDIN has no ICC WORLD CUP.",  
  26.                     PlayerAchieve = new Player () {PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"}},  
  27.   
  28.                     new Achieve () {AchieveId = 6, AchieveName = "MOHAMMAD AZHARUDDIN'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "MOHAMMAD AZHARUDDIN has no ICC CHAMPIONS TROPHY.",  
  29.                     PlayerAchieve = new Player () {PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"}},  
  30.   
  31.                      new Achieve () {AchieveId = 7, AchieveName = "KAPIL DEV'S ICC ICC WORLD CUP", AchieveDescription = "KAPIL DEV has ICC WORLD CUP.",  
  32.                     PlayerAchieve = new Player () {PlayerId = 4, PlayerName = "KAPIL DEV"}},  
  33.   
  34.                     new Achieve () {AchieveId = 8, AchieveName = "KAPIL DEV'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "KAPIL DEV has ICC CHAMPIONS TROPHY.",  
  35.                     PlayerAchieve = new Player () {PlayerId = 4, PlayerName = "KAPIL DEV"}}  
  36.            };  
  37.   
  38.             return Achieves;  
  39.         }  
  40.   
  41.   
  42.         public List<Player> GetPlayers()  
  43.         {  
  44.             return new List<Player> {  
  45.             new Player () { PlayerId = 1, PlayerName = "MS DHONI"},  
  46.             new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"},  
  47.              new Player () { PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"},  
  48.             new Player () { PlayerId = 4, PlayerName = "KAPIL DEV"}  
  49.             };  
  50.         }  
  51.     }  
  52. }  

Code Description

In DataRepository.cs, we have used Player.cs and Achieve.cs class references and their entities to insert data successfully. Use Player class as list generic class to add some records  to filter data by using the entities defined in this class. 

  1. public List<Player> GetPlayers()  
  2.         {  
  3.             return new List<Player> {  
  4.             new Player () { PlayerId = 1, PlayerName = "MS DHONI"},  
  5.             new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"},  
  6.              new Player () { PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"},  
  7.             new Player () { PlayerId = 4, PlayerName = "KAPIL DEV"}  
  8.             };  
  9.         }   

Here, GetPlayers() is the user defined function used to deliver this record to Views for filtering data as per selection of these records.

  1. public List<Player> GetPlayers()   

Here, Achieve.cs class files used their entities to put some records details as per selection of value of entities defined in Player.cs class file. 

  1. public List<Achieve> GetAchieves()  
  2.         {  
  3.             List<Achieve> Achieves = new List<Achieve>{   
  4.                     new Achieve () { AchieveId = 1, AchieveName = "MS DHONI'S ICC ICC WORLD CUP", AchieveDescription = "MS DHONI has ICC ICC WORLD CUP.",  
  5.                     PlayerAchieve =  new Player () { PlayerId = 1, PlayerName = "MS DHONI"}},  
  6.                       
  7.                     new Achieve () { AchieveId = 2, AchieveName = "MS DHONI'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "MS DHONI has ICC CHAMPIONS TROPHY.",  
  8.                     PlayerAchieve =  new Player () { PlayerId = 1, PlayerName = "MS DHONI"}},  
  9.   
  10.                     new Achieve () {AchieveId = 3, AchieveName = "SOURAV GANGULY'S ICC ICC WORLD CUP", AchieveDescription = "SOURAV GANGULY has no ICC WORLD CUP.",  
  11.                     PlayerAchieve = new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"}},  
  12.                    
  13.                     new Achieve () {AchieveId = 4, AchieveName = "SOURAV GANGULY'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "SOURAV GANGULY has ICC CHAMPIONS TROPHY.",  
  14.                     PlayerAchieve = new Player () {PlayerId = 2, PlayerName = "SOURAV GANGULY"}},  
  15.   
  16.                     new Achieve () {AchieveId = 5, AchieveName = "MOHAMMAD AZHARUDDIN'S ICC ICC WORLD CUP", AchieveDescription = "MOHAMMAD AZHARUDDIN has no ICC WORLD CUP.",  
  17.                     PlayerAchieve = new Player () {PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"}},  
  18.   
  19.                     new Achieve () {AchieveId = 6, AchieveName = "MOHAMMAD AZHARUDDIN'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "MOHAMMAD AZHARUDDIN has no ICC CHAMPIONS TROPHY.",  
  20.                     PlayerAchieve = new Player () {PlayerId = 3, PlayerName = "MOHAMMAD AZHARUDDIN"}},  
  21.   
  22.                      new Achieve () {AchieveId = 7, AchieveName = "KAPIL DEV'S ICC ICC WORLD CUP", AchieveDescription = "KAPIL DEV has ICC WORLD CUP.",  
  23.                     PlayerAchieve = new Player () {PlayerId = 4, PlayerName = "KAPIL DEV"}},  
  24.   
  25.                     new Achieve () {AchieveId = 8, AchieveName = "KAPIL DEV'S ICC ICC CHAMPIONS TROPHY", AchieveDescription = "KAPIL DEV has ICC CHAMPIONS TROPHY.",  
  26.                     PlayerAchieve = new Player () {PlayerId = 4, PlayerName = "KAPIL DEV"}}  
  27.            };  
  28.   
  29.             return Achieves;  
  30.         }   

In this class, the Player class reference is used for accurate filtering of data.

  1. List<Achieve> Achieves = new List<Achieve>{   
  2.                     new Achieve () { AchieveId = 1, AchieveName = "MS DHONI'S ICC ICC WORLD CUP", AchieveDescription = "MS DHONI has ICC ICC WORLD CUP.",  
  3.                     PlayerAchieve =  new Player () { PlayerId = 1, PlayerName = "MS DHONI"}}   

Here, MS DHONI is a Player in Player.cs and is shown in the dropdown list. The records will be shown as defined in Achieve.cs.

  1. AchieveName = "MS DHONI'S ICC ICC WORLD CUP", AchieveDescription = "MS DHONI has ICC ICC WORLD CUP." ---> PlayerName = "MS   

Here, GetAchieves is the user defined function in Achieve.cs class file for showing details of records as per selection of values in GetPlayers user defined function in Player.cs class file.

Step 4

Working with "PlayerModels" folder.

Create a new folder named “PlayerModels”.


Then, create class file named “PlayerAchieve.cs”.

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using SatyajQueryMobileMvc.Models;  
  6.   
  7. namespace SatyajQueryMobileMvc.PlayerModels  
  8. {  
  9.     public class PlayerAchieve  
  10.     {  
  11.         public int SelectedPlayerId = -1;  
  12.         public List<Player> AllPlayers { get; set; }  
  13.         public List<Achieve> AllAchieves { get; set; }  
  14.     }  
  15. }  

Code Description

Here, I am using two namespaces to access Model class files, which are Player, Achieve and DataRepository classes. 

  1. using System.Web;  
  2.   
  3. using SatyajQueryMobileMvc.Models;   

Here are the generic list classes with properties for future references in Dropdown list and details list in Views.

  1. public int SelectedPlayerId = -1;   

Step 5

Working with Controllers. 

Create a Controller class file named “AchieveController.cs”;

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using SatyajQueryMobileMvc.Models;  
  7. using SatyajQueryMobileMvc.PlayerModels;  
  8.   
  9. namespace SatyajQueryMobileMvc.Controllers  
  10. {  
  11.     public class AchieveController : Controller  
  12.     {  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.         DataRepository _repository = new DataRepository();  
  19.   
  20.         public ActionResult AllAchieves()  
  21.         {  
  22.             List<Achieve> achieveModel = new List<Achieve>();  
  23.             achieveModel = _repository.GetAchieves();  
  24.             return View(achieveModel);  
  25.         }  
  26.   
  27.         public ActionResult PlayersWiseAchieves()  
  28.         {  
  29.             PlayerAchieve pa = new PlayerAchieve();  
  30.             pa.AllPlayers = _repository.GetPlayers();  
  31.             pa.AllAchieves = _repository.GetAchieves();  
  32.             return View(pa);  
  33.         }  
  34.   
  35.     }  
  36. }  

Code Description

Here I using two namespaces to Access Models and PlayerModels class files that is Player , Achieve, DataRepository and PlayerAchieve classes and their respected entities.

DataRepository class creates an object named “_repository” using new keyword.

Here two Important controller action methods defined here. 

  1. public ActionResult AllAchieves()  
  2.         {  
  3.             List<Achieve> achieveModel = new List<Achieve>();  
  4.             achieveModel = _repository.GetAchieves();  
  5.             return View(achieveModel);  
  6.         }  
  7.   
  8. public ActionResult PlayersWiseAchieves()  
  9.         {  
  10.             PlayerAchieve pa = new PlayerAchieve();  
  11.             pa.AllPlayers = _repository.GetPlayers();  
  12.             pa.AllAchieves = _repository.GetAchieves();  
  13.             return View(pa);  
  14.         }   

In AllAchieves action method using the Achieve class method called GetAchieves , The details of data in DataRepository class file will be fetched. 

  1. List<Achieve> achieveModel = new List<Achieve>();  
  2.             achieveModel = _repository.GetAchieves();  
  3.             return View(achieveModel);   

In PlayersWiseAchieves action method using the PlayerAchieve class and reference classes defined in PlayerAchieve that is Player and Achieve class’s methods that is GetPlayers and GetAchieves defined to access dropdown list data and details data . The details of data in DataRepository class file will be fetched. 

  1. public ActionResult PlayersWiseAchieves()  
  2.         {  
  3.             PlayerAchieve pa = new PlayerAchieve();  
  4.             pa.AllPlayers = _repository.GetPlayers();  
  5.             pa.AllAchieves = _repository.GetAchieves();  
  6.             return View(pa);  
  7.         }   

In the end return View taking corresponding class object for view references. 

  1. return View(achieveModel);  
  2.   
  3. return View(pa);   

Step 6

WORKING WITH VIEWS.

Create a View cshtml file named “AllAchieves.cshtml” in Achieve folder of Views folder;

Code Ref 

  1. @model IEnumerable<SatyajQueryMobileMvc.Models.Achieve>  
  2.   
  3. @{  
  4.     ViewBag.Title = "All Players Achieves";  
  5. }  
  6.   
  7.     <table>  
  8.         <tr>  
  9.             <td style="width: 20%; text-align: left;">  
  10.                 <h2 style="color:red">All Achieves</h2>  
  11.             </td>  
  12.             <td style="width: 90%; text-align:center">  
  13.                 @Html.ActionLink("Go To Players wise Achieves", "PlayersWiseAchieves", "", new { style = "font-size:20px; color:red;font-style:oblique;font-size:large" })  
  14.             </td>  
  15.         </tr>  
  16.     </table>  
  17.     <table>  
  18.         <tr>  
  19.             <th>  
  20.                 Achieve Name  
  21.             </th>  
  22.             <th>  
  23.                 Achieve Description  
  24.             </th>  
  25.         </tr>  
  26.   
  27.         @foreach (var item in Model)  
  28.         {  
  29.             <tr>  
  30.                 <td style="color:blue; font-style: oblique">  
  31.                     @Html.DisplayFor(modelItem => item.AchieveName)  
  32.                 </td>  
  33.                 <td style="color:green; font-style: oblique">  
  34.                     @Html.DisplayFor(modelItem => item.AchieveDescription)  
  35.                 </td>  
  36.             </tr>  
  37.         }  
  38.     </table>  

Code Description

This will be the start page view of this application.

We have to add namespace to get Achieve Class data details. 

  1. @model IEnumerable<SatyajQueryMobileMvc.Models.Achieve>   

For this view the title will be shown as 

  1. ViewBag.Title = "All Players Achieves";  

 Here I assigned foreach loop to show Achieve Name and Achieve Description of Achieve class. 

  1. @foreach (var item in Model)  
  2.         {  
  3.             <tr>  
  4.                 <td style="color:blue; font-style: oblique">  
  5.                     @Html.DisplayFor(modelItem => item.AchieveName)  
  6.                 </td>  
  7.                 <td style="color:green; font-style: oblique">  
  8.                     @Html.DisplayFor(modelItem => item.AchieveDescription)  
  9.                 </td>  
  10.             </tr>  
  11.         }   

See 

  1. @Html.DisplayFor(modelItem => item.AchieveName  
  2.   
  3. @Html.DisplayFor(modelItem => item.AchieveDescription   

Here I using actionlink that will be redirected to PlayersWiseAchieves view and show data according to selection parameters in dropdown list. 

  1. @Html.ActionLink("Go To Players wise Achieves", "PlayersWiseAchieves", "", new { style="font-size:20px; color:red;font-style:oblique;font-size:large" })   

TO KNOW DETAILS OF THE  FEATURE GO TO MY BLOGS AND ARTICLES etc.

http://www.c-sharpcorner.com/members/satyaprakash-samantaray

Again create a View cshtml file named “PlayersWiseAchieves.cshtml” in Achieve folder of Views folder;

Code Ref

  1. @model SatyajQueryMobileMvc.PlayerModels.PlayerAchieve  
  2.   
  3. @{  
  4.     ViewBag.Title = "Players Wise Achieves";  
  5.     SelectList cat = new SelectList(Model.AllPlayers, "PlayerId", "PlayerName");  
  6. }  
  7.   
  8. <h2 style="color:red">Players Wise Achieves</h2>  
  9. <br />  
  10. <table>  
  11.     <tr>  
  12.         <td style="font-size: 16px; font-style: oblique;color:orangered">  
  13.             Select a Player Name:  
  14.         </td>  
  15.         <td>  
  16.             @Html.DropDownListFor(m => m.SelectedPlayerId, cat, "Select Player", new { style = "width:200px; font-size:16px;" })  
  17.         </td>  
  18.     </tr>  
  19. </table>  
  20.   
  21. <table>  
  22.     <tbody id="tblAchieveData"></tbody>  
  23. </table>  
  24.   
  25. <script>  
  26.   
  27.     $("#SelectedPlayerId").change(function () {  
  28.         var selectedPlayer = $(this).val().trim();  
  29.         var allAchieves = @Html.Raw(Json.Encode(Model.AllAchieves));  
  30.   
  31.         $('#tblAchieveData').empty();  
  32.         var headers = '<tr><th>Achieve Name</th><th>Achieve Description</th></tr>';  
  33.         var elements = "";  
  34.         for (var i = 0; i < allAchieves.length; i++) {  
  35.   
  36.             if(allAchieves[i].PlayerAchieve.PlayerId == selectedPlayer)  
  37.                 elements = elements + '<tr><td style="color:blue; font-style: oblique">' + allAchieves[i].AchieveName + '</td><td style="color:green; font-style: oblique">' + allAchieves[i].AchieveDescription + '</td></tr>';  
  38.   
  39.         }  
  40.         if (elements != "")  
  41.             $('#tblAchieveData').append(headers + elements);  
  42.     });  
  43. </script>  
  44.   
  45. <br />  
  46. <br />  
  47.   
  48. <div style="font-style:oblique ; font-size:large">  
  49.     @Html.ActionLink("Go To Achieve Home Page", "AllAchieves", "Achieve", new { style = "font-size:20px;color:red;" })  
  50. </div>  

Code Description

We have to add namespace to get PlayerAchieve Class References that is Player and Achieve class details.

@model SatyajQueryMobileMvc.PlayerModels.PlayerAchieve

For this view the title will be shown as

ViewBag.Title = "Players Wise Achieves";

We have to add some player name in Dropdown list

SelectList cat = new SelectList(Model.AllPlayers, "PlayerId", "PlayerName");

Here AllPlayers the Object of Player generic list class in PlayerAchieve class file.

Model.AllPlayers

Here PlayerId and PlayerName the entities in Player class file.

SelectList class represents lists let user select one item.

The Dropddown list designed to get Player names . 

  1. @Html.DropDownListFor(m => m.SelectedPlayerId, cat, "Select Player", new { style="width:200px; font-size:16px;" })   

Here cat is the SelectList Class object.

Here SelectedPlayerId is the int variable defined in PlayerAchieve class In PlayerModels folder. 

  1. m => m.SelectedPlayerId, cat, "Select Player"   

Here I designed one table to show data details and this id we have to pass in Jquery Script file. 

  1. <table>  
  2.     <tbody id="tblAchieveData"></tbody>  
  3. </table>   

Here I used Jquery Script file is responsible for to show data. 

  1. <script>  
  2.     $("#SelectedPlayerId").change(function () {  
  3.         var selectedPlayer = $(this).val().trim();  
  4.         var allAchieves = @Html.Raw(Json.Encode(Model.AllAchieves));  
  5.   
  6.         $('#tblAchieveData').empty();  
  7.         var headers = '<tr><th>Achieve Name</th><th>Achieve Description</th></tr>';  
  8.   
  9.         var elements = "";  
  10.         for (var i = 0; i < allAchieves.length; i++) {  
  11.           if(allAchieves[i].PlayerAchieve.PlayerId == selectedPlayer)  
  12.                 elements = elements + '<tr><td style="color:blue; font-style: oblique">' + allAchieves[i].AchieveName + '</td><td style="color:green; font-style: oblique">' + allAchieves[i].AchieveDescription + '</td></tr>';  
  13.   
  14.         }  
  15.         if (elements != "")  
  16.             $('#tblAchieveData').append(headers + elements);  
  17.     });  
  18. </script>   

In first Session I passed SeletcedPlayerId to get data details based on selection of dropdown selection. 

  1. $("#SelectedPlayerId").change(function () {  
  2. var selectedPlayer = $(this).val().trim();  
  3. var allAchieves = @Html.Raw(Json.Encode(Model.AllAchieves));   

JSON HELPER CLASS PROVIDES METHODS TO WORK WITH DATA.

ENCODE  CONVERTS DATA OBJECTS IN STRING FORMATS.

Json.Encode(Model.AllAchieves));

The PlayerAchieve class Object value passed in ENCODE.

Model.AllAchieves

Then defined table id passed here to design view with heading and details. 

  1. $('#tblAchieveData').empty();  
  2. var headers = '<tr><th>Achieve Name</th><th>Achieve Description</th></tr>';   

This part will define you How data details will come as per selection of dropdownlist selection parameter.

With selection of Player name of player class , the achieve name and achieve description of Achieve class will be shown using methods and generic list class properties of PlayerAchieve class.  

  1. var elements = "";  
  2.         for (var i = 0; i < allAchieves.length; i++) {  
  3.           if(allAchieves[i].PlayerAchieve.PlayerId == selectedPlayer)  
  4.                 elements = elements + '<tr><td style="color:blue; font-style: oblique">' + allAchieves[i].AchieveName + '</td><td style="color:green; font-style: oblique">' + allAchieves[i].AchieveDescription + '</td></tr>';  
  5. }   

If there is data then the table id defined in jquery script tag will show you in proper format with heading and data details using combination of Headers and Elements . 

  1. if (elements != "")  
  2.             $('#tblAchieveData').append(headers + elements);  
  3.     });   

Then I used one Action Link to redirect to Home page / Start page that is “AllAchieves.cshtml” View page.

@Html.ActionLink("Go To Achieve Home Page", "AllAchieves", "Achieve", new { style="font-size:20px;color:red;" })

Step 7

WORKING WITH SHARED FOLDER.

Code Ref(Layout.cshtml)

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>@ViewBag.Title - SATYAPRAKASH SAMANTARAY</title>  
  6.         <meta name="viewport" content="width=device-width" />  
  7.         @Styles.Render("~/Content/css")  
  8.         @Scripts.Render("~/bundles/modernizr")  
  9.         @Scripts.Render("~/bundles/jquery")  
  10.         @*With commenting the Players Wise Achieves not showing player details after selection of specific player name.*@  
  11.     </head>  
  12.     <body>  
  13.         <div id="body">  
  14.             <section class="content-wrapper main-content clear-fix">  
  15.                 @RenderBody()  
  16.             </section>  
  17.         </div>  
  18.     </body>  
  19. </html>  

Code Description

The Title tag defined here to add some extra text to whatever title text tab defined in both AllAchieves.cshtml and PlayersWiseAchieves.cshtml.

ViewBag.Title = "All Players Achieves";

ViewBag.Title = "Players Wise Achieves";

<title>@ViewBag.Title - SATYAPRAKASH SAMANTARAY</title>

So browser title tab output must be for AllAchieves.cshtml 

All Players Achieves - SATYAPRAKASH SAMANTARAY

So browser title tab output must be for PlayersWiseAchieves.cshtml

Players Wise Achieves - SATYAPRAKASH SAMANTARAY

As per requirement you can customize css content by using this reference path.

@Styles.Render("~/Content/css")


This Scripts class line very important for Jquery Script file defined in PlayersWiseAchieves.cshtml View file.

@Scripts.Render("~/bundles/jquery") @*With commenting the Players Wise Achieves not showing player details after selection of specific player name.*@

Details of Jquery Bundles.


Without this line the Jquery script will not work and the output will not be shown even after selection of player name in drop downlist.

Then renders the portion of content page in body tag. 

  1. <body>  
  2.         <div id="body">  
  3.             <section class="content-wrapper main-content clear-fix">  
  4.                 @RenderBody()  
  5.             </section>  
  6.         </div>  
  7. </body>   

Step 8

WORKING WITH 51Degrees.mobi.

After Installation Of This 51Degrees.mobi , How to Find all installation related files like Dll file ?

Follow below mentioned image for references.

Picture 1


Picture 2


Picture 3


Picture 4


Step 9

SET START PAGE AT PAGE LOAD FIRST TIME.

Code Ref 

  1. routes.MapRoute(  
  2.                 name: "Default",  
  3.                 url: "{controller}/{action}/{id}",  
  4.                 defaults: new { controller = "Achieve", action = "AllAchieves", id = UrlParameter.Optional }  
  5.             );   

Code Description

Here Controller Name : Achieve

Controller Action Method / View Name : AllAchieves


Step 10

How to Configure Asp.net Mvc for mobile specific view ?


Important Code Reference 51Degrees.config which can be modified later for further requirement  

  1. <!--Commented by satya  
  2.     <redirect devicesFile="" timeout="20" firstRequestOnly="true"  
  3.       originalUrlAsQueryString="false" mobileHomePageUrl="~/Mobile/Default.aspx"  
  4.       mobilePagesRegex="/(Mobile|Tablet)/">  
  5.       <locations>  
  6.         <clear />  
  7.         <location name="noredirect" url="" matchExpression="" enabled="true">  
  8.           <add property="Url" matchExpression="[&|\?]noredirect" enabled="true" />  
  9.         </location>  
  10.         <location name="Mobile" url="~/Mobile/Default.aspx" matchExpression=""  
  11.           enabled="true">  
  12.           <add property="IsMobile" matchExpression="True" enabled="true" />  
  13.           <add property="IsTablet" matchExpression="False" enabled="true" />  
  14.         </location>  
  15.         <location name="Tablet" url="~/Tablet/Default.aspx" matchExpression=""  
  16.           enabled="true">  
  17.           <add property="IsTablet" matchExpression="True" enabled="true" />  
  18.         </location>  
  19.       </locations>  
  20.     </redirect>  
  21.     Commented by satya-->   

OUTPUT

The Url is - http://localhost:55041/Achieve/AllAchieves


Click On Go To Players wise Achieves link it will go to Player Wise Achieve Page.

The Url changed to http://localhost:55041/Achieve/PlayersWiseAchieves


The drop down list showing Player Name coming from Palyer class and DataRepository class file.








Now, playerwise achievements page showing Achievement Name and Achievement Description from DataRepository Class and Achieve Class file let the user for proper selection of select player name from dropdown list.

If You click Go To Achieve Home Page it will be redirected to All Achieve Home Page View


The Output is shown below.


The title text of http://localhost:55041/Achieve/AllAchieves


The title text of http://localhost:55041/Achieve/PlayersWiseAchieves


Output of different formats of View in different platforms with images is shown below.

  1.  For Mobile View
  2. For Tablet View
  3. For Desktop and Laptop View

MOBILE VIEW FORMAT OF THIS ASP.NET MVC APPLICATION

Mobile View 1


Mobile View 2


TABLET  FORMAT OF THIS ASP.NET MVC APPLICATION

Tablet View 1


Tablet View 2


DESKTOP/LAPTOP VIEW FORMAT OF THIS ASP.NET MVC APPLICATION

Desktop/Laptop View 1


Desktop/Laptop View 2


Summary

In this article, we learned the below details.

  1. How to download and install 51Degrees.mobi library packages .
  2. Customize the  package configuration code in 51Degrees.config.
  3. Create Asp.net Mvc 5 application using 51Degrees.mobi library package.
  4. Showing Application in different platforms with adjustable screen size.


Similar Articles