Reader Level:
ARTICLE

Consume ASP.Net Web API Using HttpClient in WPF

Posted by Raj Kumar Articles | WPF July 04, 2013
In this article you will learn how to consume a Web API using HttpClient in WPF.
  • 0
  • 0
  • 15461

In this article you will learn how to consume a Web API using HttpClient in WPF.

What is HttpClient? It provides a base class for sending HTTP requests and receiving HTTP responses from a resource identified by a URI.

Getting Started

Start Visual Studio 2012 and create a WPF Application and provide a name of the project.

img1.jpg

Image 1.

Now right-click on the solution and click on "Manage NuGet Packages".

img2.jpg

Image 2.

Search for HttpClient in the online packages and click "Install" for "Microsoft HTTP Client Libraries".

img3.jpg

Image 3.

After installing you will see that there are a couple of assemblies that have been added to the project references.

img4.jpg

Image 4.

This is my Web API URL:

http://localhost:12789/api/employee

And this is the API result set.

img5.jpg

Image 5.

img6.jpg

Image 6.

Now add one more reference using the NuGet package manager.

img7.jpg

Image 7.

Now let's consume this Web API in the Data Grid and write code for adding a new record, searching and deleting.

First of all add a data grid control and a few labels, textboxes and buttons.

<Window x:Class="ConsumeWebAPIUsingHttpClientInWPF.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="500" Width="525" Loaded="Window_Loaded">

    <Grid Margin="10,0,2,289">

        <DataGrid HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="grdEmployee" />

        <Label Content="Id" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="18,203,0,-67"/>

        <Label Content="Name" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="18,245,0,-103"  />

        <Label Content="Address" HorizontalAlignment="Left" VerticalAlignment="Top"  Margin="18,276,0,-136" />

        <Label Content="Designation" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="18,314,0,-176"  />

        <Button Content="Delete" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="342,203,0,-70" x:Name="btnDelete" Click="btnDelete_Click" />

        <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="125,203,0,-56" x:Name="txtId"  />

        <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="125,234,0,-92" x:Name="txtName"  />

        <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="125,279,0,-136" x:Name="txtAddress"  />

        <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="125,316,0,-176" x:Name="txtDesignation"  />

        <Button Content="Search" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" x:Name="btnSearch" Click="btnSearch_Click" Margin="250,203,0,-59" Height="Auto"  />

        <Button Content="Add New" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" x:Name="btnAdd" Click="btnAdd_Click" Margin="125,363,0,-219" Height="Auto"/>

 

    </Grid>

</Window>

Now let's work on the code behind. First we will fetch the all employees list from the Web API.

Add these are the namespaces.

using System.Net.Http;
using System.Net.Http.Headers;

private void BindEmployeeList()
{
    HttpClient client = new HttpClient();
    client.BaseAddress =
new Uri("http://localhost:12789/");
    
//client.DefaultRequestHeaders.Add("appkey", "myapp_key");
    client.DefaultRequestHeaders.Accept.Add(
      
new MediaTypeWithQualityHeaderValue("application/json"));
 
    
HttpResponseMessage response = client.GetAsync("api/employee").Result;
    if (response.IsSuccessStatusCode)
    {
        
var employees = response.Content.ReadAsAsync<IEnumerable<Employee>>().Result;
        grdEmployee.ItemsSource = employees;

    }
    
else
    {
        
MessageBox.Show("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase);
    }

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

    BindEmployeeList();

}

img8.jpg

Image 8.

Now let's add a new employee.

private void btnAdd_Click(object sender, RoutedEventArgs e)

{

    HttpClient client = new HttpClient();

    client.BaseAddress = new Uri("http://localhost:12789/");

 

    client.DefaultRequestHeaders.Accept.Add(

       new MediaTypeWithQualityHeaderValue("application/json"));           

    var employee = new Employee();

 

    employee.Id = int.Parse(txtId.Text);

    employee.Name = txtName.Text;

    employee.Address = txtAddress.Text;

    employee.Designation = txtDesignation.Text;

 

    var response = client.PostAsJsonAsync("api/employee", employee).Result;

 

    if (response.IsSuccessStatusCode)

    {

        MessageBox.Show("Employee Added");

        txtId.Text = "";

        txtName.Text = "";

        txtAddress.Text = "";

        txtDesignation.Text = "";

        BindEmployeeList();

    }

    else

    {

        MessageBox.Show("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase);

    }

}

img9.jpg

Image 9.

Fill in the information and click the "Add New" button.

img10.jpg

Image 10.

You will see that the record has been added to the data grid.

Now let's work on deleting a record.

private void btnDelete_Click(object sender, RoutedEventArgs e)

{

    HttpClient client = new HttpClient();

    client.BaseAddress = new Uri("http://localhost:12789/");

 

    var id = txtId.Text.Trim();

 

    var url = "api/employee/" + id;

 

    HttpResponseMessage response = client.DeleteAsync(url).Result;

 

    if (response.IsSuccessStatusCode)

    {

        MessageBox.Show("User Deleted");

         BindEmployeeList();

     }

    else

    {

        MessageBox.Show("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase);

    }

}

img11.jpg

Image 11.

Enter an id in the id TextBox and click the delete button.

img12.jpg

Image 12.

As you can see record number 7 has been deleted.

Now let's work on the search part.

private void btnSearch_Click(object sender, RoutedEventArgs e)

{

    HttpClient client = new HttpClient();

    client.BaseAddress = new Uri("http://localhost:12789/");

 

    client.DefaultRequestHeaders.Accept.Add(

        new MediaTypeWithQualityHeaderValue("application/json"));

 

    var id = txtId.Text.Trim();

 

    var url = "api/employee/" + id;

 

    HttpResponseMessage response = client.GetAsync(url).Result;

 

    if (response.IsSuccessStatusCode)

    {
       
var employees = response.Content.ReadAsAsync<Employee>().Result;
       
MessageBox.Show("Employee Found : " + employees.Name + " " + employees.Address + " " + employees.Designation);
    }
    else
    {
        
MessageBox.Show("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase); 

    }

}

img13.jpg

Image 13.

Enter an id in the text box and click the "Search" button.

Article Extensions
Contents added by Raj Kumar on Jul 04, 2013
i forgot to mention this, you will get this error. so do the following thing.

"'System.Net.Http.HttpContent' does not contain a definition for
'ReadAsAsync' and no extension method 'ReadAsAsync' accepting a
first argument of type 'System.Net.Http.HttpContent' could be
found (are you missing a using directive or an assembly reference?)"

Solution:

Add a reference to System.Net.Http.Formatting.dll. This assembly is also available in the C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 4\Assemblies folder.

The method ReadAsAsync is an extension method declared in the class HttpContentExtensions, which is in the namespace System.Net.Http in the library System.Net.Http.Formatting.
COMMENT USING

Trending up