Introduction
This is the first "Web API with AJAX" article series presentation. This article provides a basic understanding of the Web API and concepts of AJAX in web applications. We can say that the Web API is the latest communication technology of the Microsoft platform. If we look back at Microsoft's communication technology, we will find that communication started by holding the hand of remoting techniques. Then the concept of Web Services was introduced, and SOAP messages began to send messages back and forth.
Web API with AJAX
It has a few limitations, such as only being able to be consumed by HTTP and being able to host on IIS. Then WCF took entries with valuable features. The limitation of IIS has gone, and people started to host their applications in various environments. Then new problems began. It's a programmer's nightmare to configure endpoints and consume them through a proper endpoint (If you are a good developer, you may ignore the line you have read just now). Then Microsoft introduced the concept of the Web API in MVC platforms on top of the traditional ASP.NET.
The Web API is a Swiss knife with many features and capabilities. It has simplified the concept of communication. And supports true RESTful features. The most beautiful advantage of the Web API is (almost) any client can consume it. Whether your client is built using C#, JavaScript, or another language running on various platforms and devices does not matter. We will not continue our explanation much more because this is not core to a Web API article. So, let's start our coding session by assuming you have a basic understanding of HTTP POST, GET, PUT, and DELETE verbs to talk about Web API applications.
Per the title, we will understand how to consume the Web API service using a POST method. If you are new in this environment (read Web API and RESTful service) and still want to read, the following paragraph is for you.
When discussing RESTful services, we need to consider every object a resource. For example, we want to read the employee information whose id is 5, so the information is nothing but a resource. If I want to get the picture whose name is "flower", then I think of the picture as nothing but a resource that a few HTTP verbs can consume. In a broad sense, consume implies save, retrieve, update, and delete. Now, our beloved CRUD operation can match with the HTTP verb. Here is the mapping sequence:
- POST: Create
- GET: Read
- PUT: Update
- DELETE: delete
So, the idea is that when we perform a create operation, we will use the POST verb with respect to the RESTful service, and in this article, we will use the jQuery ajax() function for the post-operation.
As per the concept of any service application, we must implement both a client and a server. Here we will implement the client using JavaScript and JQuey. So, let's start to write the code.
Implement client code to consume Web API
This is the client-side implementation to consume the Web API service. We are loading jQuery from the local server and using the ajax() function.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
var person = new Object();
person.name = $('#name').val();
person.surname = $('#surname').val();
$.ajax({
url: 'http://localhost:3413/api/person',
type: 'POST',
dataType: 'json',
data: person,
success: function (data, textStatus, xhr) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
</head>
<body>
<form id="form1">
Name :- <input type="text" name="name" id="name" />
Surname:- <input type="text" name="surname" id="surname" />
<input type="button" id="Save" value="Save Data" />
</form>
</body>
</html>
Please note the formation of the data we collect from the HTML form. Since we have configured the ajax() method to communicate with the JSON data, we need to form the data in object format. So, this is the implementation of the client-side code.
Create Web API to serve RESTful service
In this section, we will create the Web API application. We are skipping the basic Web API creation part, hoping you know. Here is the implementation of Web API.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace WebApplication1.WebAPI
{
public class person
{
public string name { get; set; }
public string surname { get; set; }
}
public class personController : ApiController
{
[HttpPost]
public string Post( person obj)
{
return obj.name + obj.surname;
}
}
}
At first, we created a model class (person) very similar to the client object we will send from the client application. The person controller contains the Posr() method specified with the HttpPost attribute. This implies that the POST verb can consume this action/method. We are halting the execution flow and checking the form data to the Web API.
In the Web API, we are getting the value we sent from the client end.
In the successful callback function, we just print this value to the console. Here is a sample output.
Use the post() function of the jQuery library
Here is another way to perform the POST operation. We can use the post() function to perform the post-operation. The post() function is nothing but a shorthand implementation of the ajax() function.
Have a look at the following code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
<head runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Save").click(function () {
var person = new Object();
person.name = $('#name').val();
person.surname = $('#surname').val();
$.post('http://localhost:3413/api/person', person, function (data) {
console.log(data);
});
});
});
</script>
</head>
<body>
<form id="form1">
Name :- <input type="text" name="name" id="name" />
Surname:- <input type="text" name="surname" id="surname" />
<input type="button" id="Save" value="Save Data" />
</form>
</body>
</html>
Here is the output of the post() method.
Conclusion
This is the first lap of our Web API Ajax journey. Today we have learned the POST method and its practical implementation of that. In a future article, we will learn all types of HTTP verbs and a few concepts of Web API. Happy learning.
Cesar EduardoPosted May 27, 2019, 11:52 PM
Can I make a POST request with AJAX to an API that is not located in localhost ?
Subhash KokarePosted Sep 21, 2018, 12:08 AM
This code is not working
Manickam PalanigounderPosted Aug 31, 2018, 11:52 AM
Nice Article
prashanth kumarPosted Apr 21, 2017, 3:25 AM
HI I have seen some video related to calling webapi using ajax call it explained Same origin principle, if both client and api on same domain then only we can call the service methods or else we have to use JSONP, but in your post you just called the service as normal action method by speicifying complete path of the service. how it is worked without using JSONP, please clarify me
Prasad pPosted Feb 22, 2017, 11:51 PM
Is it necessary that, i need to a create a mvc web appln for consuming the data in restful web api service? i need to connect to sql db from a RESTful service which will be consumed by jquery, html controls and display in a aspx page.
Midhun TpPosted Aug 12, 2016, 4:41 AM
Hi, I got the solution :)
Midhun TpPosted Aug 12, 2016, 1:12 AM
Hi Sourav, I have a doubt. How can we access the object in web api if the variable "person" is in the format, var person = { "person": { "name": "myname", "surname": "mysurname"} }; Actually I have posted my question in the below link. Can you please check it - http://www.c-sharpcorner.com/Forums/issue-with-posted-json-data-to-web-api
Midhun TpPosted Aug 11, 2016, 5:07 AM
Nice one..really helped
Innocent UjataPosted Aug 9, 2016, 8:52 AM
The code looks okay but it not working on my system. why pls? I'm using visual studio 2013 ultimate, I downlaod the jquery-1.7.1.js file but the save button is not responding at all. any help pls
Sandeep MallahPosted May 17, 2016, 1:40 AM
Dear All, how can we secure web api call.??
Alexander Nana OwusuPosted Jan 8, 2016, 1:21 PM
Great Tutorial, really gave me some insight on a project.Thanks.
Debasis SahaPosted Oct 9, 2015, 4:29 PM
Nice One
Ajeet MishraPosted Sep 18, 2015, 6:41 AM
good one
Dorababu MekaPosted Jul 4, 2014, 6:46 AM
Hi how can I have an input type file in the sane page so that when I submit the form the image should save in the application folder