Introduction
Following on from my previous article on consuming an RSS feed, I recently had a requirement to display the contents from an Atom feed on a web page. In fact this was to display the contents of my very own Github activity feed on my web site.
I won't compare and contrast RSS with Atom in this article. There are plenty of sources out there that have alredy done that.
Displaying an Atom feed on a web site is relatively simple. In its simplest terms an Atom feed is an XML structure that contains data which can be displayed on a web page. Atom feeds are used by many different kinds of web sites to push information. Users who are interested in that information can then subscribe to those Atom feeds by consuming them.
Structure of an Atom feed
Atom feeds have the following basic structure. Other information is contained within them but for the purposes of brevity these have been removed.
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Example Feed</title>
<subtitle>A subtitle.</subtitle>
<link href="http://example.org/feed/" rel="self" />
<link href="http://example.org/" />
<id>urn:uuid:60a76c80-d399-11d9-b91C-0003939e0af6</id>
<updated>2003-12-13T18:30:02Z</updated>
<entry>
<title>My Atom feed</title>
<link href="http://example.org/2003/12/13/atom03" />
<link rel="alternate" type="text/html" href="http://example.org/2003/12/13/atom03.html"/>
<link rel="edit" href="http://example.org/2003/12/13/atom03/edit"/>
<id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
<updated>2003-12-13T18:30:02Z</updated>
<summary>Some summary text.</summary>
<content type="xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>This is the entry content in HTML format.</p>
</div>
</content>
<author>
<name>Dominic Burford</name>
<email>example@mydomain.co.uk</email>
</author>
</entry>
</feed>
The information that I was interested in for my web site were the Title
, Description
and Publication Date
items from the Atom feed.
Consuming an Atom feed
There are several different ways to achieve this, so this is just one way. I have implemented this using an ASP.NET web form but the general principle can be applied to other technologies.
- Firstly I added a
Gridview
control to my web page. A Repeater
control is also perfectly acceptable,
<asp:GridView ID="gvAtom" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table width="100%" border="0" cellpadding="0" cellspacing="5">
<tr>
<h3 style="color:#3E7CFF"><%#Eval("Title") %></h3>
</tr>
<tr>
<%#Eval("PublishDate") %>
</tr>
<tr>
<td colspan="2">
<hr />
<%#Eval("Description") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
- In the code behind I have added a new method to populate the
Gridview
control with data from the Atom feed as follows.
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Globalization;
using System.Linq;
using System.Xml.Linq;
using System.ServiceModel.Syndication;
using System.Xml;
protected void Page_Load(object sender, EventArgs e)
{
this.PopulateAtomFeed();
}
private void PopulateAtomFeed()
{
string atomFeedUrl = ConfigurationManager.AppSettings["AtomFeedUrl"];
List<Feeds> feeds = new List<Feeds>();
XmlTextReader reader = new XmlTextReader(atomFeedUrl);
SyndicationFeed feed = SyndicationFeed.Load(reader);
if (feed != null)
{
feeds.AddRange(feed.Items.Select(i => new Feeds
{
Title = i.Title.Text,
PublishDate = i.PublishDate.DateTime.ToUniversalTime().ToString(CultureInfo.InvariantCulture),
Description = ((TextSyndicationContent)(i.Content)).Text
}));
}
gvAtom.DataSource = feeds;
gvAtom.DataBind();
}
- I then created a simple POCO
Feed
class that mapped the Atom feed items to the Gridview
control.
public class Feeds
{
public string Title { get; set; }
public string PublishDate { get; set; }
public string Description { get; set; }
}
- I store the URL to my Atom feed in the web.config. This ensures that the URL can be easily changed if necessary.
<appSettings>
<add key="AtomFeedUrl" value="http://www.somedomain.com/Atomfeed.Atom"/>
</appSettings>
Summary
And that's all there is to it. As can be seen from the link I provided you can view the Atom feed yourself on my web site.
If you are likely to display multiple Atom feeds then you can easily create a User Control and add the Gridview
to this. To make the User Control reusable you could add a public property to the User Control to set the Atom feed URL. You then add the User Control to your web page and set the Atom feed URL property as required.
Hopefully this article has given you sufficient information for you to start consuming Atom feeds in your own applications. Feel free to leave a comment if you would like me to further elaborate on anything within this article.