به کارگیری ASP.NET Web API با استفاده از jQuery – بخش سوم

۳۵ بازديد
۱۳ مهر ۱۳۹۷
آموزش MVC, آموزش طراحی وب

به کارگیری ASP.NET Web API با استفاده از jQuery بخش سوم از آموزش استفاده از Web API در MVC ، در این بخش سری به jQuery زدیم که چگونه عملیات Crud را در 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 بنویسید.
سیستم یا فرآیند دو خطای مختلف خواهد داد.
خطاها را با راه حل‏ های ارائه شده در این مقاله رفع کنید.
پروژه را اجرا کرده و خروجی را بررسی کنید.

مقالات بخش های بعدی از لینک های زیر در دسترس است :

پیاده سازی مرحله به مرحله

یک پروژه ‏ی جدید ASP.NET Empty Website به نام “ConsumeWebApiFromJquery” ایجاد کنید.

به کارگیری ASP.NET Web API

بطور پیش فرض، پنجره ‏ی Solution Explorer به این شکل است.

به کارگیری ASP.NET Web API

حالا، روی پروژه با عنوان “ConsumeWebApiFromJquery” راست کلیک کرده و ADD –> ADD NEW ITEM –> HTML Page را انتخاب کنید. به صفحه نامی مانند “Members.html” اختصاص دهید.

به کارگیری Web API

به فایل Members.html تغییر مکان داده و کد زیر را اضافه کنید.

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8" />  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function () {  
             
                $.ajax({  
                    type: "GET",  
                    url: "http://localhost:52044/api/member",  
                    contentType: "application/json; charset=utf-8",  
                    dataType: "json",  
                    success: function (response) {  
  
                        //Clear all previous list of members  
                        $("#MemberList").empty();  
  
                        //Display Asp.Net Web API response in console log   
                        //You can see console log value in developer tool   
                        //by pressing F12 function key.  
                        console.log(response);  
  
  
                        // Variable created to store <li>Memeber Detail</li>  
                        var ListValue = "";  
  
                        //Variable created to iterate the json array values.  
                        var i;  
  
                        //Generic loop to iterate the response arrays.  
                        for (i = 0; i < response.length; ++i) {  
                            ListValue += "<li>" + response[i].MemberName + " --- " + response[i].PhoneNumber  
                        }  
  
                        //Add/Append the formatted values of ListValue variable into ID called "MemberList"  
                        $("#MemberList").append(ListValue);  
                    },  
                    failure: function (response) {  
                        alert(response.responseText);  
                        alert("Failure");  
                    },  
                    error: function (response) {  
                        alert(response);  
                        alert("Error");  
                    }  
                });  
        });  
    </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) خواهید داشت.

به کارگیری Web API

حالا، می‏توانید در مرورگر مشاهده کنید که مرورگر شما با خروجی زیر آماده است.

خروجی پروژه به کارگیری ASP.NET Web API

به کارگیری Web API

جهت دانلود سورس عملیات CRUD با WebApi به زبان سی شارپ و ASP.NET MVC میتوانید از این لینک استفاده کنید.و جهت دانلود سورس MVC از این لینک استفاده کنید.