آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

شروع Asp.net Web API2

دوره های مرتبط با این مقاله

شروع Asp.net Web API2

HTTP تنها یک بستر برای web pageها نیست بلکه بستری قدرتمند برای ساخت API است که در معرض سرویس ها و داده ها می باشد. HTTP هم آسان و هم انعطاف پذیر و نیز در همه جا قابل دسترس است. تقریبا تمام پلت فرم هایی که شما فکر می کنید، یک کتابخانه HTTP دارند. سرویس های HTTP قابلیت دسترسی به یک محدوده از مرورگرها، موبایل ها و برنامه های کاربردی سنتی را دارند. Asp.net Web API یک framework برای ایجاد Web API ها می باشد. در این مقاله ما از Asp.net Web API برای ساخت یک Web API استفاده می کنیم.

نرم افزار های مورد استفاده در این مقاله :

Visual Studio 2013

Web API 2

ساخت یک پروژه Web API

در این مقاله ما از Asp.net Web API برای ساخت یک Web API استفاده می کنیم و یک لیستی از محصولات را بر می گردانیم. همچنین از JQuery برای نمایش نتایج استفاده می کنیم.

ok

Visual studio را باز کنید و گزینه new project از صفحه start و یا از منو file را انتخاب کنید و یک پروژه ایجاد نمایید.

در قسمت Templates ، installed templates را کلیک کنید تا visual c# باز شود. در زیر visual c#, web را انتخاب کنید. در این قسمت .net web application را انتخاب کنید. نام پروژه را ProductApp قرار دهید و ok را انتخاب کنید.

گزینه empty را انتخاب کنید و در زیر گزینه Add folders and core references for ، web API را علامت بزنید و ok را انتخاب کنید.

اضافه کردن Model

یک model ،یک object است که داده ها را در application نشان می دهد. Web APIمی تواند مدل شما را به صورت خودکار به json، xml و یا فرمت های دیگر serial کند و سپس داده serial شده را در قالب یک پیام HTTP در آورد. اکثر مرورگرها قادر هستند xml یا json را تفسیر کنند. باید گفت کاربر فرمت درخواستی خود را با پذیرفتن header در پیام درخواستی HTTP نشان می دهد.

خب، حالا مقاله خود را با ساختن یک مدل ساده که یک محصول را نمایش می دهد ادامه می دهیم.

اگر solution explorer هنوز نمایش داده نشده بود، روی view کلیک کنید و solution explorer را انتخاب کنید. در solution explorer روی فولدر models کلیک راست کنید. روی گزینه Add رفته و Class را انتخاب کنید.

اسم کلاس را product بگذارید و ویژگی های زیر را به کلاس product اضافه کنید.

namespace ProductsApp.Models
{
   public class Product
   {
       public int Id { get;set;}
       public string Name { get;set;}
       public string Category { get;set;}
       public decimal Price { get;set;}
   }
}

اضافه کردن یک Controller

در Web APIیک Controller یک object است که درخواست های HTTP را مدیریت می کند. ما یک controller داریم که قابلیت برگرداندن یک لیست از محصولات و یا یک محصول با id خاص را دارد.

نکته:

اگر شما از Asp.net MVC استفاده کرده باشید حتما با controllerها آشنایی دارید. Controllerهای web API شبیه به controllerهای MVC است اما از کلاس ApiController به جای کلاس controller ارث بری می کند.

در solution explorer بر روی فولدر controller کلیک راست کنید و نشانه گر را روی Add ببرید و سپس controller را انتخاب کنید.

در پنجره Add Scaffold، web API controller-empty را Add کنید.

در پنجره Add controller، نام controller را productsController انتخاب وAdd کنید.

با scaffolding کردن، فایلی به اسم ProductsController.cs درون فولدر Controllers ایجاد می شود.

اگر این مدل باز نشده بود روی آن دو بار کلیک کنید تا باز شود و کد های زیر را با آن جا به جا کنید.

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;
 
namespace ProductsApp.Controllers
{
   public class ProductsController : ApiController
   {
       Product[] products = new Product[]
       {
           new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
           new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
           new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
       };
       public IEnumerableGetAllProducts()
       {
           return products;
       }
       public IHttpActionResult GetProduct(int id)
       {
           var product = products.FirstOrDefault((p) =>p.Id == id);
           if (product == null)
           {
               return NotFound();
           }
           return Ok(product);
       }
   }
}

برای اینکه بتواننیم مثال را ساده تر توضیح دهیم، محصولات درون یک آرایه، درون کلاس controller ذخیره شده است. واضح است که در یک مثال حقیقی شما باید از دیتابیس، کوئری اضافه کنید و یا از بعضی داده های منابع خارجی استفاده کنیم.

Controller دو متد تعریف می کند که محصولات را بر می گرداند:

متد GetAllProducts همه ی لیست های محصولات را در قالب IEnumerable بر می گرداند.

متد GetProduct یک محصول را بر اساس id آن جستجو می کند.

باید این را به یاد داشته باشید که در کار کردن با web API هر متد در controller مربوط به یک یا چند URL می باشد:

متد های controller
URI
GetAllProducts
/api/products
GetProduct
/api/products/id

برای متد GetProduct، id در URL در نقش placeholder ظاهر می شود. برای مثال، برای دسترسی به محصولی با id برابر 5، URL به صورت api/products/5 در خواهد آمد.

فراخوانی web API با استفاده از javascript و jQuery

در این قسمت، ما یک صفحه HTML که از AJAX استفاده می کند برای فراخوانی web API اضافه می کنیم. ما از jQuery برای فراخوانی و همچنین برای به روز رسانی صفحه بر اساس نتایج استفاده می کنیم.

در solution explorer روی پروژه کلیک راست کنید و new item را add کنید.

در پنجره add new item ، گره web در زیر visual c# را انتخاب کنید و بعد HTML Page را انتخاب کنید و نام آن را Index.html بگذارید.

تمامی کد های زیر را با محتویات Index.html جا به جا کنید.

< !DOCTYPE html >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
                        < title >Product App

< body >
                        < div >
                        < h2 >All Productsh2 >
                        < ul id="products" / >
   < div >
                        < div >
                        < h2 >Search by IDh2 >
                        < input type="text" id="prodId" size="5" / >
                        < input type="button" value="Search" onclick="find();" / >
                        < p id="product" / >
  
                        < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js" >

   < script >
       var uri = 'api/products';
       $(document).ready(function () {
           // Send an AJAX request
           $.getJSON(uri)
               .done(function (data) {
                   // On success, 'data' contains a list of products.
                   $.each(data, function (key, item) {
                       // Add a list item for the product.
                       $('< li >', { text: formatItem(item) }).appendTo($('#products'));
                   });
               });
       });
       function formatItem(item) {
           return item.Name + ': $' + item.Price;
       }

       function find() {
           var id = $('#prodId').val();
           $.getJSON(uri + '/' + id)
               .done(function (data) {
                   $('#product').text(formatItem(data));
               })
               .fail(function (jqXHR, textStatus, err) {
                   $('#product').text('Error: ' + err);
               });
       }
   


گرفتن لیستی از محصولات

برای گرفتن لیست محصولات، یک درخواست HTTP Get به /api/products ارسال می کنیم.

تابع getJSON مربوط به jQueryیک درخواست ajax ارسال می کند. پاسخ برگشتی شامل آرایه ای از object های JSON می باشد. تابع done زمانی دوباره فراخوانی (callback)می شود که درخواست با موفقیت انجام گیرد. در فرآیند callback ما DOM را با اطلاعات محصول به روز رسانی می کنیم.

  $(document).ready(function () {
       // Send an AJAX request
       $.getJSON(apiUrl)
           .done(function (data) {
               // On success, 'data' contains a list of products.
               $.each(data, function (key, item) {
                   // Add a list item for the product.
                   $('< li >', { text: formatItem(item) }).appendTo($('#products'));
               });
           });
   });

گرفتن یک محصول بر اساس id

برای گرفتن محصول بر اساس id ، یک درخواست HTTP GET به /api/products/id ارسال می کنیم که id همان ProductID می باشد.

   function find() {
       var id = $('#prodId').val();
       $.getJSON(apiUrl + '/' + id)
           .done(function (data) {
               $('#product').text(formatItem(data));
          })
           .fail(function (jqXHR, textStatus, err) {
               $('#product').text('Error: ' + err);
           });
   }

ما همچنان از getJSON برای ارسال درخواست AJAX استفاده می کنیم ولی این بار ما ID را درون درخواست URL قرار می دهیم. پاسخ این درخواست JSON برای بازیابی تک محصول استفاده می شود.

اجرای برنامه

کلید F5 را بزنید تا web page به صورت زیر در بیاید.

web page

برای بدست آوردن محصول بر اساس id، id را وارد کنید و کلید search را بزنید.

آموزش Web api

اگر شما id نامعتبر وارد کنید، سرور خطای HTTP بر می گرداند.

آموزش Web api

برای مشاهده کردن درخواست و پاسخ HTTP از کلید F12 استفاده می کنیم

وقتی شما با یک سرویس HTTP کار می کنید برای شما مفید خواهد بود که پیام های درخواست و پاسخ HTTP را ببینید. برای این کار می توانید از ابزار F12 Developer در IE9 استفاده کنید.در IE9 کلید F12 را بزنید تا ابزار باز شود. روی زبانه Network کلیک کنید و start capturing را بزنید.حالا به web page خودتان برگردید و کلید F5 را برای اجرای دوباره برنامه انتخاب کنید.IE ، ترافیک HTTP بین مرورگر و وب سرور را نمایش می دهد. خلاصه ی این نمایش به صورت زیر نشان داده شده است.

آموزش Web api

ورودی api/products/ را جستجو کنید. آن را انتخاب کنید و Go to detailed view کلیک کنید. در صفحه جزییات Tabهایی برای نمایش header و سوال و جواب وجود دارد.برای مثال اگر شما روی Request headers کلیک کنید می توانید مشاهده کنید کاربر درخواست application/json را در قالب header پذیرفته شده درخواست کرده است.

آموزش Web api

اگر شما روی پاسخ کلیک کنید می توانید مشاهده کنید چطور لیست محصولات به صورت JSON سریال شده است. مرورگرهای دیگر هم قواعد مشابهی دارند. ابزار مفید دیگر fiddler می باشد. شما از fiddler هم برای نمایش ترافیک HTTP و نیز برای ساختن درخواست PHTT که دسترسی کامل به header های HTTP در درخواست ها دارد.

  • 9461
  •    1240
  • تاریخ ارسال :   1395/01/31

دانلود PDF دانلود فیلم آموزشی 2 دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
شروع Asp.net Web API2
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .