مشخصات مقاله
-
2237
-
0.0
-
14545
-
0
-
1
شروع 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 برای نمایش نتایج استفاده می کنیم.
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 اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 | 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;} }}<button></button> |
اضافه کردن یک 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 ایجاد می شود.
اگر این مدل باز نشده بود روی آن دو بار کلیک کنید تا باز شود و کد های زیر را با آن جا به جا کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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); } }}<button></button> |
برای اینکه بتواننیم مثال را ساده تر توضیح دهیم، محصولات درون یک آرایه، درون کلاس controller ذخیره شده است. واضح است که در یک مثال حقیقی شما باید از دیتابیس، کوئری اضافه کنید و یا از بعضی داده های منابع خارجی استفاده کنیم.
Controller دو متد تعریف می کند که محصولات را بر می گرداند:
متد GetAllProducts همه ی لیست های محصولات را در قالب IEnumerable بر می گرداند.
متد GetProduct یک محصول را بر اساس id آن جستجو می کند.
باید این را به یاد داشته باشید که در کار کردن با web API هر متد در controller مربوط به یک یا چند URL می باشد:
برای متد 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 جا به جا کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | < !DOCTYPE html >< 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 > 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); }); } <button></button> |
گرفتن لیستی از محصولات
برای گرفتن لیست محصولات، یک درخواست HTTP Get به /api/products ارسال می کنیم.
تابع getJSON مربوط به jQueryیک درخواست ajax ارسال می کند. پاسخ برگشتی شامل آرایه ای از object های JSON می باشد. تابع done زمانی دوباره فراخوانی (callback)می شود که درخواست با موفقیت انجام گیرد. در فرآیند callback ما DOM را با اطلاعات محصول به روز رسانی می کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 | $(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')); }); }); });<button></button> |
گرفتن یک محصول بر اساس id
برای گرفتن محصول بر اساس id ، یک درخواست HTTP GET به /api/products/id ارسال می کنیم که id همان ProductID می باشد.
1 2 3 4 5 6 7 8 9 10 11 | 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); }); }<button></button> |
ما همچنان از getJSON برای ارسال درخواست AJAX استفاده می کنیم ولی این بار ما ID را درون درخواست URL قرار می دهیم. پاسخ این درخواست JSON برای بازیابی تک محصول استفاده می شود.
اجرای برنامه
کلید F5 را بزنید تا web page به صورت زیر در بیاید.
برای بدست آوردن محصول بر اساس id، id را وارد کنید و کلید search را بزنید.
اگر شما id نامعتبر وارد کنید، سرور خطای HTTP بر می گرداند.
برای مشاهده کردن درخواست و پاسخ HTTP از کلید F12 استفاده می کنیم
وقتی شما با یک سرویس HTTP کار می کنید برای شما مفید خواهد بود که پیام های درخواست و پاسخ HTTP را ببینید. برای این کار می توانید از ابزار F12 Developer در IE9 استفاده کنید.در IE9 کلید F12 را بزنید تا ابزار باز شود. روی زبانه Network کلیک کنید و start capturing را بزنید.حالا به web page خودتان برگردید و کلید F5 را برای اجرای دوباره برنامه انتخاب کنید.IE ، ترافیک HTTP بین مرورگر و وب سرور را نمایش می دهد. خلاصه ی این نمایش به صورت زیر نشان داده شده است.
ورودی api/products/ را جستجو کنید. آن را انتخاب کنید و Go to detailed view کلیک کنید. در صفحه جزییات Tabهایی برای نمایش header و سوال و جواب وجود دارد.برای مثال اگر شما روی Request headers کلیک کنید می توانید مشاهده کنید کاربر درخواست application/json را در قالب header پذیرفته شده درخواست کرده است.
اگر شما روی پاسخ کلیک کنید می توانید مشاهده کنید چطور لیست محصولات به صورت JSON سریال شده است. مرورگرهای دیگر هم قواعد مشابهی دارند. ابزار مفید دیگر fiddler می باشد. شما از fiddler هم برای نمایش ترافیک HTTP و نیز برای ساختن درخواست PHTT که دسترسی کامل به header های HTTP در درخواست ها دارد.