Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • Web API - Get Started
  • What is Web API?
  • Create Web API Project
  • Test Web API
  • Web API Controller
  • Configure Web API
  • Web API Routing
  • Parameter Binding
  • Action Return Type
  • Data Formats
  • Media Type Formatters
  • Web API Filters
  • Create Web API for CRUD
  • Implement Get Method
  • Implement Post Method
  • Implement Put Method
  • Implement Delete Method
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

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:

  1. Consume Web API in ASP.NET MVC
  2. 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.

Consume Web API at Client Side

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

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.