load json data to wpf datagrid

Question

I want to load json data to my wpf datagrid. I have followed this tutorial: http://wpf-4-0.blogspot.com/2012/12/how-to-bind-json-data-to-datagrid-in.html

But something is going wrong and I am not sure where is the problem.

---

my xaml code:

<Button Click="btnLoad_Click" Content="Load" Width="50" Grid.Row="0"></Button>
<DataGrid Grid.Row="1" x:Name="albuminfo" AutoGenerateColumns="True"></DataGrid>

C# code:

    private void btnLoad_Click(object sender, RoutedEventArgs e)
    {
        WebRequest req = WebRequest.Create("http://coderomusic.com/beta/SecuredAdministrator/mobile/getInfo.php?_mod=album");
        req.ContentType = "application/json";
        WebResponse resp = req.GetResponse();
        Stream stream = resp.GetResponseStream();
        StreamReader re = new StreamReader(stream);
        string json = re.ReadToEnd();
        json = "{\"AlbumDetail\":" + json + "}";

        Wrapper w = (Wrapper)new JavaScriptSerializer().Deserialize(json, typeof(Wrapper));

        albuminfo.ItemsSource = w.albumdetail;
    }

AlbumDetail class:

public class AlbumDetail
{
    #region//private property

    private int albumId;
    private string albumName;
    private DateTime releasedate;
    private int productionId;
    private string duration;
    private string category;
    private string themes;
    private ImageBrush coverImage;
    private ImageBrush profileImage;
    private string description;
    private double albumPrice;
    private double specialPrice;
    private int[] artistIds;

    #endregion


    #region//public property

    public int[] ArtistIds
    {
        get { return artistIds; }
        set { artistIds = value; }
    }


    public double SpecialPrice
    {
        get { return specialPrice; }
        set { specialPrice = value; }
    }


    public double AlbumPrice
    {
        get { return albumPrice; }
        set { albumPrice = value; }
    }

    public string Description
    {
        get { return description; }
        set { description = value; }
    }

    public ImageBrush ProfileImage
    {
        get { return profileImage; }
        set { profileImage = value; }
    }

    public ImageBrush CoverImage
    {
        get { return coverImage; }
        set { coverImage = value; }
    }

    public string Themes
    {
        get { return themes; }
        set { themes = value; }
    }

    public string Category
    {
        get { return category; }
        set { category = value; }
    }

    public string Duration
    {
        get { return duration; }
        set { duration = value; }
    }

    public int ProductionId
    {
        get { return productionId; }
        set { productionId = value; }
    }

    public DateTime Releasedate
    {
        get { return releasedate; }
        set { releasedate = value; }
    }

    public string AlbumName
    {
        get { return albumName; }
        set { albumName = value; }
    }

    public int AlbumId
    {
        get { return albumId; }
        set { albumId = value; }
    }

    #endregion
}

and Wrapper class:

public class Wrapper
{
    public List<AlbumDetail> albumdetail { get; set; }
}

The end result looks like below image: https://dl.dropboxusercontent.com/u/59201118/json.JPG (dropbox link because i'm not allowed to post image!)

Answer 1

Simple and easy way use jsonorm from nuget and create a data layer from received json by (http://json2csharp.com/)

Answer 2

You should make the web request on a background thread and then update the UI using the dispatcher object. I have modified your code to make it work. Here are the important bits,

    private static readonly ManualResetEvent AllDone = new ManualResetEvent(false);
    private void BtnLoadClick(object sender, RoutedEventArgs e)
    {
        var request =
            (HttpWebRequest)
            WebRequest.Create("http://coderomusic.com/beta/SecuredAdministrator/mobile/getInfo.php?_mod=album");
        request.ContentType = "application/json";
        request.BeginGetResponse(GetResponseCallback, request);
        AllDone.WaitOne();
    }

    private void GetResponseCallback(IAsyncResult ar)
    {
        var request = (HttpWebRequest) ar.AsyncState;
        var response = (HttpWebResponse) request.EndGetResponse(ar);
        Stream stream = response.GetResponseStream();
        Wrapper w = null;
        if (stream != null)
        {
            var re = new StreamReader(stream);
            string json = re.ReadToEnd();
            w = (Wrapper) new JavaScriptSerializer().Deserialize(json, typeof (Wrapper));
        }

        Dispatcher.BeginInvoke(
            new Action(() => {
                                 if (w != null)
                                     albuminfo.ItemsSource = new ObservableCollection<AlbumDetail>(w.AlbumDetail);
            }));
        response.Close();
        AllDone.Set();
    }

Change it to suit your needs. I hope it works.