توضیحات و دانلود

فراخوانی Web API با استفاده از jQuery AJAX در ASP.Net MVC
0 0
فراخوانی Web API با استفاده از jQuery AJAX در ASP.Net MVC

با سلام در این مقاله، با مثال توضیح خواهیم داد که چگونه Web API 2 را با استفاده از jQuery AJAX در ASP.Net MVC Razor فراخوانی کنیم .
این مقاله نحوه ایجاد یک تماس POST جی کوئری به API Web API 2 Controller را با استفاده از jQuery AJAX در ASP.Net MVC Razor توضیح می دهد.
Web API چیست؟
 Web API یک چارچوب برای ایجاد سرویس HTTP است که می تواند توسط مشتریان متقابل از جمله desktop و دستگاه های تلفن همراه صرف نظر از مرورگرها یا سیستم عامل های مورد استفاده قرار گیرد.
 Web API از برنامه های RESTful پشتیبانی می کند و از فعل های GET، PUT، POST، DELETE برای ارتباطات مشتری استفاده می کند.
Model
در زیر یک کلاس Model به نام PersonModel با دو ویژگی یعنی نام و DateTime است.

public class PersonModel
{
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets DateTime.
    ///</summary>
    public string DateTime { get; set; }
}

Controller Web API
برای اضافه کردن یک Controller Web API شما باید روی پوشه Controllers در Solution Explorer راست کلیک کنید و روی Add و سپس Controller کلیک کنید.
اکنون از پنجره Add Scaffold ، گزینه Web API 2 Controller - Empty را انتخاب کنید، همانطور که در زیر نشان داده شده است.

سپس آن را نامگذاری کنید و روی OK کلیک کنید.

وظیفه بعدی ثبت پیکربندی Web API در فایل Global.asax است تا Web API در دسترس وب باشد.
برای انجام این کار فایل Global.asax را باز کنید و خط زیر را اضافه کنید.

System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);

اطمینان حاصل کنید که شما آن را به ترتیب زیر نشان داده اید.

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}

گام بعدی این است که کد نویسی Controller Web API است. Controller Web API شامل یک روش به نام AjaxMethod است که شی PersonModel را قبول می کند و ویژگی DateTime را با تاریخ و زمان فعلی به روز می کند و آن را بازمیگرداند.
این روش با ویژگی Route است که مسیر آن برای فراخوانی روش Web API و ویژگی HttpPost میباشد که نشان می دهد که این روش درخواست های HTTP Post را قبول می کند.

public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/AjaxMethod")]
    [HttpPost]
    public PersonModel AjaxMethod(PersonModel person)
    {
        person.DateTime = DateTime.Now.ToString();
        return person;
    }
}

Controller
حالا شما باید یک Controller را با یک View اضافه کنید. View برای فراخوانی روش Web API 2 Controller با استفاده از jQuery AJAX مورد استفاده قرار می گیرد.
Controller شامل یک روش خالی است که به سادگی View را می دهد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

View
گام بعدی این است که یک View  بدون Model برای Controller اضافه کنید.
View شامل یک عنصر HTML TextBox و یک دکمه است. دکمه رویداد کلیک روی جی کوئری تعیین شده است و هنگامیکه دکمه روی ارتباط جی کوئری AJAX کلیک می شود به روش Controller وب API 2 اعمال می شود.
URL برای ارتباط AJAX جی کوئری به روش Web API 2 Controller یعنی ie / api / AjaxAPI / AjaxMethod تنظیم شده است. مقدار TextBox به عنوان پارامتر انتقال داده می شود و پاسخ بازگشت با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <input type="text" id="txtName"/>
    <input type="button" id="btnGet" value="Get Current Time"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                var person = '{Name: "' + $("#txtName").val() + '" }';
                $.ajax({
                    type: "POST",
                    url: "/api/AjaxAPI/AjaxMethod",
                    data: person,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("Hello: " + response.Name + ".\nCurrent Date and Time: " + response.DateTime);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :