Skype Status Display For a User in MVC

Scenario

The administrator in a site wants to view the list of users with his/her Skype status and also wants to chat/call by clicking on the Skype status in the user profile.

Prerequisites

To display the Skype status in a public site, the Skype user must check (select) the privacy setting "Allow my online status to be shown on the Web". You can go to the settings by navigating from the Skype menu Privacy settings and check the "Allow my online status to be shown on the Web" as shown in the following screenshot.



Implementation
Step 1
Create a new project named "UsersSkypeStatusInMVC" and choose the template "MVC". It then creates an MVC template project.

Step 2
Add a Controller named "AdminController" with the following procedure.

1. Right-click on the "Controllers" folder and select the "Add" option and click on the "Controller" link.
   
2. It opens a pop-up and then select the option "MVC 5 Controller – Empty" and then click on the "Add" button.
   
3. Again, it opens a popup and then provide the name as "AdminController" and click on the "Add" button.

Now, the controller is created with a default code.

Step 3
In this step, Add a Model named "UserModel" using the following procedure.

1. Right-click on the "Models" folder and select the "Add" option and click on the "Class...".
   
2. It opens a pop-up and then enter the name as "UserModel.cs" and click on the Add button.

After adding the model, replace the existing code in the file "UserModel.cs" with the following code.

1. namespace UsersSkypeStatusInMVC.Models    
2. {    
3.     /// <summary>    
4.     /// User Model    
5.     /// </summary>    
6.     public class UserModel    
7.     {    
8.         public int UserId { get; set; }    
9.         public string Name { get; set; }    
10.         public string Email { get; set; }    
11.         public string SkypeId { get; set; }    
12.         public string ProfileImagePath { get; set; }    
13.     
14.     }    
15. }    

Step 4
This step, replace the existing code in the "AdminController.cs" file with the following code. 

1. using System.Collections.Generic;    
2. using System.Web.Mvc;    
3. using UsersSkypeStatusInMVC.Models;    
4.     
5. namespace UsersSkypeStatusInMVC.Controllers    
6. {    
7.     public class AdminController : Controller    
8.     {    
9.         // GET: UsersProfile    
10.         public ActionResult UserProfiles()    
11.         {    
12.             List<UserModel> usersList = GetUsers();    
13.             return View(usersList);    
14.         }    
15.     
16.         /// <summary>    
17.         /// Get the list of sample users    
18.         /// </summary>    
19.         /// <returns>User List</returns>    
20.         private List<UserModel> GetUsers()    
21.         {    
22.             var usersList = new List<UserModel>    
23.             {    
24.                 new UserModel    
25.                 {    
26.                     UserId = 1,    
27.                     Name="Ramchand",    
28.                     Email = "ram@abc.com",    
29.                     SkypeId = "ramchand.repalle", // Skype Id    
30.                     ProfileImagePath = "Ramchand.jpg"    
31.                 },    
32.                 new UserModel    
33.                 {    
34.                     UserId = 2,    
35.                     Name="Abc",    
36.                     Email = "chand@abc.com",    
37.                     SkypeId = "abctest",// Skype Id    
38.                     ProfileImagePath = "abc.jpg"    
39.                 },    
40.                 new UserModel    
41.                 {    
42.                     UserId = 3,    
43.                     Name="def",    
44.                     Email = "def@abc.com",    
45.                     SkypeId = "ram",// Skype Id    
46.                     ProfileImagePath = "def.jpg"    
47.                 }    
48.             };    
49.     
50.             return usersList;    
51.         }    
52.     }    
53. }    

About Code

1. The GetUsers() method will provide a sample list of users.
   
2. You will call that method in the UserProfiles Action Result method and then send that list of users to the view.

Step 5
This step, add a view for the UserProfiles Action controller method by the following procedure:

1. Right-click on the View() method in the UsersProfile Action method and click on "Add View".
   
2. Enter the view name as "UserProfiles" and then click on the "Add" button.

Step 6
This step replaces the existing code in the "UserProfiles.csthtml" file design with the following code.

1. @model IEnumerable<UsersSkypeStatusInMVC.Models.UserModel>    
2.     
3. @{    
4.     ViewBag.Title = "User Profiles";    
5. }    
6. <h2>User Profiles</h2>    
7.     
8. <style type="text/css">    
9.     .lblHeader {    
10.         font-weight: bold;    
11.     }    
12.     .userProfile {    
13.         box-shadow: 10px 10px 5px #888888;     
14.         width: 300px;     
15.         height: 200px;    
16.         float:left;    
17.         margin-right:30px;    
18.     }    
19. </style>    
20.     
21. @foreach (var item in Model)    
22. {    
23.     var skypeId = @Html.DisplayFor(modelItem => item.SkypeId);    
24.     var profileImg = "../../Images/" + @Html.DisplayFor(modelItem =>     
25.                         item.ProfileImagePath);    
26.     <div class="userProfile">    
27.         <div style="float: left;min-width: 180px;">    
28.             <label class="lblHeader">UserId:</label>    
29.             @Html.DisplayFor(modelItem => item.UserId) <br />    
30.             <label class="lblHeader">Name:</label>    
31.             @Html.DisplayFor(modelItem => item.Name) <br />    
32.             <label class="lblHeader">Email:</label>    
33.             @Html.DisplayFor(modelItem => item.Email) <br />    
34.             <label class="lblHeader">Skype:</label>    
35.             <a style="text-decoration: none;" href="skype:@skypeId?chat">    
36.                 <img class="skypeStatusImg" style="margin-top: 1px"     
37.                      src="http://mystatus.skype.com/mediumicon/@skypeId">    
38.             </a>    
39.             <a style="text-decoration: none;" href="skype:@skypeId?call">    
40.                 <img src="http://www.skypeassets.com/i/scom/images/skype-    
41.                            buttons/callbutton_24px.png">    
42.             </a>    
43.         </div>    
44.         <div>    
45.             <img alt="ProfilePic" height="100" width="100" src="@profileImg" />    
46.         </div>    
47.     </div>    
48. }    
49. <div class="clearfix"></div>    
50. <script type="text/javascript" language="javascript">    
51.     function SkypeUserStatus() {    
52.         $(".skypeStatusImg").each(function () {    
53.             var imgSrc = $(this).attr("src").split("?")[0] + "?";    
54.             $(this).attr("src", imgSrc + new Date().getTime());    
55.         });    
56.     }    
57.     setInterval(SkypeUserStatus, 1000);    
58. </script>  

About the Design 

1. Added a namespace to get the list of users.
   
2. CSS styles are defined.
   
3. A foreach loop helps to display the list of users with respective details.
   
4. Skype: {SKYPE ID}?chat: This is the href tag, you can use to chat the Skype by clicking on that. For example: skype:ramchand.repalle?chat
   
5. Skype: {SKYPE ID}?call: This is the href tag, you can use to call the Skype by clicking on that. For example: skype:ramchand.repalle?call
   
6. JavaScript function SkypeUserStatus helps to assign the Skype status image.
   
7. SetInterVal has been used to call the SkypeUserStatus function periodically to get the current Skype status of a user.

Step 7
This step helps you about Skype Status URL information and other details. To display the Skype status of any user, you have to request the URL format as follows.

The format of the URL is: http://mystatus.skype.com/{SIZE OF ICON}/{SKYPE ID}

{SIZE OF ICON}: It indicates to display the size of the icon based on user Skype status.

For example: smallicon, mediumicon

{SKYPE ID}: It indicates the Skype Id of the user.

For example: ramchand.repalle

So, the example of the Skype status URL is http://mystatus.skype.com/mediumicon/ramchand.repalle.

You can get the status of the user by just clicking on the previously shown URL.

Step 8
Add a new folder named “Images” with sample images to the “UsersSkypeStatusInMVC” project. It helps display the sample image for the profile picture as mentioned in the "GetUsers()" method in AdminController.



Step 9
Now, build the application (F6), then run (hit F5) an application and navigate to the following URL: (http://localhost:57882/Admin/UserProfiles).



As in the preceding screenshots by clicking on the (Skype) icon it displays a popup to launch the application in Skype. You just click on that then it would open a Skype user window.

The Skype status images are displayed as described below.