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

آموزش 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 کنید.

 

آموزش 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 کنید.

 

آموزش web API

 

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

 

آموزش Web API

 


ساخت API Controller ها

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

 

آموزش Web API


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

 

آموزش Web API

 

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

 

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

 

 

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

 

آموزش Web API

 

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

 

آموزش Web API

 

 

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

 

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

 

 آموزش Web API

 

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

 

آموزش Web API

 

 

 

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

 

آموزش Web API

 

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

 

 

آموزش Web API

 


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

 آموزش Web API

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

 

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

    public string Name { get; set; }
}

 

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

 

آموزش Web API

 

کد متد 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 می باشد، را مشاهده کنید.

 

آموزش Web API

 

 

 

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

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

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

 

آموزش Web API


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

 

آموزش Web API


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

 

آموزش Web API

 

در فایل 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 قرار دهید.

 

آموزش Web API

 

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

 

آموزش Web API


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

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

 

آموزش Web API

 

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

 

آموزش Web API

 

 

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

نظرات

  • Hannah Martinez
    محمد
    دو شنبه 11 دی 1278 - 0:00

    ممنون از سایت خوبتون

    • Judith Bell
      پاسخ
      اسماعیلشیدایی
      دو شنبه 11 دی 1278 - 0:00

      با عرض سلام

      از لطف شما سپاسگذاریم

      موفق باشید

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس