Consuming WebAPI Using jQuery

Introduction

ASP.NET Web API is a framework for building and consuming HTTP services that can be reached by a broad range of clients including browsers and mobile devices. In this sample I will show how you can build Web APIs that support browser clients and can be easily called using jQuery.

Requirement

  • Visual Studio 2010 SP1, Visual Web Developer 2010 SP1 or Visual Studio 2012
  • ASP.NET MVC4

Getting Started

The following simple steps show you how to create a WebAPI and calling that WebAPI using a JSON object.

Step 1

Open Visual Studio 2010 and under Web select "ASP.NET MVC4 Web Application" and name it as "HelloWebAPI" and click ok.

ASP.NET-MVC4-Web-Application.jpg

Step 2

After clicking the ok button the New "ASP.NET MVC4 Project" Window will open, in that select "WebAPI" and click ok.

ASP.NET-MVC4-Project.jpg

Step 3

To create a new Model Class go to Solution Explorer (F4), right-click on Model->Add->Class and name the Class as "Product" and paste the following code:

model-class-ASP.NET-MVC4.jpg

Step 4

To create a new controller right-click on the Controller Add -> Controller; the "Add Controller" dialog will open, name the Controller "ProductsController" then in the Scaffolding options Template select "Empty API Controller" and click Add button.

Add- Button-Empty-API-Controller.jpg

Step 5

In "ProductsController.cs" paste the following code:

Product-controller-asp.net-mvc4.jpg

Step 6

In Solution Explorer expand the Views folder and open Index.cshtml, replace with the following code:

Solution-Explorer-expand-Views-folder.jpg

Step 7

Click on Start debugging (F5), the following result will show in the browser:

result-asp.net-mvc4.jpg