Recently, Qwerty.ie has added an “Articles Of Interest” frame on the right side of the page, showing a few headings of articles you may like. This was then followed by a page which contained these articles. Both these new features were implemented using the same code;
1. Create an XmlDataSource to read the feed
2. Convert that XML file using a transform file
3. Then pick the information you want and spit it out.
In this case, the feed is my Google Shared Items and what I want is the Atom feed. The XML data source will then look something like this:
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="http://www.google.com/reader/public/atom/user%2F09273155649058582636%2Fstate%2Fcom.google%2Fbroadcast"
XPath="feed/entry [position()<=10]"
TransformFile="~/RemoveNamespace.xsl"
EnableCaching="False">
</asp:XmlDataSource>
The ‘DataFile’ provides the atom feed while the XPath points to an ‘entry’ node with in the field. I’ve also included a piece of code which tells the data source to only read the first 10 items, [position() <=10]. If you wanted to get all items then you can remove that code.
Namespaces
There is a well documented issue which highlights the fact that XmlDataSource does not support XML files that use namespaces. This problem can be over come by creating an xsl file to transform the XML. To do this, create a new XSLT file and paste in the following code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="*">
<!-- Remove any prefixes -->
<xsl:element name="{local-name()}">
<!-- Work through attributes -->
<xsl:for-each select="@*">
<!-- Remove any attribute prefixes -->
<xsl:attribute name="{local-name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
Save this as RemoveNamespace.xsl and then add the location to the TransformFile in your XmlDataSource.
Displaying The Feed
Now we’ve selected our feed, created an XmlDataSource to get the information and created an XSL file to deal with namespaces in the feed. All that’s left is to put the information on a webpage. For the side bar, I only want to display the article headings which will link to the actual article. Where as for the Articles Of Interest page I wanted to display the full articles so readers don’t have to open multiple pages or keep flicking back and forth. Here is the code for the main page:
<asp:DataList ID="Articles" CssClass="ArticlesOfInterestPage" runat="server" DataSourceID="XmlDataSource1">
<ItemTemplate>
<li><a target="_blank" class="aoiHead" href='<%# XPath("link/@href") %>'><%# XPath("title")%></a>
<br>
<a target="_blank" class="aoiTail" href='<%# XPath("source/link/@href") %>'><%# XPath("source/title") %></a>
<br></br>
<%# XPath("summary")%>
<%# XPath("content")%>
<br></br>
<hr />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
<br />
<a class="more" href="http://www.google.com/reader/shared/ad.shannon">Read more entries...</a>
</FooterTemplate>
</asp:DataList>
A ASP DataList is used to display the nodes from the XmlDataSource. Remember that we set the XPath to ‘feed/entry’ so each entry from the feed will be one item to be displayed. ‘ItemTemplate’ then gives the layout for displaying each item.
The main page displays the article title which is also a link to the actual article and then underneath it shows where the article comes from with a link to the source website. This is then followed by the summary and contents of the Article; feeds will generally only have a summary or content so you can expect on of these to be blank on the main page.
For the side bar I only display the headings so the additional XPath information can be removed. If you want a full list of information available to you then the easist way is to open up the feed in a browser and exam the XML nodes. For example, if we open up my feed we will see a file that begins like this:
<feed idx:index="no" gr:dir="ltr"><!--
Content-type: Preventing XSRF in IE.
-->
<generator uri="http://www.google.com/reader">Google Reader</generator>
<id>tag:google.com,2005:reader/user/09273155649058582636/state/com.google/broadcast</id>
<link rel="hub" href="http://pubsubhubbub.appspot.com/"/>
<title>Adam's shared items in Google Reader</title>
<gr:continuation>COvAnJDlsqkC</gr:continuation>
<link rel="self" href="http://www.google.com/reader/public/atom/user%2F09273155649058582636%2Fstate%2Fcom.google%2Fbroadcast"/>
<author>
<name>Adam</name>
</author>
<updated>2011-07-06T09:30:47Z</updated>
<entry gr:crawl-timestamp-msec="1309944647160">
<id gr:original-id="">tag:google.com,2005:reader/item/739061728c37177e</id>
<title type="html">Code First Development Using the Entity Framework</title>
<published>2011-07-05T00:00:00Z</published>
<updated>2011-07-05T00:00:00Z</updated>
<link rel="alternate" href="http://aspalliance.com/2067_Code_First_Development_Using_the_Entity_Framework" type="text/html"/>
<summary xml:base="http://aspalliance.com/" type="html">This article will demonstrate how to use the new Code First feature in the Entity Framework 4.1.</summary>
<author>
<name>Vince Varallo</name>
</author>
<source gr:stream-id="feed/http://aspalliance.com/rss.aspx">
<id>tag:google.com,2005:reader/feed/http://aspalliance.com/rss.aspx</id>
<title type="html">ASPAlliance.com - Articles, reviews, and samples for .NET Developers</title>
<link rel="alternate" href="http://aspalliance.com/" type="text/html"/>
</source>
</entry>
<entry gr:crawl-timestamp-msec="1309866492765">
<id gr:original-id="http://www.siliconrepublic.com/business/item/22505-seriously-could-m-payments">tag:google.com,2005:reader/item/2549dee53dd9f5ee</id>
<category term="Business"/>
<title type="html">Seriously? Could m-payments become a US$670bn industry?</title>
<published>2011-07-05T09:33:00Z</published>
<updated>2011-07-05T09:33:00Z</updated>
<link rel="alternate" href="http://www.siliconrepublic.com/business/item/22505-seriously-could-m-payments" type="text/html"/>
<content xml:base="http://www.siliconrepublic.com/" type="html"><p>Google chairman Eric Schmidt recently
...
Now we can clearly see where ‘feed/entry’ comes from and we can also see what nodes are available to us under ‘entry’. Here we can see id, title, published, updated, link, etc. So if we wanted to get the published date then the XPath in our html code would be:
<%# XPath("published") %>
Or to get the author name we would use:
<%# XPath("author/name") %>
And we can also specify properties of the nodes by using @
<%# XPath("link/@href") %>
If you’re unsure what you’re looking at then just check the XML file and take what you need.
What About RSS?
If you are trying to read an Rss feed instead of an Atom feed then the same principles apply but, obviously, the Rss feed will be supplying a different XML file with the nodes named slightly differently. All you need to do is check the file as you did above and identify the node that points to the entry, for Rss 2.0 this will be rss/channel/item, and enter this is the XmlDataSource. Then update the XPath in your HTML code to match the information you need.
Subscribe