به کارگیری ASP.NET Web API با استفاده از jQuery بخش سوم از آموزش استفاده از Web API در MVC ، در این بخش سری به jQuery زدیم که چگونه عملیات Crud را در Web Api پیاده سازی کنیم.
زیاد ناراحت نشید که در هر سه مرحله ما تعریف Web API را برای شما قرار میدیم ، یکی از مهمترین مباحث این سه مقاله است.پس مطالعه چند باره آن بسیار میتونه کمک کنه.پس همراه ما باشید.
یادتون که نرفته Web API چیست ؟
زیاد ناراحت نشید که در هر سه مرحله ما تعریف Web API را برای شما قرار میدیم ، یکی از مهمترین مباحث این سه مقاله است.پس مطالعه چند باره آن بسیار میتونه کمک کنه.پس همراه ما باشید.
API = Application Programming Interface (رابط برنامه نویسی کاربردی) ASP.NET Web API یک فریمورک است، که برای به اشتراک گذاری و جمع آوری داده ها ایجاد شده است.
Web APIها سرویس های HTTP RESTful هستند که میتوانند توسط سرویس گیرنده های مختلفی مانند دسکتاپ، تبلت و موبایل به کار گرفته شوند.
به کارگیری ASP.NET Web API
در این مقاله، از Web API میزبان محلی (لوکال هاست) استفاده کرده و درخواست GET را فراخوانی کرده ایم. در ادامه فرآیند آن آمده است:
- پروژه ی ASP.NET MVC ایجاد کنید.
- یک فایل HTML به نام فایل Members.html اضافه کنید.
- دستور فراخوانی GET مربوط به jQuery AJAX را برای واکشی (fetch) داده ها از ASP.NET Web API بنویسید.
- سیستم یا فرآیند دو خطای مختلف خواهد داد.
- خطاها را با راه حل های ارائه شده در این مقاله رفع کنید.
- پروژه را اجرا کرده و خروجی را بررسی کنید.
مقالات بخش های بعدی از لینک های زیر در دسترس است :
- عملیات CRUD با ASP.NET Web API – بخش اول
- استفاده از Web API در ASP.NET MVC – بخش دوم
- عملیات CRUD با WebApi به زبان سی شارپ و ASP.NET MVC
پیاده سازی مرحله به مرحله
یک پروژه ی جدید ASP.NET Empty Website به نام “ConsumeWebApiFromJquery” ایجاد کنید.
بطور پیش فرض، پنجره ی Solution Explorer به این شکل است.
حالا، روی پروژه با عنوان “ConsumeWebApiFromJquery” راست کلیک کرده و ADD –> ADD NEW ITEM –> HTML Page را انتخاب کنید. به صفحه نامی مانند “Members.html” اختصاص دهید.
به فایل Members.html تغییر مکان داده و کد زیر را اضافه کنید.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.8.3%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0A%20%20%20%20%20%20%20%20%24(document).ready(function%20()%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22GET%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22http%3A%2F%2Flocalhost%3A52044%2Fapi%2Fmember%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentType%3A%20%22application%2Fjson%3B%20charset%3Dutf-8%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3A%20%22json%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(response)%20%7B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FClear%20all%20previous%20list%20of%20members%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23MemberList%22).empty()%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FDisplay%20Asp.Net%20Web%20API%20response%20in%20console%20log%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FYou%20can%20see%20console%20log%20value%20in%20developer%20tool%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fby%20pressing%20F12%20function%20key.%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(response)%3B%20%20%0A%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Variable%20created%20to%20store%20%3C%2Fp%3E%0A%3Cli%3EMemeber%20Detail%3C%2Fli%3E%0A%3Cp%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ListValue%20%3D%20%22%22%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FVariable%20created%20to%20iterate%20the%20json%20array%20values.%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20i%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FGeneric%20loop%20to%20iterate%20the%20response%20arrays.%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(i%20%3D%200%3B%20i%20%3C%20response.length%3B%20%2B%2Bi)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ListValue%20%2B%3D%20%22%3C%2Fp%3E%0A%3Cli%3E%22%20%2B%20response%5Bi%5D.MemberName%20%2B%20%22%20---%20%22%20%2B%20response%5Bi%5D.PhoneNumber%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FAdd%2FAppend%20the%20formatted%20values%20of%20ListValue%20variable%20into%20ID%20called%20%22MemberList%22%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23MemberList%22).append(ListValue)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20failure%3A%20function%20(response)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(response.responseText)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Failure%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20error%3A%20function%20(response)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(response)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Error%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
</head>
<body>
<h2>C-Sharpcorner Member List</h2>
<!--Member List will appened here -->
<ul id="MemberList">
</ul>
</body>
</html>
حال، F5 را برای اجرای پروژه به کارگیری ASP.NET Web API فشار دهید.
با خطاهای زیر در بخش Developer Tools مواجه خواهید شد.
خطای ۱
OPTIONS http://localhost:52044/api/member 405 (Method Not Allowed).
Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:50702’ is therefore not allowed access.
برای حذف خطاهای بالا، فایل Web.Config نیاز به بروز رسانی دارد.فایل Web.Config پروژه ی به کارگیری ASP.NET Web API خود را با کدهای زیر بروز رسانی کنید.
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, X-Your-Extra-Header-Key" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
</system.webServer>
حال، F5 را برای اجرای مجدد پروژه فشار دهید.
خطای ۲
OPTIONS http://localhost:52044/api/member 405 (Method Not Allowed).
Failed to load http://localhost:52044/api/member: Response for preflight does not have HTTP ok status.
برای حذف خطاهای بالا، فایل Global.asax.cs نیاز به؛ بروز رسانی دارد. فایل Global.asax.cs پروژه ی WebAPI خود را با کدهای زیر بروز رسانی کنید.
protected void Application_BeginRequest()
{
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
Response.End();
Response.Flush();
}
}
حال، میتوانید ابزار توسعه دهنده (developer tools) را در صفحه ی خروجی مشاهده کنید. بهترین خروجی را در بخش گزارش کنسول (console log) خواهید داشت.
حالا، میتوانید در مرورگر مشاهده کنید که مرورگر شما با خروجی زیر آماده است.
خروجی پروژه به کارگیری ASP.NET Web API
جهت دانلود سورس عملیات CRUD با WebApi به زبان سی شارپ و ASP.NET MVC میتوانید از این لینک استفاده کنید.و جهت دانلود سورس MVC از این لینک استفاده کنید.
دیدگاه‌ها