Creating Web API and consuming it through HTML Clients – Part I

Howdy Readers,

ASP.NET Web API is very powerful and in demand technology.

Today, we would be dealing with creating ASP.NET Web API and consume it through HTML client. Due to length and depth of this article, I have divided it into two parts. In part I, our focus will be to create ASP.NET Web API project and configure all necessary stuff. Whereas in part II, we will be looking at how to consume this API.

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

Adding an ASP.NET Web API controller to your application is almost exactly like adding an ASP.NET MVC controller. You can either add a Web API in the existing MVC project or can create a separate Web API project.

Let’s start creating a new Web API project.

Start Visual Studio (I have used VS 2012 in this example) and follow the steps below:

  1. Select New Project and choose ASP.NET MVC 4 Web Application from the list of project templates. Name the Project “WebApiDemo”.
  2. In the Project Template dialog, select Web API and click Ok
Creating Web API project

Creating Web API project

As soon as you click Ok, a default web api project is created. In the controller folder a file named ValuesController.cs is created. This is the default Web API service fie added. Either you can modify this or you can add a new API Controller .

In the Global.asax file a default routing map is also added in the RegisterRoutes function (Just press F12 on RegisterRoutes function. It will take you to the function definition)

You can modify this file to reflect any configuration changes you want to make for the application. The default contains a single route as an example to get you started.

Let us create our own Product API Controller instead of modifying the existing ValuesController.cs

Before creating the Product Api controller we will be creating the Product model and Product Manager classes. These classes will be used in the Product API controller to perform CRUD (Create, Read, Update, and Delete) operations.

Product Model

In Solution Explorer, right-click the Models folder then add the below class named Product as shown in below screen caps.

Creating a model class in ASP.NET Web API project

Creating a model class in ASP.NET Web API project

Creating a model class in ASP.NET Web API project

Creating a model class in ASP.NET Web API project

Similarly add the following Interface and class in the same Model folder.

Now we are ready to create our Product Web API controller. Before adding the new API controller delete the file named ValuesController.cs within Controllers folder from the project.

Add a Web API Controller

In Solution Explorer, right-click the Controllers folder. Select Add and then select Controller.

Creating a controller class in ASP.NET Web API project

Creating a controller class in ASP.NET Web API project

In the Add Controller dailog, name the controller ProductController. In the Template drop-down list, select Empty API Controller and click Add.

Adding a model class in ASP.NET Web API project

Adding a model class in ASP.NET Web API project

Add the following code in the ProductController.cs class

Congratulation! at this point of time we have successfully created our Web API project. In our next article we would be covering how we can consume this Web API.

What do you Think ?

Dear Reader,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.

Happy Learning 🙂