Getting started with Web Requests & JSON in Windows Phone


This is a beginner level post to get you started with JSON, familiarize you with basic communication with web server and Facebook Graph API. Consider a scenario where you want to grab details of a particular Facebook page or a person’s profile in Windows Phone app. A standard practice is to use Facebook Graph API which is a social graph. To begin with you can grab JSON output of a particular page by calling the Facebook graph API end point,

http://graph.facebook.com/<PageNameHere>

Calling this Url you’ll get a JSON reply that will include the details of the particular page. For example calling Microsoft Pakistan’s Developers Facebook page would be like so,

http://graph.facebook.com/msftpk

 

You can open this file using any standard text processor. Studying this document provides a brief overview of the output attributes per pages returned.

Now here comes the interesting part; how would you parse the JSON into relevant C# objects? There are two important considerations here,

1)      To convert JSON string to corresponding C# objects you can simply visit http://json2csharp.com/ and paste JSON response grabbed from the page and click Generate. This online utility will parse the JSOn and generate POCO classes ready to be replicated in the code.

2)      To fill these objects you’ll have to make use of Newton Soft’s JSON .NET which is an open source utility available at http://json.codeplex.com/

After you have downloaded JSON .NET DLL’s and made the PCOO classes and add a reference to that in your code. Keeping the attributes in consideration for this particular app our implementation carries page looks like so.

 

Given the classes and magic of data binding, we’ll bind class level properties with text blocks on UI,

 

On the button event handler in XAML we’ll download the string from graph API using web client object, and then will deserialize the object using JSON .NET relative classes,

1)      Downloading data using WebClient.

 

 Here you download the data using webclient there is an async method so there must be a completed event for that.

 2)      Deserializing the object.

 

In the completed event we deserialize the object using JsonConvert class available as part of JSON .NET

 

Consider the last chunk of code. That’s used to display cover photo of relative page. How will we display the image from an external Url? Since ImageSource property of ImageBrush allows us to pass an external image Url so we’ll simply instantiate a ImageBrush object and assign that as stack panel’s background. Let’s execute the app and call the Graph API end point to retrieve details for Microsoft Pakistan’s Facebook,

 

Facebook Feed.zip

Comments (13)

  1. abrulrehman altaf says:

    Zabardast….

  2. Daniel Plaisted says:

    I'd recommend using the HttpClient APIs which we recently released for Windows Phone.  They provide a nicer, async way of making HTTP requests.  For example, you don't need to split your code into a separate callback, you simply use the C# await keyword.

    See this blog post for more info: blogs.msdn.com/…/get-httpclient-rtm-200-ok.aspx

  3. where can i find code for this example?

  4. Bilal Azhar, the code is posted.

  5. tonis says:

    There's typo in the graph.facebook.coom/msftpk .. One o-letter too much. Thanks for the article!

  6. Usman Ur Rehman Ahmed says:

    Thanks Tonis, its fixed. 🙂

  7. Mallikarjun says:

    Hi,

    I am new to windows phone 8 development. I have made a folder in my solution explorer and have placed one json file in it.the json file contains country names and Country phone extensions,so, I want to read that json file and want to display in longlistselector.

    How to do this? please help me ,it's an urgent work.

    Thanks in advance,

    Mallikarjun

    Mail Id:- mail2mallig@gmail.com

  8. Aiyion:Prime says:

    "Thanks Tonis, its fixed. :)"

    Actually, its not 😛

    Nice Tutorial, thx for working this out!

  9. Allan says:

    How can one scroll through images from url page by page loading an image after the other?

  10. Lucifer says:

    it is showing RootObject can not be found…:(

  11. Junaid Ahmed says:

    Good Example showing

  12. Waqas Kanju says:

    Can you make this Example in WIndows 8.1 Plz.

Skip to main content