Consuming Restful Services In Xamarin.Forms - Part Two

Introduction

This article is the second part of my article - Consuming Restful Services in Xamarin.Forms Part 1

In the first part, we called a fake RESTFul service, got some data from that service and displayed it in a List View. Now, in this article we will continue where we left off and add/delete some data that we displayed in the previous part.

Code and output of part 1

XAML

<ListView x:Name="Post_List">
      <ListView.ItemTemplate>
          <DataTemplate>
              <TextCell Text="{Binding title}" Detail="{Binding body}"></TextCell>
          </DataTemplate>
      </ListView.ItemTemplate>

  </ListView>

Code 

using System.Collections.Generic;
using System.Net.Http;
using Xamarin.Forms;
using Newtonsoft.Json;
using System.Collections.ObjectModel;

namespace XamarinApp3
{

    public class Post
    {
        public int userId { get; set; }
        public int id { get; set; }
        public string title { get; set; }
        public string body { get; set; }
    }


    public partial class MainPage : ContentPage
    {
        private const string url = "https://jsonplaceholder.typicode.com/posts";
        private HttpClient _Client = new HttpClient();
        private ObservableCollection<Post> _post;

        public MainPage()
        {

            InitializeComponent();

        }

        protected override async void OnAppearing()
        {
            var content = await _Client.GetStringAsync(url);
            var post = JsonConvert.DeserializeObject<List<Post>>(content);
            _post = new ObservableCollection<Post>(post);
            Post_List.ItemsSource = _post;
            base.OnAppearing();
        }
    }
}

Output

Now, let's start by modifying our XAML and add two buttons for "Add" and "Delete" operations respectively in our page.

XAML 

<StackLayout>
    <StackLayout Orientation="Horizontal">
        <Button Text="Add" Clicked="OnAdd"></Button>
        <Button Text="Delete" Clicked="OnDelete"></Button>
    </StackLayout>

<ListView x:Name="Post_List">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding title}" Detail="{Binding body}"></TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>

</ListView>
</StackLayout>

Output

Here, you can see that both the buttons are shown on your View. Now, add the functionality on click event of both the buttons.

Add data

 Code 

private async void OnAdd(object sender, System.EventArgs e)
{
    var post = new Post() { title = "Title" + DateTime.Now.Ticks, body = "Body"};
    _post.Insert(0, post);
    var content = JsonConvert.SerializeObject(post);
   await _Client.PostAsync(url, new StringContent(content));
}

Explanation

Here, you can see that we created an object of post class and set its title and body. Now, we are going to add this line ( Move towards the second line). This code will add data in our observable collection. And in the third line, we serialize the post before saving any data to the server. And in the last line, we have sent the post async request to our http client with the end point and content. This line will post the given data to the endpoint.

Output

Here, you will see that after clicking on the "Add" button, our data is posted to the server and shown in our List View.

Note

*As we are using a fake RESTFul service, the data which we save through our Add button is not persistent. When we come back to our application, this data is not here.

Delete Data

Now, move towards the functionality of Delete.

Code 

private async void OnDelete(object sender, System.EventArgs e)
        {
            var post = _post[0];
            _post.Remove(post);
           await _Client.DeleteAsync(url + "/" + post.id);
        }

Explanation

In the first line, we are pointing to first value in our list view. In the second line, this first data is removed from our list. In the third line, we send the Delete async request to our URL. This URL is completed by adding the id of post which we want to delete.

Output

Just see the first value in our list view then click on "Delete" button. You will see that this data is deleted from the list.

Output by clicking on delete button



Here, you can see that after clicking the Delete button, the first value is deleted.