Part 2 - How to retrieve data from the database in the ASP.NET Web API using Http Client

Introduction

In this post, I am going to explain How to retrieve data from the database in the ASP.NET Web API using Http Client.

This post is 2nd part of a series called Getting Started with ASP.NET WEB API

Step-1: Create another project (class library) (we will use this for separate the model classes to another project)

Right Click on Solution from Solution Explorar > Add > New Project > Class Library > Enter Name (here "Entities") > Add.
Here I am going to add an another (class library) project for separate models classes to another project from our previously created WebAPI project. So, we can reuse the model classes to multiple projects.

Steps for "Entities" project

Step - 2 : Add EF DbContext Generator File.

Go to Solution Explorer > Add > Add New > Select "EF DbContext Generator" > Enter Name > OK.
Open .tt file and change value of const string inputFile = @"../WebApiExample/MyModel.edmx"; and then Right click on the .tt file and Run Custom Tool. Here "WebApiExample" is the project name and "MyModel.edmx" is the model name.

Steps for Web API Application(Service)

Here in this example, the Web API application (service) is "WebApiExample".

Step-3 : Delete MyModel.tt file exist under MyModel.edmx of WebApi projects.

Go to Solution Explorer > Expend Model file (here "MyModel.edmx") > Find "MyModel.tt" file delete.

Step-4: Change Custom Tool Namespace value of MyModel.Context.tt under MyModel.edmx

Go to solution Explorer > select MyModel.Context.tt under MyModel.edmx > Right click and Go to Properties > Enter "Custom Tool Namespace" value (our class library project name) (here "Entities") > Save.

Step-5: Add Reference of newly created project (Entities) into our WebApi Application.

Go to Solution Explorer > Right Click on References > Add Reference... > Select Project (here "Entities") under Solution > OK.

Steps for Web Application (Client Application)

Here in this example, the client application is "WebApiClient.Web".

Step-6: Add Reference of newly created project (Entities) into our Web Application (Client Application).

Go to Solution Explorer > Right Click on References > Add Reference... > Select Project (here "Entities") under Solution > OK.

Step-7: Add new action into your controller for get the view (page) for fetch data from web api and Show.

Here I have added "Part2" Action into "Home" Controller. Please write this following code

public ActionResult Part2()
{
    List<Employee> list = new List<Employee>();
    HttpClient client = new HttpClient();
    var result = client.GetAsync("http://localhost:1963/api/Example").Result;
    if (result.IsSuccessStatusCode)
    {
        list = result.Content.ReadAsAsync<List<Employee>>().Result;
    }
    return View(list);
}

Step-8: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Check "Create strongly typed view" > Select Model class > > Add.
Complete View

@model IEnumerable<Entities.Employee>

@{
    ViewBag.Title = "Part2";
}

<h2>Part2 - Fetch data from WebAPI using HTTPClient</h2>
<div id="updatePanel" style="width:90%; padding:10px; margin:0 auto;">
    <table class="table table-responsive table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var i in Model)
            {
                <tr>
                    <td>@i.FirstName @i.LastName</td>
                    <td>@i.EmailID</td>
                    <td>@i.City</td>
                    <td>@i.Country</td>
                </tr>
            }
        </tbody>
    </table>
</div>

Here I have done small changes in the layout page for looks the application good.

Step-9: Run Application.

Here we need to start both application as the client application will consume services from web api application.

Download Live Demo