Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Consuming WebAPI Using jQuery

0.00/5 (No votes)
4 Sep 2012 1  

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 call that WebAPI using a JSON object.

Step 1

Open Visual Studio 2010 and under Web select “ASP.NET MVC4 Web Application” and name it “HelloWebAPI” and click OK.

HelloWebAPI.bmp

Step 2

After clicking the OK button the New “ASP.NET MVC4 Project” window will open, in that select “WebAPI” and click OK.

WebAPI.bmp

Step 3

To create a new Model Class, go-to Solution Explorer (F4), right click on Model->Add->Class and name the class “Product” and paste the following code.

ModelClass.bmp

Step 4

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

Controller.bmp

Step 5

In “ProductsController.cs”, paste the following code:

ProductController.bmp

Step 6

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

IndexPage.bmp

Step 7

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

Output.bmp

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here