In this article I will explain with an example, what is a Web API, why do we use it and how to use it in ASP.Net MVC.
This article will explain how to make a jQuery POST call to Web API 2 Controller’s method using jQuery AJAX in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

What is Web API?

ASP.Net Web API is a framework to build HTTP services which can be consumed by cross platform clients including desktops or mobile devices irrespective of the Browsers or Operating Systems being used.
ASP.Net Web API supports RESTful applications and uses GET, PUT, POST, DELETE verbs for client communications.
 
 

Model

The Model class consists of following properties.
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; }
}
 
 

Web API Controller

In order to add a Web API Controller you will need to Right Click the Controllers folder in the Solution Explorer.
Then, click on Add and next click on Controller and select WebAPI.
Now from the Add New Scaffold Item window, choose the Web API 2 Controller – Empty option as shown below.
What is Web API, why to use it and how to use it in ASP.Net MVC
 
Then give it a suitable name and click on Add button.
What is Web API, why to use it and how to use it in ASP.Net MVC
 
Next, you will need to register the Configuration for Web API in the Global.asax file so that the Web API is available for accessing on Web.
Now, Open Global.asax file and add the following line.
System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
 
Please refer the complete code as shown below.
public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}
 
Then, inside the Web API Controller, the Route attribute is specified which defines its Route for calling the Web API method and HttpPost attribute which signifies that the method will accept Http Post requests.
The Web API Controller consists of AjaxMethod method which accepts an object of PersonModel class as a parameter.
Finally, the DateTime property is set and PersonModel class object is returned.
public class AjaxAPIController : ApiController
{
    [Route("api/AjaxAPI/AjaxMethod")]
    [HttpPost]
    public PersonModel AjaxMethod(PersonModel person)
    {
        person.DateTime = DateTime.Now.ToString();
        return person;
    }
}
 
 

Controller

The Controller consists of following Action method.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 

View

The View consists of an HTML TextBox element and a Button.
Inside the View, the following jQuery CSS script file is inherited.
1. jquery.min.js
 
The Button has been assigned a jQuery click event handler.
When the Button is clicked, a jQuery AJAX call is made to the Web API 2 Controller’s method.
Note: For more details on calling jQuery AJAX in ASP.Net MVC, please refer my article ASP.Net MVC: jQuery AJAX and JSON Example.
 
Then, the URL for the jQuery AJAX call is set to the Web API 2 Controller’s method and the value of the TextBox is passed as parameter.
Finally, the appropriate message is displayed using JavaScript Alert Message Box.
@{
    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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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>
 
 

Screenshot

What is Web API, why to use it and how to use it in ASP.Net MVC
 
 

Downloads

Download Code