WPF DataGrid da JSON

Oggi vediamo come impostare una DataGrid da dati in formato JSON.

I dati li prenderemo da un RESTful service.

Il tutto usando C#.

Prima di tutto, per fare la interpretare i dati in JSON, dovremmo usare l'oggetto JavaScriptSerializer.

Per fare questo dobbiamo aggiungere una reference al nostro progetto: cliccate col il taso destro sul progetto (non sulla soluzione) -> Add -> Reference; cercate e aggiungete System.Web.Extensions.

Bene, ora creiamo la classe che rappresenta gli oggetti in JSON:

namespace B2B
{
    class Cliente
    {
        public int clienteCodice { get; set; }
        public string clienteRagsoc { get; set; }
        public string clienteEmail { get; set; }
        public string clientePiva { get; set; }
    }
}

Considerate che i nomi delle variabili hanno lo stesso formato dei campi del JSON.

Il prossimo step riguarda l'interrogazione dei dati remoti:

using System;
using System.Collections.Generic;
using System.IO;
using System.Net;
using System.Web.Script.Serialization;
using System.Windows;
using System.Windows.Controls;

namespace B2B
{
    class Service
    {
        public List getClienti()
        {
            List list = null;
            try
            {
                string strUrl = "http://www.sito.com/datas/json";
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(strUrl);
                request.Accept = "application/json";
                using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
                {
                    using (StreamReader streamReader = new StreamReader(response.GetResponseStream()))
                    {
                        String json = streamReader.ReadToEnd();
                        var s = new JavaScriptSerializer();
                        list = s.Deserialize(json);
                    }
                }
            }
            catch(Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
            return list;
        }
    }
}

L'unico metodo ritorna una List.

Come vedete abbiamo deserializzato lo stream in entrata con JavaScriptSerializer.

Nella nostra finestra, nel costruttore, prendiamo i dati e li impostiamo come source della DataGrid:

        public MainWindow()
        {
            InitializeComponent();
            Service s = new Service();
            List list = s.getClienti();
            gridClients.ItemsSource = list;
        }

Infine, nello XAML:

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBox Grid.Row="0" Width="200" HorizontalAlignment="Left" Margin="10,10,0,10"
                    Name="txtSearch" />
            <DataGrid Grid.Row="1" Height="751" VerticalAlignment="Top" x:Name="gridClients"
                      AutoGenerateColumns="False" CanUserResizeRows="False" IsReadOnly="True"
                      MouseDoubleClick="gridClients_MouseDoubleClick">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding clienteCodice}" Header="CODE" />
                    <DataGridTextColumn Binding="{Binding clienteRagsoc}" Header="NAME" />
                    <DataGridTextColumn Binding="{Binding clienteEmail}" Header="EMAIL" />
                    <DataGridTextColumn Binding="{Binding clientePiva}" Header="P.IVA" />
                </DataGrid.Columns>
            </DataGrid>
        </Grid>

Fate attenzione ai Binding: vedete che hanno lo stesso nome delle variabili della nostra classe Cliente.

Una miglioria da apportare, sarebbe quella di prendere i dati in maniera asicrona, in modo da non bloccare tutta la gui.

Enjoy!