Agile Zone is brought to you in partnership with:

I am developer and technology maniac who is working on Microsoft and PHP technologies. I have ASP.NET MVP title and I hold MCAD, MCSD and MCTS certificates. When I have free time I usually play with new technologies, hack something, read books, participate in communities and speak in events. I am also active blogger and my ASP.NET blog is the place you can find some interesting reading about my discoveries and personal thoughts. Gunnar is a DZone MVB and is not an employee of DZone and has posted 136 posts at DZone. You can read more from them at their website. View Full User Profile

Creating Twitpic client using ASP.NET and OData

11.22.2010
| 6965 views |
  • submit to reddit

Open Data Protocol (OData) is one of new HTTP based protocols for updating and querying data. It is simple protocol and it makes use of other protocols like HTTP, ATOM and JSON. One of sites that allows to consume their data over OData protocol is Twitpic – the picture service for Twitter. In this posting I will show you how to build simple Twitpic client using ASP.NET.

Source code

You can find source code of this example from Visual Studio 2010 experiments repository at GitHub.

Source code @ GitHub Source code repository
GitHub

Simple image editor belongs to Experiments.OData solution, project name is Experiments.OData.TwitPicClient.

Sample application

My sample application is simple. It has some usernames on left side that user can select. There is also textbox to filter images. If user inserts something to textbox then string inserted to textbox is searched from message part of pictures. Results are shown like on the following screenshot.

My twitpic client
Click on image to see it at original size.

Maximum number of images returned by one request is limited to ten. You can change the limit or remove it. It is hear just to show you how queries can be done.

Querying Twitpic

I wrote this application on Visual Studio 2010. To get Twitpic data there I did nothing special – just added service reference to Twitpic OData service that is located at http://odata.twitpic.com/. Visual Studio understands the format and generates all classes for you so you can start using the service immediately.

Now let’s see the how to query OData service. This is the Page_Load method of my default page. Note how I built LINQ query step-by-step here.

protected override void OnLoad(EventArgs e)
{
var uri = new Uri("http://odata.twitpic.com/");

var user = Request.QueryString["user"];
if (string.IsNullOrWhiteSpace(user))
{
user = "gpeipman";
}

var client = new TwitpicData.TwitpicData(uri);
client.IgnoreMissingProperties = false;
client.IgnoreResourceNotFoundException = false;

var images = from u in client.Users
from i in u.Images
where u.UserName == user
select i;

if (!string.IsNullOrWhiteSpace(filterField.Text))
{
var searchString = filterField.Text.ToLower();
images = from i in images
where i.Message.ToLower().Contains(searchString)
select i;
}
images = images.OrderByDescending(i => i.Timestamp);

picsByLabel.Text = user;
imagesRepeater.DataSource = images.Take(10);
imagesRepeater.DataBind();
}

My query is built by following steps:

  • create query that joins user and images and add condition for username,
  • if search textbox was filled then add search condition to query,
  • sort data by timestamp to descending order,
  • make query to return only first ten results.

Now let’s see the OData query that is sent to Twitpic OData service. You can click on image to see it at original size.

My OData query in Fiddler2
Click on image to see it at original size.

This is the query that our service client sent to OData service (I searched belgrade from my pictures):

/Users('gpeipman')/Images()?$filter=substringof('belgrade',tolower(Message))&$orderby=Timestamp%20desc&$top=10

If you look at the request string you can see that all conditions I set through LINQ are represented in this URL. The URL is not very short but it has simple syntax and it is easy to read. Answer to our query is pure XML that is mapped to our object model when answer is arrived. There is nothing complex as you can see.

Conclusion

Getting our Twitpic client work and done was extremely simple task. We did nothing special – just added reference to service and wrote one simple LINQ query that we gave to repeater that shows data. As we saw from monitoring proxy server report then the answer is a little bit messy but still easy XML that we can read also using some XML library if we don’t have any better option. You can find more OData services from OData producers page.

References
Published at DZone with permission of Gunnar Peipman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)