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

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

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

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

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

     بخش سوم– ساخت یک (Web API  (REST

آموزش (Web API  (REST

آموزش ساخت Read/Write Web API

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

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

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

در این بخش شما متدهایPOST  و PUT را فرا خواهید گرفت و آنها را به همراه ویژگی ویرایش اطلاعات به برنامه خود اضافه خواهیم کرد.

پروژه Web API مراحل قبل را باز کنید. فایل Services/ContactRepository.cs را باز کنید.
 Adding Data-Persistence Features to the Contact Repository Implementation

در این مرحله به پیاده سازی Contact Repository خود ویژگی نگهداری اطلاعات و یا Data-Persistence اضافه خواهیم کرد.
کلاس ContactRepository را به پروژه Web API مرحله قبل اضافه خواهیم کرد. این کار باعث خواهد شد داده ها ارسالی دریافت و یک شی جدید ایجاد شود.

به کلاس ContactRepository یک constant به صورت زیر برای نمایش کلید یا نام cache وب سرور اضافه کنید. این ثابت برای بخش های بعدی مورد نیاز است.

private const string CacheKey = "ContactStore";

تابع سازنده زیر را برای کلاس ContactRepository ایجاد کنید.

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

کد متد GetAllContacts را به صورت زیر تغییر دهید.

public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}

توجه داشته باشید که این یک مثال عمومی برای معرفی است و ما به جای استفاده از یک مکانیزم ذخیره سازی بر اساس Session یا Request storage lifetime از web server's cache  به عنوان یک وسیله ذخیره سازی استفاده خواهیم کرد، بنابراین مقادیر می توانند توسط چندین client به صورت همزمان قابل دست یابی باشند.

در کلاس ContactRepository یک متد جدید با نام SaveContact اضافه کنید تا با استفاده از این متد اطلاعات ارسالی را ذخیره کنیم. متد SaveContact یک پارامتر با نام Contact دارد و یک مقدار Boolean بر می گرداند (return) که این مقدار مشخص می کنید عملیات ثبت موفقیت آمیز بوده یا خیر.

public bool SaveContact(Contact contact)
  {
        var ctx = HttpContext.Current;

        if (ctx != null)
        {
             try
             {
                  var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
                  currentData.Add(contact);
                  ctx.Cache[CacheKey] = currentData.ToArray();

                  return true;
             }
             catch (Exception ex)
             {
                  Console.WriteLine(ex.ToString());
                  return false;
             }
        }

        return false;
  }

فراخوانی Web API از طریق یک HTML Client

در پوشه Views/Home فایل Index.cshtml را باز کنید.
کد زیر را در DIV ای که ID آن body است قرار دهید تا کد شما شبیه کد زیر شود.

<div id="body">
    <ul id="contacts"></ul>
</div>

کد زیر را در پایین فایل Index.cshtml قرار دهید. این یک کد درخواست HTTP به Web API ارسال می کند.

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

فایل ContactController.cs را باز کنید. یک breakpoint بر روی متد Get در کلاس ContactController قرار دهید.

F5 را فشار دهید تا برنامه اجرا شود. مطمئن شوید در صفحه اصلی وب سایت هستید.

وقتی پروژه لود شود کد JavaScript اجرا می شود و برنامه در قسمتی که breakpoint قرار دادیم متوقف می شود.

Breakpoint را حذف کنید و F5 را فشار دهید تا برنامه ادامه پیدا کند. وقتی که فراخوانی تابع Web API کامل شود شما باید لیست تماس ها را بتوانید مشاهده کنید.

برنامه را متوقف کنید.

تغییر UI صفحه Index View برای ایجاد امکان ثبت تماس

در این بخش می خواهیم یک HTML page جدید برای دریافت اطلاعات تماس از کاربر اضافه کنیم و همچنین این اطلاعات را از طریق Web API به متد مربوطه ارسال کنیم.

فایل ContactController.cs را باز کنید و یک متد جدید با نام Post مانند کد زیر به این کلاس اضافه کنید.

public HttpResponseMessage Post(Contact contact)
{
     this.contactRepository.SaveContact(contact);

     var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

     return response;
}

فایل Index.cshtml را باز کنید و کد زیر را به انتهای لیستی که در مرحله قبل ایجاد کردیم اضافه کنید.

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

درون بخش script که در پایین صفحه قرار دارد، کد زیر را برای مدیریت رویداد کلیک button قرار دهید. این کد داده ها را به  Web API ما از طریق فراخوانی HTTP POST ارسال خواهد کرد.

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

در کلاس ContactController.cs بر روی متد Post یک breakpoint قرار دهید.
حال کلید F5 را فشار دهید تا برنامه اجرا شود.

در صفحه برنامه خود یک شماره تماس و id ثبت کنید و بر روی باتن Save کلیک کنید.

وقتی که برنامه بر روی متد Post متوقف شد، به پرارپرتی های پارامتر contact نگاه کنید. مقادیر این پراپرتی ها باید با مقادیری که شما در صفحه HTML وارد کردید مشابه باشد.

برنامه را Step By Step اجرا کنید تا به خطی برسید که متغییر response ایجاد می شود. در این مرحله به پنجره Locals در debugger نگاه کنید، شما می توانید ببنید که تمامی پراپرتی ها مقداردهی شده اند.

F5 را بزنید تا اجرای برنامه کامل شود، اگر به صفحه مرورگر خود دقت کنید مشاهده خواهید کرد که یک رکورد جدید به اطلاعات شما اضافه شده است  و ترتیب مرتب سازی این عناصر بر اساس کدی است که در پیاده سازی ContactRepository نوشتیم.

این بخش دوره آموزشی Web API در اینجا به پایان می رسد در دوره آموزشی بعدی Web API یک پروژه تقریبا کاملتر را باز قدم به قدم جهت معرفی سایر مباحث این WEB API بررسی می کنیم.

برای تست یک پروزه بر روی یک سرور می توانید از ویندوز آژور استفاده کنید. آموزش آپلود کردن یک وب سایت را بر روی وبندوز آژور قبلا نوشته ایم، که می توانید از این بخش آن را مطالعه کنید. ( پیشنهاد می کنم حتما این مطلب را مطالعه کنید).

برای مشاهده آموزش بعدی WEB API از طریق این لینک اقدام نمایید.

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