如何在Windows Store App中通过Web API（在线服务）和xaml UI绑定JSON数据？

Question

I am developing my first application in Windows 8. I saw tutorial from Channel 9 of Windows 8 http://channel9.msdn.com/Series/Windows-Store-apps-for-Absolute-Beginners-with-C-# I want to make a demo app where data is come through web services But I can't able to make DataSource.cs file for JSON Data Which I recieve through Web Service.

This is my JSON Data come throgh Web Services..

[
    {
        "id": "1",
        "title": "Test_rom",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.1.png"
    },
    {
        "id": "2",
        "title": "Jewelry",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.2.png"
    },
    {
        "id": "3",
        "title": "Jackets",
        "subtitle": "All sizes available",
        "icon": "http://lpl.info/Admin/upload/cat.3.png"
    },
    {
        "id": "4",
        "title": "Dresses",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.4.png"
    },
    {
        "id": "5",
        "title": "Bags",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.5.png"
    },
    {
        "id": "6",
        "title": "Watches",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.6.png"
    },
    {
        "id": "8",
        "title": "Glasses",
        "subtitle": "",
        "icon": "http://lpl.info/Admin/upload/cat.8.png"
    }
]

Now I want to make a Grid Template For these Group Category JSON DATA. But I am new in this field and I tried to bind this with XAML UI But I failed.

I try a lot to find some related code But All code are for windows phone 8 and i want for windows 8 Metro Application.

These are the code in XAML Where i got confuse.

  <Page.Resources>

        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="Items"
            d:Source="{Binding Groups, Source={d:DesignInstance Type=local:RootObject, CreateList=True}}"/>
    </Page.Resources>

AND

protected override void LoadState(Object navigationParameter, Dictionary<string,> pageState)
{
OsCatalogData os = new OsCatalogData();
os.GetJson(Constants.OscatalogMenulist, "HomePagemenu");

// TODO: Create an appropriate data model for your problem domain to replace the sample data

this.DefaultViewModel["Group"] = os.?????; 

}

And I am trying to develop it from so many days. Can anyone Help?? I don't want fully code But some material where can i fulfill my requirement....

Thanks in advance....

Answer 1

What I undersatand from your question - you are having a problem in parsing the json data, that you want to use .Hope I will be right -

1 => Install Newtonsoft.json nuget package. it will be used for parsing json efficiently and very easy to use.

2 => Now create a RootObject Class ( Name it accordingly - it is a simple Data Parser Class ).

public class RootObject
{
    public string id { get; set; }
    public string title { get; set; }
    public string subtitle { get; set; }
    public string icon { get; set; }
}

3 => Now your Json represent a List/Array of these Class Objects of What actually your json Type is List so parse it like this.

var groups= JsonConvert.DeserializeObject<List<RootObject>>(yourJson);

Now your groups contains your data in the form C# Class now you can use them according to your need.

Answer 2

Read this http://prathapk.net/consuming-web-api-in-windows-phone-8/ and this http://www.asp.net/web-api/overview/advanced/calling-a-web-api-from-a-net-client

PS: Use "Group" and not "Groups" when you bind them. I hope this will help you. Got here searching for a similar problem.