In this article, you will learn how to consume/use a Web API in ASP.NET MVC step by step.

This article is the second part of my ASP.NET MVC Web API series. In Part One, we discussed how to create a Web API and perform CRUD operations. You can find that article at the below link.

Consuming Web API

In this article, we have used the localhost for Web API and called the GET request.

Step by step implementation:

Step 1

Create a new ASP.NET MVC Web Application project called “ConsumeWebApiMVC”.

Consuming Web API In ASP.NET MVC

Consuming Web API In ASP.NET MVC

Consuming Web API In ASP.NET MVC

The default project files in the Solution Explorer look like the following.

Consuming Web API In ASP.NET MVC

Now, create a ViewModel called MemberViewModel inside the Models folder.

Consuming Web API In ASP.NET MVC

Right-click on Models folder. Go to Add --> New Item or press CTRL + SHIFT + A.

Consuming Web API In ASP.NET MVC

Consuming Web API In ASP.NET MVC

MemberViewModel.cs Code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace ConsumeWebApiMVC.Models
  7. {
  8. public class MemberViewModel
  9. {
  10. public int MemberID { get; set; }
  11. public string MemberName { get; set; }
  12. public string PhoneNumber { get; set; }
  13. }
  14. }

You can see HomeControllers inside the Controllers folder. Double-click on HomeControllers and add the following line for getting ViewModel listing in the controller.

  1. using ConsumeWebApiMVC.Models;

Now, add Microsoft.AspNet.webApi.Client from the NuGet library.

Right-click on References folder and select it.

Consuming Web API In ASP.NET MVC

Consuming Web API In ASP.NET MVC

Consuming Web API In ASP.NET MVC

Click OK as in the above dialog box to install Microsoft.AspNetWebApi.Client.

Consuming Web API In ASP.NET MVC

Click on "I Accept" to confirm the installation again.

You can see in the output window that the NuGet package is successfully installed.

Consuming Web API In ASP.NET MVC

After adding the NuGet package, now, let us code for consuming the Web API and calling the get method of all members' records.

  1. public ActionResult GetMembers()
  2. {
  3. IEnumerable<MemberViewModel> members = null;
  5. using (var client = new HttpClient())
  6. {
  7. client.BaseAddress = new Uri("http://localhost:52044/api/");
  9. //Called Member default GET All records
  10. //GetAsync to send a GET request
  11. // PutAsync to send a PUT request
  12. var responseTask = client.GetAsync("member");
  13. responseTask.Wait();
  15. //To store result of web api response.
  16. var result = responseTask.Result;
  18. //If success received
  19. if (result.IsSuccessStatusCode)
  20. {
  21. var readTask = result.Content.ReadAsAsync<IList<MemberViewModel>>();
  22. readTask.Wait();
  24. members = readTask.Result;
  25. }
  26. else
  27. {
  28. //Error response received
  29. members = Enumerable.Empty<MemberViewModel>();
  30. ModelState.AddModelError(string.Empty, "Server error try after some time.");
  31. }
  32. }
  33. return View(members);
  34. }
  35. var responseTask = client.GetAsync("member");

The following are the methods of HttpClient:

SR. NO. HTTP CLIENT METHODS DESCRIPTION
1 Client.GetAsync To send GET request.
2 Client.PostAsync To send POST request.
3 Client.PutAsync To send PUT request.
4 Client.DeleteAsync To send DELETE request.

Now, add a View for GetMembers. Right-click on GetMembers Action Method.

Consuming Web API In ASP.NET MVC

After clicking on "Add View" option, fill the Add View form.

Consuming Web API In ASP.NET MVC

Then, click the Add button to proceed further.

Now, you can see GetMembers.cshtml file created inside VIEWS --> HOME folder.

Consuming Web API In ASP.NET MVC

Now, let us check our Web API code by pressing F5.

http://localhost:50604/home/getmembers

Consuming Web API In ASP.NET MVC

In the next article, you will learn how to call Web API through jQuery.

Happy Coding.