Skip to content

This sample likely serves as a tutorial or guide demonstrating how to bind remote JSON data to a .NET MAUI SfChipGroup control.

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-bind-remote-JSON-data-to-.NET-MAUI-SfChipGroup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How-to-bind-remote-JSON-data-to-.NET-MAUI-SfChipGroup

This sample explains how to bind remote JSON data to .NET MAUI ChipGroup (SfChipGroup).

Steps

Step 1: Bind the JSON data to the ChipGroup

Bind the data from the remote JSON file in .NET MAUI ChipGroup using the ItemsSource property.

[XAML]

<chip:SfChipGroup ItemsSource="{Binding Data}"
                  ChipPadding="8,8,0,0"
                  DisplayMemberPath="ShipCity">
            <chip:SfChipGroup.ChipLayout>
                <FlexLayout HorizontalOptions="Start"
                            VerticalOptions="Center"
                            Direction="Row"
                            Wrap="Wrap"
                            JustifyContent="Start"
                            AlignContent="Start"
                            AlignItems="Start"/>
            </chip:SfChipGroup.ChipLayout>
     </chip:SfChipGroup>

Step 2: Access the JSON file

Access the JSON file from the remote server and deserialize the object to return as a collection of models.

        private const string Url = "https://ej2services.syncfusion.com/production/web-services/api/Orders";//This url is a free public api intended for demos
        private readonly HttpClient _client = new HttpClient();//Creating a new instance of HttpClient. (Microsoft.Net.Http)

        private ObservableCollection<Model> data;
        
        public ObservableCollection<Model> Data
        {
            get { return data; }
            set
            {
                data = value;
                OnPropertyChanged("Data");
            }
        }
        
        public ViewModel()
        {
            Data = new ObservableCollection<Model>();
            GetData();
        }
        
        async void GetData()
        {
            string content = await _client.GetStringAsync(Url); //Sends a GET request to the specified Uri and returns the response body as a string in an asynchronous operation
            var json_Datas = JsonConvert.DeserializeObject<ObservableCollection<Model>>(content); //Deserializes or converts JSON String into a collection of Post
            Data = json_Datas;
        }

Project pre-requisites

Make sure that you have the compatible versions of Visual Studio with .NET MAUI workloads and .NET SDK version in your machine before starting to work on this project. Refer to System Requirements for .NET MAUI.

How to run this application?

To run this application, you need to first clone the How-to-bind-remote-JSON-data-to-.NET-MAUI-SfChipGroup repository and then open it in Visual Studio 2022. Now, simply build and run your project to view the output.

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

About

This sample likely serves as a tutorial or guide demonstrating how to bind remote JSON data to a .NET MAUI SfChipGroup control.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages