WPF - REST Web API Consumption

When we are working in client machine based software or application development, the most crucial area is data communication from the client machine. Since we are not working here with web development, this means that the data, whether an entry or from a server, will eventually need to be transferred from client machine to server machine or from server machine to client machine. This also adds a sensitivity level to the client applications in terms of which data needs to be sent to the client machine or which data needs to be uploaded to the server machine. The answer to all this is either REST web API or SOAP web services.

Remember people usually use REST web API and SOAP web services interchangeably, however, both are very different from each other and have their own purpose in their respective areas. I recommend the REST vs SOAP stack overflow thread for better understanding. Here's another detailed explanation of REST vs SOAP.

Today, I shall be demonstrating the implementation of REST web API consumption in WPF applications.

Prerequisites

Following are some prerequisites before you proceed further in this tutorial:

Knowledge of REST web API development.
Knowledge of Windows Presentation Form (WPF).
Knowledge of T-SQL Programming
Knowledge of C# programming.
Knowledge of C# LINQ.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is developed in Microsoft Visual Studio 2015 Enterprise. For this tutorial, I have created a simple REST web API which is provided with the solution. I will not go into the details of how to develop a REST web API if anyone is interested then go to the link How to develop a REST web API.

Let's begin now.

Step 1

The targeted REST web API and its SQL server database script are provided in the solution. Simply execute the SQL server script into your SQL server.

Step 2

Then open the "RestWebApiServer" visual studio solution and open "Web.config" file and provide your SQL server configuration string.

Step 3

Then execute the project without debugging and leave it as it is.

Step 4

Now, Create a simple database with a table in your SQL Server for storing the data from WPF application on a client machine, I am using SQL Server 2014 as shown below:

USE [WpfWalkthrough]
GO
/****** Object: Table [dbo].[Register] Script Date: 3/27/2018 5:55:01 PM ******/
DROP TABLE [dbo].[Register]
GO
/****** Object: Table [dbo].[Register] Script Date: 3/27/2018 5:55:01 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Register](
[id] [int] IDENTITY(1,1) NOT NULL,
[fullname] [nvarchar](max) NOT NULL,
CONSTRAINT [PK_Register] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

In the above script, I have simply created my main database on an end-user client machine and I have created a simple table for storing information.

Step 5

You can see that your table is empty as shown below, also, notice that server database is also empty. Since I am using the same machine for both server and client machines, therefore, both databases are shown here in the same SQL server:

Step 6

Now, create a new WPF application project and name it "WPF Client Web API".

Step 7

Install "Microsoft.AspNet.WebApi.Client" & "Newtonsoft.Json" packages from "Tools->NuGet Package Manager->Manage NuGet Packages for Solutions" into your visual studio WPF project:

Step 8

Now, create "Helper_Code\Common\DAL.cs" file and replace following code in it:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WPF_Client_Web_API.Helper_Code.Common
{
public class DAL
{
public static int executeQuery(string query)
{
// Initialization.
int rowCount = 0;
string strConn = "Data Source=SQL Server Name(e.g. localhost);Database=SQL Database Name;User Id=SQL User Name;Password=SQL Password;";
SqlConnection sqlConnection = new SqlConnection(strConn);
SqlCommand sqlCommand = new SqlCommand();
try
{
// Settings.
sqlCommand.CommandText = query;
sqlCommand.CommandType = CommandType.Text;
sqlCommand.Connection = sqlConnection;
sqlCommand.CommandTimeout = 12 * 3600; //// Setting timeeout for longer queries to 12 hours.
// Open.
sqlConnection.Open();
// Result.
rowCount = sqlCommand.ExecuteNonQuery();
// Close.
sqlConnection.Close();
}
catch (Exception ex)
{
// Close.
sqlConnection.Close();
throw ex;
}
return rowCount;
}
}
}

The above piece of code will allow us to communicate with the SQL server in order to perform related queries. For this method to work, you need to replace the SQL Server database connection string with your own credentials and settings.

Step 9

Now, create "Helper_Code\Objects\RegInfoRequestObj.cs" & "Helper_Code\Objects\RegInfoResponseObj.cs" files and replace the following code in it:

Helper_Code\Objects\RegInfoRequestObj.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WPF_Client_Web_API.Helper_Code.Objects
{
public class RegInfoRequestObj
{
public string fullname { get; set; }
}
}

In the above code, I have simply created my request object, which I will convert to JSON format and post to the REST web API.

Helper_Code\Objects\RegInfoResponseObj.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WPF_Client_Web_API.Helper_Code.Objects
{
public class RegInfoResponseObj
{
public bool status { get; set; }
public int code { get; set; }
public string message { get; set; }
}
}

In the above code, I have simply created my response object, which I will be using to parse the server JSON format response into a simple object.

Step 10

Create "Model\BusinessLogic\HomeBusinessLogic.cs" file and replace following code in it:

using WPF_Client_Web_API.Helper_Code.Objects;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json;
using WPF_Client_Web_API.Helper_Code.Common;
namespace WPF_Client_Web_API.Model.BusinessLogic.Helper_Code.Common
{
public class HomeBusinessLogic
{
public static void saveInfo(string fullname)
{
try
{
// Query.
string query = "INSERT INTO [Register] ([fullname])" +
" Values ('" + fullname + "')";
// Execute.
DAL.executeQuery(query);
}
catch (Exception ex)
{
throw ex;
}
}
public static async Task<RegInfoResponseObj> PostRegInfo(RegInfoRequestObj requestObj)
{
// Initialization.
RegInfoResponseObj responseObj = new RegInfoResponseObj();
try
{
// Posting.
using (var client = new HttpClient())
{
// Setting Base address.
client.BaseAddress = new Uri("http://localhost:19006/");
// Setting content type.
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
// Setting timeout.
client.Timeout = TimeSpan.FromSeconds(Convert.ToDouble(1000000));
// Initialization.
HttpResponseMessage response = new HttpResponseMessage();
// HTTP POST
response = await client.PostAsJsonAsync("api/WebApi/PostRegInfo", requestObj).ConfigureAwait(false);
// Verification
if (response.IsSuccessStatusCode)
{
// Reading Response.
string result = response.Content.ReadAsStringAsync().Result;
responseObj = JsonConvert.DeserializeObject<RegInfoResponseObj>(result);
// Releasing.
response.Dispose();
}
else
{
// Reading Response.
string result = response.Content.ReadAsStringAsync().Result;
responseObj.code = 602;
}
}
}
catch (Exception ex)
{
throw ex;
}
return responseObj;
}
}
}

In the above code, I have created a simple wrapper method "SveInfo(...)" that will communicate with the SQL server using my previously created "executeQuery(...)" method from DAL (Data Access Layer) class. This "SaveInfo(...)" method will perform SQL server database insertion query and store the target data from the user into SQL server table as targeted.

The other method "PostRegInfo(...)" will use HttpClient class and establish a connection with REST web API by providing target REST web API URL & username/password (if any) settings and then convert our user input data into JSON format and post that data to the server via REST web API. The "PostRegInfo(...)" also receives a response from the server; i.e., whether it is successful or failed in the form of defined codes, statuses and messages.

Step 11

Now, create a new page "Views\HomePage.xaml" file and replace the following code in it:

<Page x:Class="WPF_Client_Web_API.Views.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPF_Client_Web_API.Views"
mc:Ignorable="d"
d:DesignHeight="480" d:DesignWidth="640"
Title="HomePage">
<Grid>
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.05*" />
<RowDefinition Height="*" />
<RowDefinition Height="0.05*" />
</Grid.RowDefinitions>
<Border Grid.Row="1"
Width=" 400"
Height="300"
BorderThickness="1"
BorderBrush="Black"
CornerRadius="20"
Opacity="1">
<Border.Background>
<ImageBrush ImageSource="/WPF Client Web API;component/Content/img/bg_2.png">
<ImageBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="1.5" ScaleY="1.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Border.Background>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width=" 400"
Height="300" >
<TextBlock Text="Enter Your Full Name"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0,70,0,0"
FontWeight="Bold"
FontSize="18"
Foreground="Black" />
<Border Width="220"
Height="50"
Margin="0,10,0,0">
<Border.Background>
<ImageBrush ImageSource="/WPF Client Web API;component/Content/img/text-box_bg.png"/>
</Border.Background>
<TextBox x:Name="txtName"
BorderThickness="0"
FontSize="18"
Width="220"
Height="50"
Background="{x:Null}"
Padding="10,12,0,0"
Foreground="Black"
HorizontalAlignment="Center"/>
</Border>
<Button x:Name="btnReg"
Content="Register"
Width="220"
Height="50"
Margin="0,10,0,0"
FontSize="18"
FontWeight="Bold"
Click="BtnReg_Click" />
</StackPanel>
</Border>
</Grid>
</DockPanel>
</Grid>
</Page>

In the above code, I have created a simple text box to enter the user's full name and a button which will store the information into the SQL server locally and post the data to REST web API.

Step 12

Open the "Views\HomePage.xaml\HomePage.xaml.cs" file and replace the following code in it:

using WPF_Client_Web_API.Helper_Code.Common;
using WPF_Client_Web_API.Helper_Code.Objects;
using WPF_Client_Web_API.Model.BusinessLogic.Helper_Code.Common;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPF_Client_Web_API.Views
{
/// <summary>
/// Interaction logic for HomePage.xaml
/// </summary>
public partial class HomePage : Page
{
public HomePage()
{
InitializeComponent();
}
private async void BtnReg_Click(object sender, RoutedEventArgs e)
{
try
{
// Initialization.
string fullname = this.txtName.Text, obj;
// Save Info to Local DB.
HomeBusinessLogic.saveInfo(fullname);
// Sending data to server.
RegInfoRequestObj requestObj = new RegInfoRequestObj { fullname = fullname };
RegInfoResponseObj responseObj = await HomeBusinessLogic.PostRegInfo(requestObj);
// Veerification.
if (responseObj.code == 600)
{
// Display Message
MessageBox.Show("You are Successfully! Registered", "Success", MessageBoxButton.OK, MessageBoxImage.Information);
}
else if (responseObj.code == 602)
{
// Display Message
MessageBox.Show("We are unable to register you at the moment, please try again later", "Fail", MessageBoxButton.OK, MessageBoxImage.Error);
}
}
catch (Exception ex)
{
// Display Message
MessageBox.Show("Something goes wrong, Please try again later.", "Fail", MessageBoxButton.OK, MessageBoxImage.Error);
Console.Write(ex);
}
}
}
}

In the above code, I have created the action method for the register button and performed a database insertion action to store the data into SQL server. I have also coded on-screen display messages to prompt the user about his/her action. Then I have posted the data to REST web API and displayed the on-screen messages accordingly.

Step 13

We need to attach the page inside the main window so, open the "MainWindow.xaml" file and replace the following in it:

<Window x:Class="WPF_Client_Web_API.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPF_Client_Web_API"
mc:Ignorable="d"
Title="WPF REST API Consumption" d:DesignHeight="480" d:DesignWidth="640">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Content/img/main_bg.jpg"/>
</Grid.Background>
<Frame x:Name="mainFrame"
NavigationUIVisibility="Hidden"/>
</Grid>
</Window>

In the above code, I have added a default background image taken from freepike and a frame which contains my page. The window will immediately navigate to the main page.

Step 14

Now, open the "MainWindow.xaml\MainWindow.cs" file and replace the following code in it:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPF_Client_Web_API
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += MainWindow_Loaded;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
this.mainFrame.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative));
}
}
}

The above piece of code will navigate the frame to my main page at the time of launching the main window of the WPF application.

Step 15

Execute the project and you will be able to see the following:

The user input data will be stored in the SQL server table on client machine & server machine as shown below. Since I am using the same machine for both server and client machines, therefore, both databases are shown here in the same SQL server:

Conclusion

In this article, you learned to post WPF application data from client machine to remote server machine using REST web API. You also learned to connect to SQL Server in WPF local client machine in order to store the data. You also learned about storing data from WPF applications directly into the SQL server by performing SQL queries at Data Access Layer of WPF application. You also learned to display success & error messages on WPF UI screen to prompt the user for his/her actions with your WPF application. You learned to capture the REST web API server response into WPF applications and display the messages on the screen accordingly. You learned to add a background to the main window and you learned to add a page within the window by using frame control.

Disclaimer

The background image used in this article has been taken from freepike.