Consume Web API for CRUD operation

In the previous section, we created Web API with Get, Post, Put and Delete methods that handles HTTP GET, POST, PUT and DELETE requests respectively. Here, we will see how to consume (access) Web API for CRUD operation.

Web API can be accessed in the server side code in .NET and also on client side using JavaScript frameworks such as jQuery, AnguarJS, KnockoutJS etc.

Here, we will consume our Web API (created in the previous section) in the following environments:

Consume Web API in ASP.NET MVC
Consume Web API in AngularJS

Consume Web API in ASP.NET MVC

To consume Web API in ASP.NET MVC server side we can use HttpClient in the MVC controller. HttpClient sends a request to the Web API and receives a response. We then need to convert response data that came from Web API to a model and then render it into a view.

The following figure illustrates consuming Web API in ASP.NET MVC.

Consume Web API at Server side ASP.NET MVC

Note: AngularJS or any other JavaScript framework can be used in MVC view and can access Web API directly from the view using AJAX. We have taken ASP.NET MVC just to demonstrate how to access Web API from server side code in case you do not use any JavaScript framework.

Consume Web API in AngularJS

Web API can be accessed directly from the UI at client side using AJAX capabilities of any JavaScript framework such as AngularJS, KnockoutJS, Ext JS etc.

The following figure illustrates consuming Web API in client side framework using AJAX.

Learn how to consume Get, Post, Put and Delete methods of Web API in ASP.NET MVC and Angular in the next coming sections.