آموزش ASP.NET MVC & web API (بخش دوم-متوسطه)

نویسنده اسماعیل شیدایی

شنبه 10 آبان 1393 - 10:30

آموزش ASP.NET MVC & web API (بخش دوم-متوسطه)

بسم الله الرحمن الرحیم

این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

مشاهده تمامی آموزش های دوره آموزش Web API

آموزش Web API– سطح متوسط

بخش دوم– ساخت یک Read-Only Web API

آموزش (Web API (REST

آموزش ساخت Read-Only Web API

بخش اول آموزش Web API

بخش دوم آموزش Web API

بخش سوم آموزش Web API

در این بخش پیاده سازی متدread-only GET را برای برنامه مدیریت تماس خود انشالله انجام خواهید داد.

ساخت API Project

در این بخش شما از template هایASP.NET web project برای ایجاد یک Web API web application استفاده خواهید کرد. برای شروع Visual Studio خود را باز کنید.

در این آموزش از 2012 Visual Studio استفاده کرده ایم. اما اگر از نسخه های بالاتر که در حال حاضر 2013 است و احتمالا نسخه های جدید تر این IDE که به زودی ارائه خواهد شد استفاده می کنید نگران نباشید، اصول و مفاهیم یکی خواهد بود حتی اگر vNext از راه برسد.
برای مطالعه در خصوص vNext از این مطلب که قبلا نوشته شده است، استفاده کنید. مطالعه آن خالی از لطف نخواهد بود.
اگر روش مورد استفاده در نسخه های جدید Visual Studio با این آموزش متفاوت شده است، طبیعتا منو ها و آیتم تغییر کرده اند و کلیت کار عوض نخواهد شد پس با کمی تغییر می توانید این آموزش را به پایان برسانید.

از منوی File گزینه New Project را انتخاب کنید. از بخش Visual C# و Web نوع پروژه را مشخص کنید. از بخش سمت راست گزینه ASP.NET MVC 4 Web Application را انتخاب کنید. نام پروژه را ContactManager وSolution name را Begin قرار دهید و سپس Ok کنید.

بسم الله الرحمن الرحیم

این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

مشاهده تمامی آموزش های دوره آموزش Web API

آموزش Web API– سطح متوسط

بخش دوم– ساخت یک Read-Only Web API

آموزش (Web API (REST

آموزش ساخت Read-Only Web API

بخش اول آموزش Web API

بخش دوم آموزش Web API

بخش سوم آموزش Web API

در این بخش پیاده سازی متدread-only GET را برای برنامه مدیریت تماس خود انشالله انجام خواهید داد.

ساخت API Project

در پنجره ASP.NET MVC 4 project type گزینه Web API را انتخاب کنید.

ساخت API Controller ها

در ابتدا فایل ValuesController.cs را که در پوشه Controllers قرار دارد حذف کنید ( این کنترلر پیش فرضی است که در هنگام ساخت پروژه ایجاد می شود).
حال بر روی پوشه Controllers کلیک راست کنید و سپس گزینه Add و بعد از آن گزینه Controller را انتخاب کنید.

در پنجره Add Controller گزینه Empty API Controller را از بخش Template انتخاب کنید، نام کلاس را ContactController قرار دهید و سپس بر روی Add کلیک کنید.

کد زیر را به ContactController اضافه کنید.

public string[] Get()
  {
        return new string[]
        {
             "Hello",
             "World"
        };
  }

حالا F5 را بزنید تا برنامه debug شود. خروجی صفحه اصلی برنامه ما به صورت زیر است. ( این خروجی ما در Visual Studio 2012 است).

هر چند استفاده از IE کار بدی است اما برای آموزش مشکلی ندارد.
در مرورگر IE کلید F12 را بزنید تا پنجره Developer Tools باز شود. بر روی تب Network کلیک کنید و سپس باتن Start Capturing را انتخاب کنید تا ترافیک مصرفی شبکه شما را برای این پنجره نمایش دهد.

طبیعتا هر مرورگری این امکان را دارد مثلا اگر از Firefox استفاده کنید می توانید Firebug را نصب کنید که امکانات بسیار جالبی دارد و یا مرورگر Chrome نیز این امکانات را به صورت داخلی پشیتبانی می کند.

به انتهای آدرس مرورگر خود /api/contact را اضافه کنید و Enter را بزنید. حال وقتی صفحه وارد شده باز می شود به قسمت network capture در پایین مرورگر خود دقت کنید. اگر توجه کنید مشاهده می کنید که نوع پاسخ MIME در این جا application/json است.این نمایش دهنده این موضوع می باشد که فرمت خروجی پیش فرض JSON است.

نکته: در این مرحله رفتار پیش فرض مرورگر IE باعث می شود، پرسشی در خصوص تمایل کاربر برای ذخیره و یا باز نمودن stream حاصل از تماس با Web API مطرح شود.
از فراخوانی Web API URL یک فایل text ای به صورت JSON ایجاد خواهد شد.
پس برای سوال پرسیده شده توسط مرورگر IE خود باتن cancel را انتخاب نکنید تا بتوانید نتیجه این فراخوانی Web API را در بخش network capture مشاهده کنید.
برای مشاهده جزئیات این فراخوانی API بر روی باتن Go to detailed view کلیک کنید.

برای مشاهده متن پاسخ JSON ارسال شده در قالب اصلی آن، بر روی تب Response body کلیک کنید.

ساخت Contact Model و Contact Controller
در این بخش کلاس های کنترلر که متدهای API در آن قرار خواهد گرفت، را ایجاد می کنیم.
بر روی پوشه Models کلیک راست کنید و از منوی Add گزینه Class... را انتخاب کنید.

در پنجره Add New Item نام فایل را Contact.cs انتخاب کنید و سپس بر روی گزینه Add کلیک کنید.

کد زیر را به کلاس Contact اضافه کنید.

public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}

در کلاس ContactController، کلمه string را در تعریف متد Get انتخاب کنید و کلمه Contact را تایپ کنید. در ابتدای کلمه Contact یک علامت منو نمایش داده می شود بر روی این منو کلیک کنید (این کار را می توانید با کلید "Ctrl" و کلید "." نیز انجام دهید) و مانند تصویر زیر گزینه مشخص شده را انتخاب کنید تا Model namespace مربوطه اضافه شود.

کد متد Get را به شکلی تغییر می دهیم تا یک آرایه از شی Contact model را برگرداند (return).

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

دکمه F5 را فشار دهید تا برنامه برای نمایش debug شود. برای مشاهده تغییرات در پاسخ ارسالی از API مراحل زیر را انجام دهید.

در پنجره مرورگر اگر تب developer باز نیست، دکمه F12 را فشار دهید.
تب Network را انتخاب کنید.
بر روی باتن Start Capturing کلیک کنید.
آدرس /api/contact را به انتهای آدرس جاری مرورگر خود اضافه و کلید Enter را فشار دهید.
بر روی باتن Go to detailed view کلیک کنید.
تب Response body را انتخاب کنید.
شما باید یک JSON string که به صورت serialize شده از یک آرایه، از شی Contact می باشد، را مشاهده کنید.

اضافه کردن توابع در Service Layer

در این بخش مشاهده خواهید که چطور می توان قابلیتهای برنامه و توابع را در یک لایه سرویس جدا از کنترلر قرار داد تا توسعه برنامه برای آینده ساده تر شود. در نتیجه این امکان به وجود خواهد آمد که در آینده بتوانید از سرویس ها که عملا آنها کار را انجام می دهند، استفاده مجدد کنید.

یک پوشه جدید در Root، solution برنامه با نام Services ایجاد کنید.

یک کلاس در پوشه Services ایجاد کنید

نام کلاس را ContactRepository قرار دهید.

در فایل ContactRepository.cs برای include کردن model namespace ها کد زیر را اضافه کنید.

using ContactManager.Models;

کد زیر را در فایل ContactRepository.cs در بخش پیاده سازی متد GetAllContacts قرار دهید.

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
             new Contact
             {
                  Id = 1,
                  Name = "Glenn Block"
             },
             new Contact
             {
                  Id = 2,
                  Name = "Dan Roth"
             }
        };
    }
}

فایل ContactController.cs را باز کنید و دستور اضافه کردن namespace زیر را به آن اضافه کنید.

using ContactManager.Services;

یک فیلدprivate برای نمایش یک شی از repository به کلاس ContactController.cs اضافه کنید. این کار باعث می شود سایر اعضای کلاس بتوانند از پیاده سازی این سرویس استفاده کنند.

public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}

متد Get را تغییر می دهیم تا این متد بتواند از سرویس contact repository استفاده کند.

public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}

یک breakpoint در محل تعریف متد Get کلاس ContactController قرار دهید.

F5 را فشار دهید
در مرورگر خود F12 را فشار دهید.
بر روی تب Network کلیک کنید.
بر روی باتن Start Capturing کلیک کنید.
به انتهای آدرس مرورگر /api/contact را اضافه کنید و Enter را فشار دهید.
حال باید Visual Studio برنامه را در خطی که بر روی آن breakpoint قرار دادیم متوقف کند.

با زدن F5 به برنامه اجازه دهید اجرا شود.

به قسمت Developer مرورگر خود بروید

باتن Go to detailed view را کلیک کنید.
بر روی تب Response body کلیک کنید. توجه کنید چطور دو شی contacts به وسیله لایه سرویس از فراخوانی API به صورت JSON دریافت شده است.

مشاهده تمامی آموزش های دوره آموزش Web API