Consuming ASP.NET Web API REST Service In ASP.NET MVC Using HttpClient

After clicking Add button, it will show in the Window. Specify the Controller name as Home with suffix Controller. Now, let's modify the default code of Home controller .

Our hosted Web API REST Service includes these two methods, as given below.

• GetAllEmployees (GET )
• GetEmployeeById (POST ) which takes id as input parameter

We are going to call GetAllEmployees method which returns the all employee details ,The hosted web api REST service base URL is http://192.168.95.1:5555/ and to call GetAllEmployees from hosted web API REST service, The URL should be Base url+api+apicontroller name +web api method name as following http://192.168.95.1:5555/api/Employee/GetAllEmployees.

In the preceding url

• http://localhost:56290 Is the base address of web API service, It can be different as per your server.
• api It is the used to differentiate between Web API controller and MVC controller request .
• Employee This is the Web API controller name.
• GetAllEmployees This is the Web API method which returns the all employee list.

After modifying the code of Homecontroller class, the code will look like the following.

Homecontroller.cs

using ConsumingWebAapiRESTinMVC.Models;  
using Newtonsoft.Json;  
using System;  
using System.Collections.Generic;  
using System.Net.Http;  
using System.Net.Http.Headers;  
using System.Threading.Tasks;  
using System.Web.Mvc;  
  
namespace ConsumingWebAapiRESTinMVC.Controllers  
{  
    public class HomeController : Controller  
    {  
        //Hosted web API REST Service base url  
        string Baseurl = "http://192.168.95.1:5555/";      
        public async Task<ActionResult> Index()  
        {  
            List<Employee> EmpInfo = new List<Employee>();
            using (var client = new HttpClient())  
            {  
                //Passing service base url  
                client.BaseAddress = new Uri(Baseurl);  
                client.DefaultRequestHeaders.Clear();  
                //Define request data format  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                //Sending request to find web api REST service resource GetAllEmployees using HttpClient  
                HttpResponseMessage Res = await client.GetAsync("api/Employee/GetAllEmployees");  
                //Checking the response is successful or not which is sent using HttpClient  
                if (Res.IsSuccessStatusCode)  
                {  
                    //Storing the response details recieved from web api   
                    var EmpResponse = Res.Content.ReadAsStringAsync().Result;  
                    //Deserializing the response recieved from web api and storing into the Employee list  
                    EmpInfo = JsonConvert.DeserializeObject<List<Employee>>(EmpResponse);  
                }  
                //returning the employee list to view  
                return View(EmpInfo);  
            }  
        }  
    }  
}

I hope, you have gone through the same steps and understood about the how to use and call Web API REST service resource using HttpClient .

Step 6. Create strongly typed View

Now, right click on Views folder of the created application and create strongly typed View named by Index by choosing Employee class to display the employee list from hosted web API REST Service, as shown in the following image.

Now, click on Add button. It will create View named index after modifying the default code. The code snippet of the Index View looks like the following.

Index.cshtml

@model IEnumerable<ConsumingWebAapiRESTinMVC.Models.Employee>  
@{  
    ViewBag.Title = "www.compilemode.com";  
}
<div class="form-horizontal">
    <hr />  
    <div class="form-group">  
        <table class="table table-responsive" style="width:400px">  
            <tr>  
                <th>  
                    @Html.DisplayNameFor(model => model.Name)  
                </th>  
                <th>  
                    @Html.DisplayNameFor(model => model.City)  
                </th>               
            </tr>
            @foreach (var item in Model) {  
                <tr>  
                    <td>  
                        @Html.DisplayFor(modelItem => item.Name)  
                    </td>  
                    <td>  
                        @Html.DisplayFor(modelItem => item.City)  
                    </td>                   
                </tr>  
            }
        </table>  
    </div>  
</div>

The preceding View will display all employees list . Now, we have done all the coding.

Step 7. Run the Application

After running the Application, the employee list from hosted web API REST service will look like this.

I hope, from the above examples, you have learned how to consume Web API REST Service in ASP.NET MVC using HttpClient.

Note

• Download the Zip file of the Published code to learn and start quickly.
• This article is just a guideline on how to consume Web API REST Service in ASP.NET MVC application using HttpClient.
• In this article, the optimization is not covered in depth; do it as per your skills.

Summary

I hope, this article is useful for all readers. If you have any suggestions, please mention them in the comments section.

Read more articles on ASP.NET

• Pass Dynamically Added HTML Table Records List To Controller In ASP.NET MVC
• Get Return Value From Stored Procedure Using Dapper ORM In ASP.NET MVC