Article for JSON Parser

STEP 1:

Go to File > New > Project > Cross Platform > Cross Platform App (Xamarin.Forms or Native).

Then check Xamarin.Forms and Shared Project and click Ok.

STEP2:

Install the following Nuget Packages .

In order to install them, right click on Project > Manage Nuget Packages for the solution > Browse):

1. Newtonsoft.Json
2. SQLite.Net.Async-PCL
3. SQLite.Net.Core-PCL
4. Xam.Plugin.Connectivity.
5. Microsoft.Net.Http

STEP 3:

This is the URL which contains the JSON data. Click it to view the data.
http://rallycoding.herokuapp.com/api/music_albums

Now if you notice the data has 5 objects namely :
i).image.
ii).title.
iii).artist.
iv).thumbnail_image
v).url

So with the Help of json2csharp site, it can help you to generate C# code out of JSON to create an Object/Model Class.
use this link to it

Now we have to create our Object/Model Class. Let’s call it Items.cs
:

using System;

using System.Collections.Generic;

using System.Text;

namespace MySimpleList

{

   class Items

   {

       public string image { get; set; }

       public string title { get; set; }

       public string artist { get; set; }

       public string thumbnail_image { get; set; }

       public string url { get; set; }

   }

}

STEP 4 :

Now since we are going to make an Internet/ Http Request we need to provide permissions in our project.

In android:
We need to go the MySimpleList.Android and we navigate to Properties>AndroidManifest.xml and you add this internet permission.

<uses-permission android:name="android.permission.INTERNET" />.

In IOS:
You go to MySimpleList.IOS then info.plist and add the following in the source code.

<key>NSAppTransportSecurity</key>

<dict>

   <key>NSAllowsArbitraryLoads</key><true/>

</dict>

for more information you can visit this page and research more .

STEP 5

Here we are going to ask for an Http Request which will come with JSON data, after that then we deserialize the data and we attach or bind the data to our ListView. Here in Xamarin.Forms no need of sweating too much, this action is done in few steps.

Below is the MainPage.xaml.cs class

using Newtonsoft.Json;

using Plugin.Connectivity;

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Diagnostics;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace MySimpleList

{

 public partial class MainPage : ContentPage

 {

       public int Count = 0;

       public short Counter = 0;

       public int SlidePosition = 0;

       string heightList;

       int heightRowsList = 90;

       private const string Url = "http://rallycoding.herokuapp.com/api/music_albums";

       // This handles the Web data request

       private HttpClient _client = new HttpClient();

       public MainPage()

   {

     InitializeComponent();

           // We call the OnGetList from Here

           OnGetList();

   }

protected async void OnGetList()

 {

   if (CrossConnectivity.Current.IsConnected)

       {

         try

          {

                   //Activity indicator visibility on

                   activity_indicator.IsRunning = true;

                   //Getting JSON data from the Web

                   var content = await _client.GetStringAsync(Url);

                   //We deserialize the JSON data from this line

                   var tr = JsonConvert.DeserializeObject<List<Items>>(content);

                   //After deserializing , we store our data in the List called ObservableCollection

                   ObservableCollection<Items> trends = new ObservableCollection<Items>(tr);

                   //Then finally we attach the List to the ListView. Seems Simple :)

                   myList.ItemsSource = trends;

                   //We check the number of Items in the Observable Collection

                   int i = trends.Count;

                   if (i > 0)

                   {

                       //If they are greater than Zero we stop the activity indicator

                       activity_indicator.IsRunning = false;

                   }

                   //Here we Wrap  the size of the ListView according to the number of Items which have been retrieved

                   i = (trends.Count * heightRowsList);

                   activity_indicator.HeightRequest = i;

               }

               catch (Exception ey)

               {

                   Debug.WriteLine("" + ey);

               }

           }

       }

   }

}

STEP 6:

Open MainPage.xml and to Edit it.

Now, in order to make a list of items, we need a ListView and an activity indicator which shows that data is loading in the ListView.

Let's put this in our 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:MySimpleList"

            x:Class="MySimpleList.MainPage">

   <!-- Activity Indicator-->

   <ActivityIndicator VerticalOptions="Center" HorizontalOptions="Center" x:Name="activity_indicator" Color="#4D7EE1" />

   <!-- ListView-->

   <ListView x:Name="myList" HasUnevenRows="true">

       <ListView.ItemTemplate>

           <DataTemplate>

               <ViewCell>

                   <!-- Here we make a Horizontal orientation with the help of StackLayout-->

                   <StackLayout Orientation="Horizontal" Margin="5" HeightRequest="90">

                       <Image Source="{Binding image}" WidthRequest="100" HeightRequest="200" Aspect="AspectFit" />

                       <StackLayout VerticalOptions="Center">

                           <Label Text="{Binding title}" TextColor="#1C5AD8" />

                       </StackLayout>

                       <Image HorizontalOptions="EndAndExpand" HeightRequest="20" WidthRequest="20" Source="more_icon.png" />

                   </StackLayout>

               </ViewCell>

           </DataTemplate>

       </ListView.ItemTemplate>

   </ListView>

</ContentPage>

Now we have inserted a ListView, and inside it, and attempted to bind it with data. All you have to know is that if you want a customized binded list in Xamarin.forms, just you have to include the following in the ListView:

<ListView.ItemTemplate>,<DataTemplate>,<ViewCell>

Xamarin.Forms MVVM: SQLite Sample for Beginners (C# - Xaml)

Introduction:

This article will show you step by step guide on how to use an SQLite database with a Xamarin.Forms application in Android and iOS. 

Requirements:

• This article source code is prepared by using Visual Studio Community for Mac (7.4). And it is better to install latest visual studio updates from here.
• This sample project is Xamarin.Forms PCL project and tested in Android emulator and iOS simulators.
• Storage: Used SQLite.Net-PCL Nuget package version is 3.1.1
• Validation: Used FluentValidation Nuget Package version is V7.5.2.

Description:

In this article we will take a sample that would helpful to understand SQLite operations in Xamarin.Forms and sample project will have below functionality.

• Add Contact (AddContact, AddContactViewModel): Insert new contact details to SQLite database. Also will have a option to "View All Contacts" if contacts exist in database.
• Contact List (ContactList, ContactListViewModel): Read all contacts from SQLite and displaying contact list. Also will have a option to delete all/add the contact.
• Contact Details (DetailsPage, DetailsViewModel): Read specific contact from SQLite and showing full information for the same. Also will have a option to delete/update the contact.

So this article can explain you below concepts:

1. How to create Xamarin.Forms PCL project with Visual Studio for Mac?
   2. How to setup SQLite and perform SQLite operations in Xamarin.Forms PCL project?
   3. How to validate Contact Details with Fluent Validation before data insert?
2. How to use default MVVM to create ViewModels in Xamarin.Forms app?
3. How to bind Contact Views with ViewModels?

1. How to create Xamarin.Forms PCL project using Visual studio for Mac?

First we need to create the new Xamarin.Forms project. 

• Launch Visual Studio for Mac.
• On the File menu, select New Solution.
• The New Project dialog appears. In the left pane Multiplatform > App > Xamarin.Forms > Blank Forms App and click on Next.

• Enter your App Name (Ex: SQLiteSample). Select Target Platforms to Android & iOS and Shared Code to Portable Class Library  after that click on Next button.

• You can choose your project location like below and Create new project.

And project structure will be.

• SQLiteSample: It is for PCL shared code.

• SQLiteSample.Droid: It is for Android.

• SQLiteSample.iOS: It is for iOS.

2. How to setup SQLite and perform SQLite operations in Xamarin.Forms PCL project?

After creating Xamarin.Forms application, we need a managed way to access SQLite database. For that we need to add relevant nuget package name is SQLite.Net-PCL to PCL, Android & iOS projects. SQLite.Net-PCL is a .NET wrapper around SQLite that will allow us to access the native SQLite functionality from a Xamarin.Forms PCL or shared project.

So Right on your PCL project Packages and click on Add Packages.

After that Add Packages dialog window will open, search for "SQLite.Net-PCL" and click on Add Package like below.

After that above package will add to your Xamarin.PCL project like below.

Also please add above package to SQLiteSample.Droid and SQLiteSample.iOS projects by following same above steps like SQLiteSample PCL project. And make sure SQLite.Net-PCL same version package should add to Android and iOS project Packages folder like below.

We completed the SQLite setup for our xamarin forms project. So it is time to perform all SQLite(Create, Read, Update, Delete, Insert) operations. But before that even tough the "SQLite.Net-PCL" package will provide us the functionality of manipulating the SQLite database, it can’t automatically initialize the database connection object as the location of the database file varies on different platforms. So in order to solve this issue we will use dependency service to load the database file in connection object and please follow below few steps.

Step 1: Create Interface (ISQLite) in PCL.

We are following default MVVM design pattern. And here we will place helpers in Helpers folder. So right click on your project name SQLiteSample => Add => New Folder name is "Helpers". After that right click on your newly created the folder => Add => New File => General => Empty Interface and name it ISQLite and add below code:

  using System;  

  using SQLite.Net;  

    

  namespace SQLiteSample.Helpers  

  {  

      public interface ISQLite  

      {  

          SQLiteConnection GetConnection();  

      }  

  }  

Step 2: Android Implementation for ISQLite.

In SQLiteSample.Droid project, create folder "Implementations" and create class "AndroidSQLite". After that add below code:

1. using System.IO;  
2. using SQLite.Net;  
3. using SQLiteSample.Droid.Implementaions;  
4. using SQLiteSample.Helpers;  
5.   
6. [assembly: Xamarin.Forms.Dependency(typeof(AndroidSQLite))]  
7. namespace SQLiteSample.Droid.Implementations {  
8.     public class AndroidSQLite : ISQLite {  
9.         public SQLiteConnection GetConnection() {  
10.             string documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);  
11.   
12.             // Documents folder  
13.             var path = Path.Combine(documentsPath, DatabaseHelper.DbFileName);  
14.             var plat = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid();  
15.             var conn = new SQLiteConnection(plat, path);  
16.   
17.             // Return the database connection  
18.             return conn;  
19.         }  
20.     }  
21. }  

Step 3: iOS Implementation for ISQLite.

In SQLiteSample.iOS project, create folder "Implementations" and create class "iOSSQLite". After that add below code:

1. using System;  
2. using System.IO;  
3. using Xamarin.Forms;  
4. using SQLite.Net;  
5. using SQLiteSample.Helpers;  
6. using SQLiteSample.iOS.Implementaions;  
7.   
8. [assembly: Dependency(typeof(IOSSQLite))]  
9. namespace SQLiteSample.iOS.Implementations {  
10.     public class IOSSQLite : ISQLite {  
11.         public SQLiteConnection GetConnection() {  
12.             string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder  
13.             string libraryPath = Path.Combine(documentsPath, "..", "Library"); // Library folder  
14.             var path = Path.Combine(libraryPath, DatabaseHelper.DbFileName);  
15.             // Create the connection  
16.             var plat = new SQLite.Net.Platform.XamarinIOS.SQLitePlatformIOS();  
17.             var conn = new SQLiteConnection(plat, path);  
18.             // Return the database connection  
19.             return conn;  
20.         }  
21.     }  
22. }  

Step 4: Performing SQLite operations with Database Helper class in PCL

In SQLiteSample PCL project, create a class in Helpers folder that should have methods to perform SQLite operation (create, insert, delete, read, update).

1. using SQLite.Net;  
2. using Xamarin.Forms;  
3. using System.Collections.Generic;  
4. using System.Linq;  
5. using SQLiteSample.Models;  
6. using System;  
7.   
8. namespace SQLiteSample.Helpers {  
9.     public class DatabaseHelper {  
10.           
11.         static SQLiteConnection sqliteconnection;  
12.         public const string DbFileName = "Contacts.db";  
13.   
14.         public DatabaseHelper() {  
15.             sqliteconnection = DependencyService.Get<ISQLite>().GetConnection();  
16.             sqliteconnection.CreateTable<ContactInfo>();  
17.         }  
18.   
19.         // Get All Contact data      
20.         public List<ContactInfo> GetAllContactsData() {  
21.             return (from data in sqliteconnection.Table<ContactInfo>()  
22.                     select data).ToList();  
23.         }  
24.   
25.         //Get Specific Contact data  
26.         public ContactInfo GetContactData(int id) {  
27.             return sqliteconnection.Table<ContactInfo>().FirstOrDefault(t => t.Id == id);  
28.         }  
29.   
30.         // Delete all Contacts Data  
31.         public void DeleteAllContacts() {  
32.             sqliteconnection.DeleteAll<ContactInfo>();  
33.         }  
34.   
35.         // Delete Specific Contact  
36.         public void DeleteContact(int id) {  
37.             sqliteconnection.Delete<ContactInfo>(id);  
38.         }  
39.   
40.         // Insert new Contact to DB   
41.         public void InsertContact(ContactInfo contact) {  
42.             sqliteconnection.Insert(contact);  
43.         }  
44.   
45.         // Update Contact Data  
46.         public void UpdateContact(ContactInfo contact) {  
47.             sqliteconnection.Update(contact);  
48.         }  
49.     }  
50. }  

In above SQLite helper class, we created queries for ContactInfo Table means that we need to create ContactInfo class that should have columns.

So create Models folder in PCL and add below Table class.

1. using System;  
2. using SQLite.Net.Attributes;  
3.   
4. namespace SQLiteSample.Models  
5. {  
6.     [Table("ContactInfo")]  
7.     public class ContactInfo  
8.     {  
9.         [PrimaryKey, AutoIncrement]  
10.         public int Id { get; set; }  
11.         public string Name { get; set; }  
12.         public string Age { get; set; }  
13.         public string Gender { get; set; }  
14.         public DateTime DOB { get; set; }  
15.         public string Address { get; set; }  
16.         public string MobileNumber { get; set; }  
17.     }  
18. }  

Please note that in above class, Id property is marked as the Primary Key and AutoIncrement which will helpful for contact row identification.

Step 5: Create interface for ContactInfo Table operations

We will create service that will talk to only ContactInfo Table. So create Services folder in PCL and add below IContactRepository interface

1. using System;  
2. using System.Collections.Generic;  
3. using SQLiteSample.Models;  
4.   
5. namespace SQLiteSample.Servcies  
6. {  
7.     public interface IContactRepository  
8.     {  
9.         List<ContactInfo> GetAllContactsData();  
10.   
11.         //Get Specific Contact data  
12.         ContactInfo GetContactData(int contactID);  
13.   
14.         // Delete all Contacts Data  
15.         void DeleteAllContacts();  
16.   
17.         // Delete Specific Contact  
18.         void DeleteContact(int contactID);  
19.   
20.         // Insert new Contact to DB   
21.         void InsertContact(ContactInfo contact);  
22.   
23.         // Update Contact Data  
24.         void UpdateContact(ContactInfo contact);  
25.     }  
26. }  

And after that create a class that should implement above interface.

1. using System.Collections.Generic;  
2. using SQLiteSample.Helpers;  
3. using SQLiteSample.Models;  
4.   
5. namespace SQLiteSample.Servcies  
6. {  
7.     public class ContactRepository : IContactRepository  
8.     {  
9.         DatabaseHelper _databaseHelper;  
10.         public ContactRepository(){  
11.             _databaseHelper = new DatabaseHelper();  
12.         }  
13.   
14.         public void DeleteContact(int contactID)  
15.         {  
16.             _databaseHelper.DeleteContact(contactID);  
17.         }  
18.   
19.         public void DeleteAllContacts()  
20.         {  
21.             _databaseHelper.DeleteAllContacts();  
22.         }  
23.   
24.         public List<ContactInfo> GetAllContactsData()  
25.         {  
26.             return _databaseHelper.GetAllContactsData();  
27.         }  
28.   
29.         public ContactInfo GetContactData(int contactID)  
30.         {  
31.             return _databaseHelper.GetContactData(contactID);  
32.         }  
33.   
34.         public void InsertContact(ContactInfo contact)  
35.         {  
36.             _databaseHelper.InsertContact(contact);  
37.         }  
38.   
39.         public void UpdateContact(ContactInfo contact)  
40.         {  
41.             _databaseHelper.UpdateContact(contact);  
42.         }  
43.     }  
44. }  

3. How to validate Contact Details with Fluent Validation?

It will be always good to validate details before save them to database. In this article we are validating ContactInfo table information before inserting into SQLite. Please read to understand how to validate particular class object with FluentValidation from this article.

In SQLiteSample PCL project, we have to add ContactValidator class in Validator folder.

1. using FluentValidation;  
2. using SQLiteSample.Models;  
3.   
4. namespace SQLiteSample.Validator  
5. {  
6.     public class ContactValidator : AbstractValidator<ContactInfo>    
7.     {    
8.         public ContactValidator()    
9.         {    
10.             RuleFor(c => c.Name).Must(n=>ValidateStringEmpty(n)).WithMessage("Contact name should not be empty.");  
11.             RuleFor(c => c.MobileNumber).NotNull().Length(10);  
12.             RuleFor(c => c.Age).Must(a => ValidateStringEmpty(a)).WithMessage("Contact Age should not be empty.");  
13.             RuleFor(c => c.Gender).Must(g => ValidateStringEmpty(g)).WithMessage("Contact Gender should not be empty.");  
14.             RuleFor(c => c.DOB).Must(d => ValidateStringEmpty(d.ToString())).WithMessage("Contact DOB should not be empty.");  
15.             RuleFor(c => c.Address).Must(a => ValidateStringEmpty(a)).WithMessage("Contact Adress should not be empty.");  
16.         }    
17.   
18.         bool ValidateStringEmpty(string stringValue){  
19.             if (!string.IsNullOrEmpty(stringValue))  
20.                 return true;  
21.             return false;  
22.         }  
23.     }   
24. }  
25.  

4. How to use default MVVM to create ViewModels in Xamarin.Forms app?

It is best practices to write business logic in view models before start to build views user interface. And we are adding functionality for the view models below.

• AddContactViewModel: Saving new contact details in database. 
• ContactListViewModel: Read all contacts from database.
• DetailsViewModel: Read specific contact from database and delete/update same contact.

Let's start write business logic to viewmodels

AddContactViewModel

Above UI screen is for AddContactView. So ViewModel should have below properties and commands.

Properties: Name, Mobile Number, Age, Gender, DOB, Address. And these properties will be the same for Contact DetailsViewModel. So we will add these properties into common view model name is BaseContactViewModel.

1. using System;  
2. using System.Collections.Generic;  
3. using System.ComponentModel;  
4. using System.Runtime.CompilerServices;  
5. using FluentValidation;  
6. using SQLiteSample.Helpers;  
7. using SQLiteSample.Models;  
8. using SQLiteSample.Servcies;  
9. using Xamarin.Forms;  
10.   
11. namespace SQLiteSample.ViewModels  
12. {  
13.     public class BaseContactViewModel : INotifyPropertyChanged {  
14.   
15.         public ContactInfo _contact;  
16.   
17.         public INavigation _navigation;  
18.         public IValidator _contactValidator;  
19.         public IContactRepository _contactRepository;  
20.   
21.         public string Name    
22.         {    
23.             get => _contact.Name;   
24.             set{  
25.                 _contact.Name = value;  
26.                 NotifyPropertyChanged("Name");  
27.             }  
28.         }     
29.   
30.         public string MobileNumber    
31.         {  
32.             get => _contact.MobileNumber;   
33.             set {   
34.                 _contact.MobileNumber = value;   
35.                 NotifyPropertyChanged("MobileNumber");  
36.             }  
37.         }    
38.   
39.         public string Age    
40.         {  
41.             get => _contact.Age;   
42.             set {   
43.                 _contact.Age = value;   
44.                 NotifyPropertyChanged("Age");  
45.             }  
46.         }   
47.   
48.         public string Gender    
49.         {  
50.             get => _contact.Gender;   
51.             set {   
52.                 _contact.Gender = value;   
53.                 NotifyPropertyChanged("Gender");  
54.             }  
55.         }   
56.   
57.         public DateTime DOB    
58.         {  
59.             get => _contact.DOB;   
60.             set {  
61.                 _contact.DOB = value;   
62.                 NotifyPropertyChanged("DOB");  
63.             }  
64.         }   
65.   
66.         public string Address    
67.         {  
68.             get => _contact.Address;   
69.             set {   
70.                 _contact.Address = value;   
71.                 NotifyPropertyChanged("Address");  
72.             }  
73.         }  
74.   
75.         List<ContactInfo> _contactList;  
76.         public List<ContactInfo> ContactList  
77.         {  
78.             get => _contactList;  
79.             set  
80.             {  
81.                 _contactList = value;  
82.                 NotifyPropertyChanged("ContactList");  
83.             }  
84.         }  
85.  
86.         #region INotifyPropertyChanged      
87.         public event PropertyChangedEventHandler PropertyChanged;  
88.         protected void NotifyPropertyChanged([CallerMemberName] string propertyName = ""){  
89.             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
90.         }  
91.         #endregion  
92.     }  
93. }  

In above BaseContactViewModel, we also added below common interfaces

• INavigation: For page navigation
• IValidator: To validae contact object.
• IContactRepository: To access ContactInfo Table operations.

Commands: 

• AddContactCommand(for Save Contact Button click)
• ViewAllContactsCommand (View All Contacts Label tap). 

So create ViewModels folder in PCL project and add below AddContactViewModel class.

1. using System.Threading.Tasks;  
2. using System.Windows.Input;  
3. using SQLiteSample.Helpers;  
4. using SQLiteSample.Models;  
5. using SQLiteSample.Servcies;  
6. using SQLiteSample.Validator;  
7. using SQLiteSample.Views;  
8. using Xamarin.Forms;  
9.   
10. namespace SQLiteSample.ViewModels {  
11.     public class AddContactViewModel : BaseContactViewModel {  
12.   
13.         public ICommand AddContactCommand { get; private set; }  
14.         public ICommand ViewAllContactsCommand { get; private set; }  
15.   
16.         public AddContactViewModel(INavigation navigation){  
17.             _navigation = navigation;  
18.             _contactValidator = new ContactValidator();  
19.             _contact = new ContactInfo();  
20.             _contactRepository = new ContactRepository();  
21.   
22.             AddContactCommand = new Command(async () => await AddContact());   
23.             ViewAllContactsCommand = new Command(async () => await ShowContactList());   
24.         }  
25.   
26.         async Task AddContact() {  
27.             var validationResults = _contactValidator.Validate(_contact);      
28.       
29.             if (validationResults.IsValid){  
30.                 bool isUserAccept = await Application.Current.MainPage.DisplayAlert("Add Contact", "Do you want to save Contact details?", "OK", "Cancel");  
31.                 if (isUserAccept) {  
32.                     _contactRepository.InsertContact(_contact);  
33.                     await _navigation.PushAsync(new ContactList());  
34.                 }  
35.             }      
36.             else {      
37.                 await Application.Current.MainPage.DisplayAlert("Add Contact", validationResults.Errors[0].ErrorMessage, "Ok");      
38.             }       
39.         }  
40.   
41.         async Task ShowContactList(){   
42.             await _navigation.PushAsync(new ContactList());  
43.         }  
44.   
45.         public bool IsViewAll => _contactRepository.GetAllContactsData().Count > 0 ? true : false;  
46.     }  
47. }  

In AddContact method, we are validating ContactInfo object with help of ContactValidator before insert new contact to database. 

ContactListViewModel

Above UI screen is for ContactListView. So ViewModel should have below properties and commands.

Properties: ContactList, SelectedContactItem

Commands: AddCommand, DeleteAllContactsCommand

In PCL project ViewModels folder, Add below ContactListViewModel class.

1. using System.Threading.Tasks;  
2. using System.Windows.Input;  
3. using SQLiteSample.Models;  
4. using SQLiteSample.Servcies;  
5. using SQLiteSample.Views;  
6. using Xamarin.Forms;  
7.   
8. namespace SQLiteSample.ViewModels  
9. {  
10.     public class ContactListViewModel : BaseContactViewModel {  
11.   
12.         public ICommand AddCommand { get; private set; }  
13.         public ICommand DeleteAllContactsCommand { get; private set; }  
14.   
15.         public ContactListViewModel(INavigation navigation) {  
16.             _navigation = navigation;  
17.             _contactRepository = new ContactRepository();  
18.   
19.             AddCommand = new Command(async () => await ShowAddContact());   
20.             DeleteAllContactsCommand = new Command(async () => await DeleteAllContacts());  
21.   
22.             FetchContacts();  
23.         }  
24.   
25.         void FetchContacts(){  
26.             ContactList = _contactRepository.GetAllContactsData();  
27.         }  
28.   
29.         async Task ShowAddContact() {  
30.             await _navigation.PushAsync(new AddContact());  
31.         }  
32.   
33.         async Task DeleteAllContacts(){  
34.             bool isUserAccept = await Application.Current.MainPage.DisplayAlert("Contact List", "Delete All Contacts Details ?", "OK", "Cancel");  
35.             if (isUserAccept){  
36.                 _contactRepository.DeleteAllContacts();  
37.                 await _navigation.PushAsync(new AddContact());  
38.             }  
39.         }  
40.   
41.         async void ShowContactDetails(int selectedContactID){  
42.             await _navigation.PushAsync(new DetailsPage(selectedContactID));  
43.         }  
44.   
45.         ContactInfo _selectedContactItem;  
46.         public ContactInfo SelectedContactItem {  
47.             get => _selectedContactItem;  
48.             set {  
49.                 if (value != null){  
50.                     _selectedContactItem = value;  
51.                     NotifyPropertyChanged("SelectedContactItem");  
52.                     ShowContactDetails(value.Id);  
53.                 }  
54.             }  
55.         }  
56.     }  
57. }  

DetailsViewModel

Above UI screen is for Contact DetailsView. So ViewModel should have below properties and commands.

Properties: All properties of BaseContactViewModel as it is very similar to AddContactViewModel.

Commands: UpdateContactCommand, DeleteContactCommand

In PCL project ViewModels folder, Add below DetailsViewModel class.

1. using System.Threading.Tasks;  
2. using System.Windows.Input;  
3. using SQLiteSample.Helpers;  
4. using SQLiteSample.Models;  
5. using SQLiteSample.Servcies;  
6. using SQLiteSample.Validator;  
7. using Xamarin.Forms;  
8.   
9. namespace SQLiteSample.ViewModels {  
10.     public class DetailsViewModel: BaseContactViewModel {  
11.   
12.         public ICommand UpdateContactCommand { get; private set; }  
13.         public ICommand DeleteContactCommand { get; private set; }  
14.   
15.         public DetailsViewModel(INavigation navigation, int selectedContactID) {  
16.             _navigation = navigation;  
17.             _contactValidator = new ContactValidator();  
18.             _contact = new ContactInfo();  
19.             _contact.Id = selectedContactID;  
20.             _contactRepository = new ContactRepository();  
21.   
22.             UpdateContactCommand = new Command(async () => await UpdateContact());  
23.             DeleteContactCommand = new Command(async () => await DeleteContact());  
24.   
25.             FetchContactDetails();  
26.         }  
27.   
28.         void FetchContactDetails(){  
29.             _contact = _contactRepository.GetContactData(_contact.Id);  
30.         }  
31.   
32.         async Task UpdateContact() {  
33.             var validationResults = _contactValidator.Validate(_contact);  
34.   
35.             if (validationResults.IsValid) {  
36.                 bool isUserAccept = await Application.Current.MainPage.DisplayAlert("Contact Details", "Update Contact Details", "OK", "Cancel");  
37.                 if (isUserAccept) {  
38.                     _contactRepository.UpdateContact(_contact);  
39.                     await _navigation.PopAsync();  
40.                 }  
41.             }  
42.             else {  
43.                 await Application.Current.MainPage.DisplayAlert("Add Contact", validationResults.Errors[0].ErrorMessage, "Ok");  
44.             }  
45.         }  
46.   
47.         async Task DeleteContact() {  
48.             bool isUserAccept = await Application.Current.MainPage.DisplayAlert("Contact Details", "Delete Contact Details", "OK", "Cancel");  
49.             if (isUserAccept) {  
50.                 _contactRepository.DeleteContact(_contact.Id);  
51.                 await _navigation.PopAsync();  
52.             }  
53.         }  
54.     }  
55. }  

5. How to bind Contact Views with ViewModels?

We completed the business logic in all above view models and now we can create UI in Views folder and need bind it to the view models.

Add Contact

We need to create a page that can provide UI to insert new contact details. If we observe the above UI android screens, AddContact and Contacts Details UI is almost similar. So we can build common UI with help of ContentView and then reuse it in AddContact and Details Pages.

So create Views folder in PCL and add below ContentView. Make sure UI elements should bind to relevant view model properties (Name, Mobile Number, Age, Gender, DOB, Address).

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SQLiteSample.Views.ContactView">  
3.      <StackLayout Spacing="12">  
4.         <Entry x:Name="txtContactName" Text="{Binding Name}" HeightRequest="40" BackgroundColor="White" Placeholder="Contact Name" HorizontalOptions="FillAndExpand"/>  
5.         <Entry  x:Name="txtMobileNumber" Keyboard="Telephone" Text="{Binding MobileNumber}" BackgroundColor="White" HeightRequest="40" Placeholder="Mobile Number" HorizontalOptions="FillAndExpand"/>  
6.         <StackLayout Orientation="Horizontal">  
7.           <Entry x:Name="txtAge" Text="{Binding Age}" HeightRequest="40" BackgroundColor="White" Placeholder="Age" HorizontalOptions="FillAndExpand"/>  
8.           <Picker x:Name="GenderPicker" SelectedItem="{Binding Gender}" Title="Gender" BackgroundColor="White" HeightRequest="40" HorizontalOptions="FillAndExpand">  
9.                 <Picker.ItemsSource>  
10.                     <x:Array Type="{x:Type x:String}">  
11.                         <x:String>Male</x:String>  
12.                         <x:String>FeMale</x:String>  
13.                     </x:Array>  
14.                 </Picker.ItemsSource>  
15.             </Picker>  
16.         </StackLayout>  
17.           <DatePicker x:Name="txtDOB" Date="{Binding DOB}" BackgroundColor="White" HeightRequest="40" HorizontalOptions="FillAndExpand"/>  
18.          <Entry x:Name="txtAddress" Text="{Binding Address}" BackgroundColor="White"  HeightRequest="40" Placeholder="Address"  HorizontalOptions="FillAndExpand"/>  
19.     </StackLayout>  
20. </ContentView>  

Declare above ContentView name space in Xaml to reuse it in AddContact.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SQLiteSample.Views">  
3.     <StackLayout Padding="20" Spacing="12">  
4.         <local:ContactView />  
5.     </StackLayout>  
6. </ContentPage>  

Now in Views folder create AddContact.xaml page and add below xaml code

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" Title="Add Contact" BackgroundColor="#D5E7FA" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
3.  x:Class="SQLiteSample.Views.AddContact" xmlns:local="clr-namespace:SQLiteSample.Views">  
4.     <StackLayout Padding="20" Spacing="12">  
5.         <local:ContactView />  
6.         <Button x:Name="SubmitButton" Command="{Binding AddContactCommand}" BorderRadius="0" Text="Save Contact" FontAttributes="Bold" TextColor="White" BackgroundColor="#5989B5"/>  
7.         <Label Text="View All Contacts" IsVisible="{Binding IsViewAll}" x:Name="ViewLbl" TextColor="Black" HorizontalOptions="EndAndExpand" FontSize="15">    
8.         <Label.GestureRecognizers>    
9.         <TapGestureRecognizer Command="{Binding ViewAllContactsCommand}" NumberOfTapsRequired="1" />    
10.         </Label.GestureRecognizers>    
11.         </Label>    
12.     </StackLayout>  
13. </ContentPage>  

Set BindingContext with viewmodel in AddContact.xaml.cs like below

1. using SQLiteSample.ViewModels;  
2. using Xamarin.Forms;  
3.   
4. namespace SQLiteSample.Views  
5. {  
6.     public partial class AddContact : ContentPage {  
7.         public AddContact() {  
8.             InitializeComponent();  
9.             BindingContext = new AddContactViewModel(Navigation);  
10.         }  
11.     }  
12. }  

Contact List

We need to create a page that can display all contacts details, also to add new contact details and delete all contacts.
In Views folder, create ContactList.xaml and add below code.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" Title="Contact List" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SQLiteSample.Views.ContactList">  
3.    <Grid Padding="10,20,10,40">    
4.         <Grid.RowDefinitions>    
5.             <RowDefinition Height="Auto" />    
6.             <RowDefinition Height="*" />    
7.             <RowDefinition Height="Auto" />    
8.         </Grid.RowDefinitions>    
9.         <Grid Grid.Row="0">    
10.         <Grid.ColumnDefinitions>    
11.         <ColumnDefinition Width="*" />    
12.         <ColumnDefinition Width="*" />    
13.         </Grid.ColumnDefinitions>   
14.         <Button Text="New Contact" Grid.Row="0" Grid.Column="1" FontAttributes="Bold" BorderRadius="0" HeightRequest="40" BorderColor="Black" BackgroundColor="Transparent" BorderWidth="1"  TextColor="Black"  Command="{Binding AddCommand}" />    
15.         </Grid>    
16.         <ListView x:Name="ContactListView" HasUnevenRows="true" Grid.Row="1" SeparatorColor="Black" ItemsSource="{Binding ContactList}"  
17.          SelectedItem="{Binding SelectedContactItem, Mode=TwoWay}">    
18.             <ListView.ItemTemplate>    
19.                 <DataTemplate>    
20.                     <ViewCell>    
21.                             <Grid  Padding="10">    
22.                                 <Grid.RowDefinitions>    
23.                                     <RowDefinition Height="Auto" />    
24.                                     <RowDefinition Height="Auto" />    
25.                                 </Grid.RowDefinitions>    
26.                                 <Grid.ColumnDefinitions>    
27.                                     <ColumnDefinition Width="Auto" />    
28.                                     <ColumnDefinition Width="*" />    
29.                                 </Grid.ColumnDefinitions>    
30.                                 <Label Text="{Binding Name}" Grid.Row="0" Font="20" TextColor="Black" />   
31.                                 <Label Text="{Binding MobileNumber}" Grid.Row="0" Font="20" Grid.Column="1" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" TextColor="Black" />    
32.                                 <Label Text="{Binding Address}" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" TextColor="Black" />    
33.                         </Grid>    
34.                     </ViewCell>    
35.                 </DataTemplate>    
36.             </ListView.ItemTemplate>    
37.         </ListView>   
38.         <Button Text="Delete All Contacts" Grid.Row="2" BorderRadius="0" VerticalOptions="EndAndExpand" FontAttributes="Bold" TextColor="White" BackgroundColor="#5989B5" Command="{Binding DeleteAllContactsCommand}" />    
39.     </Grid>    
40. </ContentPage>    

In Above xaml code we added

• Two buttons (New Contact, Delete All Contacts)
• ListView (To display contacts list and to set ItemsSource ContactList)  

Now set BindingContext with viewmodel in ContactList.xaml.cs like below

1. using System;  
2. using SQLiteSample.Helpers;  
3. using SQLiteSample.Models;  
4. using SQLiteSample.ViewModels;  
5. using Xamarin.Forms;  
6.   
7. namespace SQLiteSample.Views {  
8.     public partial class ContactList : ContentPage {  
9.         public ContactList() {  
10.             InitializeComponent();  
11.         }  
12.   
13.         protected override void OnAppearing() {  
14.             this.BindingContext = new ContactListViewModel(Navigation);  
15.         }  
16.     }  
17. }  

DetailsPage:

We need to create a page that can display particular contact details, also to update/delete contact details.

In Views folder, create DetailsPage.xaml and add below code.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" Title="Contact Details" BackgroundColor="#D5E7FA"  
3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SQLiteSample.Views" x:Class="SQLiteSample.Views.DetailsPage">  
4.     <StackLayout Padding="20" Spacing="12">  
5.         <local:ContactView />  
6.          <Button Text="Update" BorderRadius="0" Margin="0,30,0,0" FontAttributes="Bold" TextColor="White" BackgroundColor="#5989B5" Command="{Binding UpdateContactCommand}" />    
7.         <Button Text="Delete" BorderRadius="0" Margin="0,30,0,0" FontAttributes="Bold" TextColor="White" BackgroundColor="#5989B5" Command="{Binding DeleteContactCommand}" />    
8.     </StackLayout>  
9. </ContentPage>  

Please note that in above xaml, we are reusing the ContactView. Also we added two extra buttons (Delete, Update).
Now set BindingContext with viewmodel in DetailsPage.xaml.cs like below

1. using SQLiteSample.ViewModels;  
2. using Xamarin.Forms;  
3.   
4. namespace SQLiteSample.Views {  
5.     public partial class DetailsPage : ContentPage {  
6.           
7.         public DetailsPage(int contactID) {  
8.             InitializeComponent();  
9.             this.BindingContext = new DetailsViewModel(Navigation, contactID);  
10.         }  
11.     }  
12. }  

How To Get & Set Global Variable Inside Xamarin.Forms App?

To share a variable between the whole Xamarin.Forms application, There are three ways:-

• Application.Current.Properties

        public static object GetApplicationCurrentProperty(string propertyKey)

        {

            object retValue = null;

            IDictionary<string, object> properties = Application.Current.Properties;

            if (properties.ContainsKey(propertyKey))

            {

                retValue = properties[propertyKey] ;

            }

            return retValue;

        }

        public static void SetApplicationCurrentProperty(string propertyKey, object obj)

        {

            IDictionary<string, object> properties = Application.Current.Properties;

            if (properties.ContainsKey(propertyKey))

            {

                properties[propertyKey] = obj ;

            }

            else

            {

                properties.Add(propertyKey, obj);

            }

        }

• Singleton classes.

Using a Singleton class

One of the simplest ways (it does not mean that is one of the best) to have global variables is to declare a singleton class:

public class Globals{

   private static Globals instance;

   // Global variable

   private int data;

   // Restrict the constructor from being instantiated

   private Globals(){}

   public void setData(int d){

     this.data=d;

   }

   public int getData(){

     return this.data;

   }

   public static synchronized Globals getInstance(){

     if(instance==null){

       instance=new Globals();

     }

     return instance;

   }

}

To use this class you get an instance first, and then do what you want with data:
Globals g = Globals.getInstance();

g.setData(100);

....

int data=g.getData();

Notice that we do not instantiate the object by calling “new”, in fact this wouldn’t be allowed as we declared the constructor private, so its not visible. Instead we call the getInstance() method and return our static object.

2. By Extending the Application class

The second way to define global variables is by extending the Application class. This is the base class for maintaining global application state.

Create a new class that extends Application.

public class Globals extends Application{

   private int data=200;

   public int getData(){

     return this.data;

   }

   public void setData(int d){

     this.data=d;

   }

}

1. b) Add the class to the AndroidManifest file as an attribute of <application> tag:

<application

   android:name=".Globals"

   .... />

1. c) Then you can access your global data from any Activity by calling getApplication()

Globals g = (Globals)getApplication();

int data=g.getData();

• SQLite Implementation

Using SQLite.NET

The SQLite.NET library that Xamarin recommends is a very basic ORM that lets you easily store and retrieve objects in the local SQLite database on an Android device. ORM stands for Object Relational Mapping – an API that lets you save and retrieve "objects" from a database without writing SQL statements.

Using SQLite.NET

To include the SQLite.NET library in a Xamarin app, add the SQLite.net PCL NuGet package to the project using the SQLite-net PCL NuGet package

1. Add a using statement – Add the following statement to the C# files where data access is required:

using SQLite;

2. Create a Blank Database – A database reference can be created by passing the file path the SQLiteConnection class constructor. You do not need to check if the file already exists – it will automatically be created if required, otherwise the existing database file will be opened.

var db = new SQLiteConnection (dbPath);

The dbPath variable should be determined according the rules discussed earlier in this document.

3. Save Data – Once you have created a SQLiteConnection object, database commands are executed by calling its methods, such as CreateTable and Insert like this:

4. db.CreateTable<Stock> (); db.Insert (newStock); // after creating the newStock object

5.Retrieve Data – To retrieve an object (or a list of objects) use the following syntax:

5.  var stock = db.Get<Stock>(5); // primary key id of 5
var stockList = db.Table<Stock>();

Basic Data Access Sample

The DataAccess_Basic sample code for this document looks like this when running on Android. The code illustrates how to perform simple SQLite.NET operations and shows the results in as text in the application's main window.

Android

The following code sample shows an entire database interaction using the SQLite.NET library to encapsulate the underlying database access. It shows:

1. Creating the database file

2. Inserting some data by creating objects and then saving them

3. Querying the data

You'll need to include these namespaces:

using SQLite; // from the github SQLite.cs class

The last one requires that you have added SQLite to your project. Note that the SQLite database table is defined by adding attributes to a class (the Stock class) rather than a CREATE TABLE command.

[Table("Items")]
public class Stock {
    [PrimaryKey, AutoIncrement, Column("_id")]
    public int Id { get; set; }
    [MaxLength(8)]
    public string Symbol { get; set; }
}
public static void DoSomeDataAccess () {
       Console.WriteLine ("Creating database, if it doesn't already exist");
   string dbPath = Path.Combine (
        Environment.GetFolderPath (Environment.SpecialFolder.Personal),
        "ormdemo.db3");
   var db = new SQLiteConnection (dbPath);
   db.CreateTable<Stock> ();
   if (db.Table<Stock> ().Count() == 0) {
        // only insert the data if it doesn't already exist
        var newStock = new Stock ();
        newStock.Symbol = "AAPL";
        db.Insert (newStock);
        newStock = new Stock ();
        newStock.Symbol = "GOOG";
        db.Insert (newStock);
        newStock = new Stock ();
        newStock.Symbol = "MSFT";
        db.Insert (newStock);
    }
    Console.WriteLine("Reading data");
    var table = db.Table<Stock> ();
    foreach (var s in table) {
        Console.WriteLine (s.Id + " " + s.Symbol);
    }
}

Using the [Table] attribute without specifying a table name parameter will cause the underlying database table to have the same name as the class (in this case, "Stock"). The actual table name is important if you write SQL queries directly against the database rather than use the ORM data access methods. Similarly the [Column("_id")] attribute is optional, and if absent a column will be added to the table with the same name as the property in the class.

SQLite Attributes

Common attributes that you can apply to your classes to control how they are stored in the underlying database include:

· [PrimaryKey] – This attribute can be applied to an integer property to force it to be the underlying table's primary key. Composite primary keys are not supported.

· [AutoIncrement] – This attribute will cause an integer property's value to be auto-increment for each new object inserted into the database

· [Column(name)] – Supplying the optional name parameter will override the default value of the underlying database column's name (which is the same as the property).

· [Table(name)] – Marks the class as being able to be stored in an underlying SQLite table. Specifying the optional name parameter will override the default value of the underlying database table's name (which is the same as the class name)

· [MaxLength(value)] – Restrict the length of a text property, when a database insert is attempted. Consuming code should validate this prior to inserting the object as this attribute is only 'checked' when a database insert or update operation is attempted.

· [Ignore] – Causes SQLite.NET to ignore this property. This is particularly useful for properties that have a type that cannot be stored in the database, or properties that model collections that cannot be resolved automatically be SQLite.

· [Unique] – Ensures that the values in the underlying database column are unique.

Most of these attributes are optional, SQLite will use default values for table and column names. You should always specify an integer primary key so that selection and deletion queries can be performed efficiently on your data.

More Complex Queries

The following methods on SQLiteConnection can be used to perform other data operations:

· Insert – Adds a new object to the database.

· Get<T> – Attempts to retrieve an object using the primary key.

· Table<T> – Returns all the objects in the table.

· Delete – Deletes an object using its primary key.

· Query<T> – Perform an SQL query that returns a number of rows (as objects).

· Execute – Use this method (and not Query) when you don't expect rows back from the SQL (such as INSERT, UPDATE and DELETE instructions).

Getting an object by the primary key

SQLite.Net provides the Get method to retrieve a single object based on its primary key.

var existingItem = db.Get<Stock>(3);

Selecting an object using Linq

Methods that return collections support IEnumerable<T> so you can use Linq to query or sort the contents of a table. The entire table is loaded into a collection prior to the Linq query executing, so performance of these queries could be slow for large amounts of data.

The following code shows an example using Linq to filter out all entries that begin with the letter "A":

var apple = from s in db.Table<Stock>()
    where s.Symbol.StartsWith ("A")
    select s;
Console.WriteLine ("-> " + apple.FirstOrDefault ().Symbol);

Selecting an object using SQL

Even though SQLite.Net can provide object-based access to your data, sometimes you might need to do a more complex query than Linq allows (or you may need faster performance). You can use SQL commands with the Query method, as shown here:

var stocksStartingWithA = db.Query<Stock>("SELECT * FROM Items WHERE Symbol = ?", "A");
foreach (var s in stocksStartingWithA) {
    Console.WriteLine ("a " + s.Symbol);
}

Note: When writing SQL statements directly you create a dependency on the names of tables and columns in your database, which have been generated from your classes and their attributes. If you change those names in your code you must remember to update any manually written SQL statements.

Deleting an object

The primary key is used to delete the row, as shown here:

var rowcount = db.Delete<Stock>(someStock.Id); // Id is the primary key

You can check the rowcount to confirm how many rows were affected (deleted in this case).

Using SQLite.NET with Multiple Threads

SQLite supports three different threading modes: Single-thread, Multi-thread, and Serialized. If you want to access the database from multiple threads without any restrictions, you can configure SQLite to use the Serialized threading mode. It's important to set this mode early in your application (for example, at the beginning of the OnCreate method).

To change the threading mode, call SqliteConnection.SetConfig. For example, this line of code configures SQLite for Serialized mode:

SqliteConnection.SetConfig(SQLiteConfig.Serialized);

The Android version of SQLite has a limitation that requires a few more steps. If the call to SqliteConnection.SetConfig produces a SQLite exception such as library used incorrectly, then you must use the following workaround:

1. Link to the native libsqlite.so library so that the sqlite3_shutdown and sqlite3_initialize APIs are made available to the app:

2.  [DllImport("libsqlite.so")]
3.  internal static extern int sqlite3_shutdown();
4.   
5.  [DllImport("libsqlite.so")]
internal static extern int sqlite3_initialize();

6. At the very beginning of the OnCreate method, add this code to shutdown SQLite, configure it for Serialized mode, and reinitialize SQLite:

7.  sqlite3_shutdown();
8.  SqliteConnection.SetConfig(SQLiteConfig.Serialized);
sqlite3_initialize();

This workaround also works for the Mono.Data.Sqlite library. For more information about SQLite and multi-threading, see SQLite and Multiple Threads.

Xamarin is a Mobile Application Development and cross platform Development software. Greens providing free interview preparations with affordable fees. Greens Technology,the best institute for Xamarin Course in Chennai with flexible Timings.

Check Out My Articles @https://www.linkedin.com/in/rakshitha-s-623997165/detail/recent-activity/

For More Info @Xamari Training In Chennai