Performing CRUD Operations In Xamarin.Forms

Introduction

In this article, we are going to learn about the CRUD (create, read, update, delete) operations in Xamarin.Forms. At the end of the article, you will be able to perform the basic functionalities with the SQLite database.

Targeted Audience

People with basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin installed and with a SQLite connection set up.

CRUD operations are the four basic functions in the SQLite storage. Although, whatever the storage is, you have to perform these basic operations. Let’s see how to implement these operations in Xamarin.Forms using simple steps. Don’t forget, the SQLite connection must be built before performing these operations.

For learning purposes, I am going to create a contact list which contains the Name and Address of a person. Starting with creating a folder with the name “Models”, include a class in your Models folder with the name “Contacts”.

Performing CRUD Operations In Xamarin.Forms

The class will become our table in the database with the same name. Create three properties - full Id, Name, and Address in the class. These will be our columns in the database. Remember to make Id the primary key. Use the following code.

C# Code

using SQLite;
using System;
using System.Collections.Generic;
using System.Text;
namespace PracApp1.Models
{
public class Contacts
{
private int id;
[PrimaryKey][AutoIncrement]
public int Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string address;
public string Address
{
get { return address; }
set { address = value; }
}
}
}

Now, let’s make the UI. Simply, create a stack layout and add two entries which will be used as Name and Address inputs. Also, add a "Save" button to save the data. Then, add a listview and give a name to it. This will be used to add reading or showing the data. Add a text cell in the DataTemplate tag with the properties of Text and Detail. Bind the text with “Name” and detail with the “Address” property, which are in the Contact List.

In the next step, create a Menu Item with a click event, ListItem_Delete. This will delete the selected item from the list. This is all we have to do for the UI. This will look like this.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage"
x:Name="ContentPage1">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<Entry x:Name="Name"></Entry>
<Entry x:Name="Address"></Entry>
<Button Text="Save" Clicked="Save"></Button>
<ListView x:Name="ContactList" IsVisible="True">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Detail="{Binding Address}" Text="{Binding Name}">
<TextCell.ContextActions>
<MenuItem Text="Delete Item" Clicked="ListItem_Delete" CommandParameter="{Binding .}">
</MenuItem>
</TextCell.ContextActions>
</TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

Create Operation

Now, in the .cs file, create a connection string. Using this connection, create the table of your Contacts list in the MainPage() function. Then, create an ObservableCollection list of your Contacts class, and in the "Save" event, insert async data from the input fields using their names.

Read Operation

For reading the data, make an object of your table in the database. And, set the item source of your UI list to this list of data.

C# Code

using PracApp1.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using SQLite;
using PracApp1.Connections;
namespace PracApp1
{
public partial class MainPage : ContentPage
{
SQLiteAsyncConnection conn = DependencyService.Get<ISqlConnection>().Connection();
public MainPage()
{
InitializeComponent();
this.BindingContext = this;
conn.CreateTableAsync<Contacts>();
ReadData();
}
private ObservableCollection<Contacts> cList;
public ObservableCollection<Contacts> CList
{
get { return cList; }
set { cList = value; }
}
private void Save(object sender, EventArgs e)
{
conn.InsertAsync(new Contacts() { Name = Name.Text, Address = Address.Text });
ReadData();
}
public void ReadData()
{
var list = conn.Table<Contacts>().ToListAsync().Result;
CList = new ObservableCollection<Contacts>(list);
ContactList.ItemsSource = CList;
}
}
}

Now, you can add the data and also see it in a list like below.

Delete Operation

To delete the list item, go to your delete event and receive the sender as “mi” variable. The variable name can be anything you desire. Importantly, you have to specify the CommandParameter as your class item; otherwise, it will not be deleted because it will consider that as a whole Menu Item including other things. Call the ReadData function to update the list.

C# Code

private void ListItem_Delete(object sender, EventArgs e)
{
var mi = sender as MenuItem;
var item = mi.CommandParameter as Contacts;
conn.DeleteAsync(item);
ReadData();
}

Update Operation

The case is almost the same in "Update" as in the "Delete" operation. The difference is just the UpdateAsync function. For learning purposes, I am updating my list item with the static values. These values can be dynamic depending upon what you like.

As you can see in the picture above, the record is updated successfully.

C# Code

private void Update(object sender, EventArgs e)
{
var mi = sender as MenuItem;
var item = mi.CommandParameter as Contacts;
item.Name= "Martin";
item.Address = "New York";
conn.UpdateAsync(item);
ReadData();
}

Summary

Having better understanding with the CRUD operations helps you to generate a well-designed and controlled database. I hope this article gives you a way to do so in a proper manner.