Web API With AJAX: Understanding POST Request in Web API

Sourav Kayal
Nov 30, 2013
358.7k
0
4
Article

Web API with AJAX: Understand POST request in Web API

This is the first presentation of the "Web API with AJAX" article series. 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 that began the use SOAP messages to send messages back and forth. It has a few limitations, such as only being able to be consumed by HTTP and able to host on IIS. Then WCF took entry with useful features. The limitation of IIS has gone and people started to host their application 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 then you may ignore the line that you have read just now) .Then Microsoft introduced the concept of the Web API in MVC platforms on top of the traditional ASP.NET.

We can describe the Web API as 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 , it can be consumed by (almost) any type of client. It does not matter whether your client is built using C# or JavaScript or by some other language running on various platforms and devices. 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 that you have a basic understanding of POST, GET , PUT and DELETE verbs of HTTP to talk about Web API applications.

As per the title, we will understand how to consume the Web API service using a POST method. If you are very new in this environment (read Web API and RESTful service) and still want to read , then the following paragraph is for you.

When we talk about RESTful services we need to think of each and every object as being a resource. Say 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 of whose name is "flower" then I think of the picture as nothing but a resource that can be consumed by a few HTTP verbs. 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 well 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 need to 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>

$(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>

Name :- <input type="text" name="name" id="name" />

Surname:- <input type="text" name="surname" id="surname" />

</form>

</body>

</html>

Please note the formation of the data that we are collecting 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 that. 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) that is very similar to the client object that we will send from the client application. The person controller contains the Posr() method that is specified with the HttpPost attribute. This implies that this action/method can be consumed by the POST verb. We are halting the execution flow and checking the form data to the Web API.

Web-API1

In the Web API we are getting the value that we have sent from the client end.

Web-API2

In the successful callback function we are just printing this value to the console. Here is sample output.

Web-API3

Use post() function of jQuery library

Here is another way to perform the POST operation. We can use the post() function to perform the post operation. Basically the post() function is nothing but a shorthand implementation of the ajax() function.

Have a look at the following code.