سناریو
مدیر یک سایت می خواهد لیست کاربران را با وضعیت اسکایپ خود مشاهده کند و همچنین می خواهد با کلیک بر روی وضعیت Skype در نمایه کاربر چت/تماس داشته باشد.
پیش نیازها
برای نمایش وضعیت اسکایپ در یک سایت عمومی، کاربر اسکایپ باید تنظیمات حریم خصوصی "Allow my online status to show on the web" را بررسی کند (انتخاب کند). میتوانید با پیمایش از منوی اسکایپ تنظیمات حریم خصوصی به تنظیمات بروید و همانطور که در تصویر زیر نشان داده شده است، «Allow my online status to be show on the web» را علامت بزنید.
پیاده سازی
مرحله 1
یک پروژه جدید با نام " UsersSkypeStatusInMVC " ایجاد کنید و الگوی " MVC " را انتخاب کنید. سپس یک پروژه قالب MVC ایجاد می کند.
مرحله 2
با روش زیر
یک کنترلر به نام " AdminController " اضافه کنید.
- روی پوشه "Controllers" کلیک راست کرده و گزینه " Add " را انتخاب کرده و روی لینک "Controller" کلیک کنید.
- یک پاپ آپ باز می شود و سپس گزینه " MVC 5 Controller – Empty " را انتخاب کرده و سپس روی دکمه "افزودن" کلیک کنید.
- مجدداً یک پنجره باز می شود و سپس نام را به عنوان " AdminController " وارد می کند و روی دکمه "افزودن" کلیک می کند.
اکنون، کنترلر با یک کد پیش فرض ایجاد می شود.
مرحله 3
در این مرحله یک مدل به نام UserModel با استفاده از روش زیر اضافه کنید.
- روی پوشه "Models" کلیک راست کرده و گزینه "Add" را انتخاب کرده و روی "Class..." کلیک کنید.
- یک پاپ آپ باز می شود و سپس نام را به عنوان "UserModel.cs" وارد کرده و روی دکمه افزودن کلیک کنید.
پس از افزودن مدل، کد موجود در فایل «UserModel.cs» را با کد زیر جایگزین کنید.
- namespace UsersSkypeStatusInMVC.Models
- {
- /// <summary>
- /// User Model
- /// </summary>
- public class UserModel
- {
- public int UserId { get; set; }
- public string Name { get; set; }
- public string Email { get; set; }
- public string SkypeId { get; set; }
- public string ProfileImagePath { get; set; }
- }
- }
مرحله 4
در این مرحله کد موجود در فایل AdminController.cs را با کد زیر جایگزین کنید.
- using System.Collections.Generic;
- using System.Web.Mvc;
- using UsersSkypeStatusInMVC.Models;
- namespace UsersSkypeStatusInMVC.Controllers
- {
- public class AdminController : Controller
- {
- // GET: UsersProfile
- public ActionResult UserProfiles()
- {
- List<UserModel> usersList = GetUsers();
- return View(usersList);
- }
- /// <summary>
- /// Get the list of sample users
- /// </summary>
- /// <returns>User List</returns>
- private List<UserModel> GetUsers()
- {
- var usersList = new List<UserModel>
- {
- new UserModel
- {
- UserId = 1,
- Name="Ramchand",
- Email = "ram@abc.com",
- SkypeId = "ramchand.repalle", // Skype Id
- ProfileImagePath = "Ramchand.jpg"
- },
- new UserModel
- {
- UserId = 2,
- Name="Abc",
- Email = "chand@abc.com",
- SkypeId = "abctest",// Skype Id
- ProfileImagePath = "abc.jpg"
- },
- new UserModel
- {
- UserId = 3,
- Name="def",
- Email = "def@abc.com",
- SkypeId = "ram",// Skype Id
- ProfileImagePath = "def.jpg"
- }
- };
- return usersList;
- }
- }
- }
درباره کد
- متد GetUsers () یک لیست نمونه از کاربران را ارائه می دهد.
- شما آن متد را در متد UserProfiles Action Result فراخوانی کرده و سپس آن لیست از کاربران را به view ارسال خواهید کرد.
مرحله 5
در این مرحله، یک نمای برای متد UserProfiles Action Controller با روش زیر اضافه کنید:
- روی متد View() در متد UsersProfile Action کلیک راست کرده و روی " Add View " کلیک کنید.
- نام View را به عنوان " UserProfiles " وارد کنید و سپس روی دکمه " افزودن " کلیک کنید.
مرحله 6
این مرحله کد موجود در طراحی فایل " UserProfiles.csthtml " را با کد زیر جایگزین می کند.
- @model IEnumerable<UsersSkypeStatusInMVC.Models.UserModel>
- @{
- ViewBag.Title = "User Profiles";
- }
- <h2>User Profiles</h2>
- <style type="text/css">
- .lblHeader {
- font-weight: bold;
- }
- .userProfile {
- box-shadow: 10px 10px 5px #888888;
- width: 300px;
- height: 200px;
- float:left;
- margin-right:30px;
- }
- </style>
- @foreach (var item in Model)
- {
- var skypeId = @Html.DisplayFor(modelItem => item.SkypeId);
- var profileImg = "../../Images/" + @Html.DisplayFor(modelItem =>
- item.ProfileImagePath);
- <div class="userProfile">
- <div style="float: left;min-width: 180px;">
- <label class="lblHeader">UserId:</label>
- @Html.DisplayFor(modelItem => item.UserId) <br />
- <label class="lblHeader">Name:</label>
- @Html.DisplayFor(modelItem => item.Name) <br />
- <label class="lblHeader">Email:</label>
- @Html.DisplayFor(modelItem => item.Email) <br />
- <label class="lblHeader">Skype:</label>
- <a style="text-decoration: none;" href="skype:@skypeId?chat">
- <img class="skypeStatusImg" style="margin-top: 1px"
- src="http://mystatus.skype.com/mediumicon/@skypeId">
- </a>
- <a style="text-decoration: none;" href="skype:@skypeId?call">
- <img src="http://www.skypeassets.com/i/scom/images/skype-
- buttons/callbutton_24px.png">
- </a>
- </div>
- <div>
- <img alt="ProfilePic" height="100" width="100" src="@profileImg" />
- </div>
- </div>
- }
- <div class="clearfix"></div>
- <script type="text/javascript" language="javascript">
- function SkypeUserStatus() {
- $(".skypeStatusImg").each(function () {
- var imgSrc = $(this).attr("src").split("?")[0] + "?";
- $(this).attr("src", imgSrc + new Date().getTime());
- });
- }
- setInterval(SkypeUserStatus, 1000);
- </script>
درباره طراحی
- یک فضای نام برای دریافت لیست کاربران اضافه شده است.
- سبک های CSS تعریف شده است.
- یک حلقه foreach به نمایش لیست کاربران با جزئیات مربوطه کمک می کند.
- Skype: {SKYPE ID}?chat: این تگ href است، میتوانید با کلیک کردن روی آن برای چت کردن Skype استفاده کنید. به عنوان مثال: skype:ramchand.repalle?chat
- Skype: {SKYPE ID}?call: این تگ href است، میتوانید با کلیک کردن روی آن، با Skype تماس بگیرید. به عنوان مثال: skype:ramchand.repalle?call
- تابع JavaScript SkypeUserStatus به اختصاص تصویر وضعیت Skype کمک می کند.
- SetInterVal برای فراخوانی دوره ای تابع SkypeUserStatus برای دریافت وضعیت فعلی اسکایپ یک کاربر استفاده شده است.