How to load the data using RESTful API service in .NET MAUI ListView (SfListView)?

The .NET MAUI SfListView supports to populate the fetched data from REST services. Refer the document about consuming RESTful web service before reading this article from here.

Please refer to the steps below for implementing ListView with REST services,

STEP 1:

Define SfListView bound to the ViewModel collection.

<syncfusion:SfListView x:Name="listView"
                        AutoFitMode="Height"
                        ItemSpacing="5"
                        ItemsSource="{Binding UserInfo}">
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <Border BackgroundColor="White"
                Stroke="#DDDDDD"
                StrokeThickness="1"
                Margin="10,5"
                Padding="15"
                StrokeShape="RoundRectangle 12">
            <Grid RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0"
                        Text="Username:"
                        FontAttributes="Bold"
                        TextColor="#333"
                        FontSize="16" />
                <Label Grid.Row="0"
                        Text="{Binding [username]}"
                        Grid.Column="1"
                        TextColor="#555"
                        FontSize="16"
                        HorizontalOptions="Start"
                        Margin="100,0,0,0" />

                <Label Grid.Row="1"
                        Text="Website:"
                        FontAttributes="Bold"
                        TextColor="#333"
                        FontSize="16" />
                <Label Grid.Row="1"
                        Text="{Binding [website]}"
                        Grid.Column="1"
                        TextColor="#555"
                        FontSize="16"
                        HorizontalOptions="Start"
                        Margin="100,0,0,0" />
                <Label Grid.Row="2"
                        Text="Phone:"
                        FontAttributes="Bold"
                        TextColor="#333"
                        FontSize="16" />
                <Label Grid.Row="2"
                        Text="{Binding [phone]}"
                        Grid.Column="1"
                        TextColor="#555"
                        FontSize="16"
                        HorizontalOptions="Start"
                        Margin="100,0,0,0" />
                <Label Grid.Row="3"
                        Text="Email:"
                        FontAttributes="Bold"
                        TextColor="#333"
                        FontSize="16" />
                <Label Grid.Row="3"
                        Text="{Binding [email]}"
                        Grid.Column="1"
                        TextColor="#555"
                        FontSize="16"
                        HorizontalOptions="Start"
                        Margin="100,0,0,0" />
            </Grid>
        </Border>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

STEP 2: Install the Newtonsoft.Json NuGet package.

STEP 3: Retrieve data from the REST service

Define the HTTPClient to retrieve information from the web server for a specified url using the GetAsync method. Use the HTTPContent.ReadAsStringAsync method to read the retrieved data into string format. Using, JsonConvert.DeserializeObject method, convert the JSON string to dynamic.

   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<dynamic> 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<dynamic>(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 the data by invoking the GetDataAsync method and set to the collection bound to the ListView.

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();
	}
}

Download the sample on GitHub.

Conclusion
I hope you enjoyed learning about how to load the data using RESTful API service in .NET MAUI ListView (SfListView).

You can refer to our .NET MAUI SfListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI SfListView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!