https://github.com/syncfusionexamples/binding-rest-service-data-listview-xamarin

This repository contains sample about how to bind the ListView data using RESTful API service in Xamarin.Forms (SfListView)
https://github.com/syncfusionexamples/binding-rest-service-data-listview-xamarin

http-client json json-data listview restful-api sflistview xamarin xamarin-forms

Last synced: 26 days ago
JSON representation

This repository contains sample about how to bind the ListView data using RESTful API service in Xamarin.Forms (SfListView)

• Host: GitHub
• URL: https://github.com/syncfusionexamples/binding-rest-service-data-listview-xamarin
• Owner: SyncfusionExamples
• Created: 2020-09-16T12:29:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-04T11:14:54.000Z (7 months ago)
• Last Synced: 2024-06-05T12:07:18.701Z (7 months ago)
• Topics: http-client, json, json-data, listview, restful-api, sflistview, xamarin, xamarin-forms
• Language: C#
• Homepage:
• Size: 544 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# How to bind the ListView data using RESTful API service in Xamarin.Forms (SfListView)

The Xamarin.Forms [SfListView](https://help.syncfusion.com/xamarin/listview/overview) supports to populate the fetched data from REST services. Refer Xamarin.Forms document about consuming RESTful web service before reading this [article](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/data-cloud/consuming/rest).

You can also refer the following article.

https://www.syncfusion.com/kb/11932/how-to-bind-the-listview-data-using-restful-api-service-in-xamarin-forms-sflistview

Please refer to the following steps to implement SfListView with REST services,

**STEP 1: Create Xamarin.Forms application with SfListView**

Define **SfListView** bound to the ViewModel collection.

``` xml

    

        

    

	 

        

            

                

                    

                        

                            

                                

                                    

                                    

                                    

                                    

                                

                                

                                

                                

                                

                            

                        

                    

                

            

        

    

```

**STEP 2:** Install the [ModernHttpClient](https://www.nuget.org/packages/modernhttpclient/) and [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) NuGet packages in the shared code project.

**STEP 3: Retrieve data from the REST service**

Define [HTTPClient](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.getasync?view=netcore-3.1) to retrieve the information from the webservice for a specified url using [GetAsync](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.getasync) method. You can read the retrieved data to string format using[HTTPContent.ReadAsStringAsync](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpcontent.readasstringasync?view=netcore-3.1) method. Using, [JsonConvert.DeserializeObject](https://www.newtonsoft.com/json/help/html/Overload_Newtonsoft_Json_JsonConvert_DeserializeObject.htm) method, convert the JSON string to dynamic .

``` c#

namespace ListViewXamarin

{

    /// 

    /// Implementation of RestService to be displayed.

    /// 

    public class RestService

    { 

        System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();

        public dynamic Items { get; private set; }

        public string RestUrl { get; private set;  }

        public RestService()

        {

            RestUrl = "https://jsonplaceholder.typicode.com/users"; // Set your REST API url here

            client = new HttpClient();

        }

        public async Task GetDataAsync()

        {

            try

            {

                //Sends request to retrieve data from the web service for the specified Uri

                var response = await client.GetAsync(RestUrl);

                if (response.IsSuccessStatusCode)

                {

                    var content = await response.Content.ReadAsStringAsync(); //Returns the response as JSON string

                    Items = JsonConvert.DeserializeObject(content); //Converts JSON string to dynamic

                }

            }

            catch (Exception ex)

            {

                 Debug.WriteLine(@"ERROR {0}", ex.Message);

            }

            return Items;

        }

    }

}

```

**STEP 4: Populate data to collection**

In the ViewModel class, initialize the **RestService** and populate data by invoking the **GetDataAsync** method and set to the collection which bound to the **SfListView**.

```c#

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace ListViewXamarin

{

    public class ContactsViewModel : INotifyPropertyChanged

    {

        private dynamic userInfo;

        public static RestService DataServices { get; private set; }

        public dynamic UserInfo

        {

            get { return userInfo; }

            set

            {

                userInfo = value;

                RaisedOnPropertyChanged("UserInfo");

            }

        }

        public ContactsViewModel()

        {

            DataServices = new RestService();

            //Gets data from REST service and set it to the ItemsSource collection

            RetrieveDataAsync();

        }

        public async void RetrieveDataAsync()

        {

            UserInfo = await DataServices.GetDataAsync();

        }

    }

}

```