Calling the ASP.Net Web API With jQuery and JavaScript

Introduction

In this article, we will use jQuery and JavaScript for calling the Web API. We know that the ASP. Net Web API is a framework for creating Web APIs of the .NET Framework. In this article, we will use the ASP. Net Web API to create a Web API that returns a list of items.

Step 1

First we create the Web API project as in the following:

• Open Visual Studio 2012 and select "File" -> "New" -> "Project...".
• In the Template Window select Visual C# >Web and then select "ASP. Net MVC 4 Web Application". Change the name of this to "ExampleAPI" and click on the "OK" button.

In the New ASP. Net MVC 4 project window select "Web API" and click the "OK" button.

Step 2

Now we Add a Model

In the ASP. Net Web API the Model can be serialized automatically in Java Script Object Notation (JSON) and Extensible Markup Language (XML) format. We can use the model to represent the data in our application.
Now we will describe how to create the model in the application.

• In the Solution Explorer right-click on the "Model" folder
• From the context menu select "Add" and select the class

Step 3

We change the class name to "Item" and add this code to the class:

Step 4

Add the Controller

The Controller handles the HTTP requests. There are two types of controllers; they are:

HomeController: used for serving the HTML pages to the WebSite. It cannot have direct interaction with the Web API.
ValuesController: works as an example of the Web API.

Use the following to add the controller:

• In the Solution Explorer right-click on the "Controller" folder.
• Select "Add and Select Controller".
• Change the name of the controller to "Items".
• In the Template select "Empty API Controller".

Now add the following code to the Controller.