Call web-api using ajax

Anjali Kumari

9y3.2kAJAX

Hi Every1

I am trying to call web-api using ajax call in ascx page please provide sample example by creating asp.net web application using web-api,and calling through ajax in ascx page

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vivek Kumar9y ago
Have a look into below links.

https://www.aspsnippets.com/Articles/Call-Consume-Web-API-using-jQuery-AJAX-in-ASPNet-MVC.aspx

http://www.c-sharpcorner.com/UploadFile/dacca2/web-api-with-ajax-understand-post-request-in-web-api/
Thiruppathi R9y ago
you can use like below
$.ajax({
               type: 'POST',
               contentType: 'application/json; charset=utf-8',
               data: JSON.stringify(model),
               dataType: 'json',
               cache: false,
               async: true,
               url: '/apiControllername/Methodname',
               success: function (result) {
                  //code
               },
               error: function (xhr, ajaxOptions, thrownError) {
                   console.log(xhr);
               },
           });
code
Rajkiran Swain9y ago
https://www.codeproject.com/Tips/769238/Call-Server-Side-Code-using-ASP-NET-AJAX-and-jQuer
Abhishek Sharma9y ago
Hi,

You can create the following 2 methods (SendJSON and GetRelativeURL) in a JS file in your project or can write it on the page itself.

SendJSON will be responsible for AJAX Post to your WEB API.
GetRelativeURL will be responsible for getting the Relative URL of your application.

FormData in the SendJSON method is the data you want to post to the WEB API.
function SendJSON(controller, action, formData, callback) {
var url = GetRelativeURL(controller, action);
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(formData),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (msg) {
if (callback) {
callback(msg.message);
} else {
alert("No Callback Defined but the job is done...!!!");
}
},
error: function (err)
{ alert(err.message); }
});
}

function GetRelativeURL(controller, action) {
var href = window.location.href.split('/');
return href[0] + '//' + href[2] + '/' + controller + '/' + action;
}