Building a User Control that Displays RSS Feeds Using a DataList and an XmlDataSource ControlBy Scott Mitchell
Displaying data in ASP.NET verison 1.x required writing code to programmatically retrieve the data and then more code to bind the data to a data Web control, such as the DataGrid. ASP.NET 2.0 simplifies the process of working with data through its data source controls, which allow data to be retrieved and even modified through declarative means. In short, ASP.NET 2.0's data source controls permit developers to work with and display data without having to write a line of code. For a more thorough look at working with data in ASP.NET 2.0, be sure to check out my Accessing and Updating Data in ASP.NET 2.0 article series.
Different data source controls are designed to work with different types of data. The XmlDataSource control, as its name implies, is designed for working with XML data. By setting a few properties, it is possible to retrieve XML data from a remote URL or local file, transform it using XSLT, and filter it using an XPath expression, all without writing a line of code. This data can then be displayed by binding it to a data Web control and XPath databinding statements can be used to bind specific chunks of the resulting XML to other Web controls.
In this article we will see just how easy it is to display XML data in an ASP.NET 2.0 page. In particular, we will build a User Control that
will display the contents of an RSS feed. Once created, this User Control can be
dragged onto the Design surface of any ASP.NET page in your project and configured to display the contents of a particular RSS feed by simply
setting the control's
Url property to the URL of the RSS feed. Read on to learn more!
RSS and Techniques for Displaying RSS Feeds on an ASP.NET Web Page
Really Simple Syndication (RSS) is an XML file format designed to syndicate content. RSS enables content producers to share abstracts of their most recent content in a machine-readable format. These days, virtually all content producing sites provide one or more RSS feeds, such as news sites, sports sites, and blogs. Any website that is producing content on a regular or semi-regular basis can help spread and expose its content to a wider audience by providing RSS feeds. These published RSS feeds, then, can be consumed by interested readers in a variety of ways: through stand-alone RSS readers (like RssBandit); through a "portal" website like MyYahoo! or the personalized Google homepage; or programmatically, such as through an ASP.NET web page - the focus of this article.
|Syndicating Your Website's Content with RSS|
|This article focuses on consuming existing RSS feeds from an ASP.NET page. If you are interested in producing an RSS feed to syndicate your website's content, refer to Syndicating Your Web Site's Content with RSS and Syndicating Your Web Site's Content with RSS and ASP.NET. Also check out Erich Peterson's article, Personalizing RSS Feeds with ASP.NET 2.0.|
A mastery of the RSS standard is not necessary for this article, but a cursory understanding is recommended. For a quick summary on the main elements of an RSS feed, see the RSS 2.0 specification. It provides a breakdown of the core XML elements and gives plenty of examples. Refer to the "A Primer on RSS" section in Personalizing RSS Feeds with ASP.NET 2.0 for a more concise overview.
There are a variety of ways to display an RSS feed on an ASP.NET page. In this article we will look at using the XmlDataSource control and a DataList, wrapping these controls within a User Control. While the User Control we will build will provide an encapsulated construct for displaying an RSS feed, one that can be added to multiple pages in the web application by simply dragging and dropping the User Control on the pages, it has a number of limitations. These include limited customizability and styling support. Also, the User Control only works with feeds using RSS version 2.0, and will not work if pointed to a feed that uses RSS version 1.0. For much more control over displaying RSS feeds, as well as for an easy-to-use API for accessing and programmatically working with RSS data, consider using my free and open-source RssFeed server control.
Over the next few sections we will be building a User Control that displays an RSS feed. The complete code is available for download at the end of this article. If you want to create your own User Control and follow along as you are reading this article, start by creating a new ASP.NET website in Visual Studio 2005 and then add a new User Control to the site.
Retrieving XML Data with the XmlDataSource
In order to display RSS data in a web page, we must first retrieve the RSS feed's underlying XML data. This can be done declaratively using the XmlDataSource control. The XmlDataSource control exists merely as a proxy for retrieving XML data, which can then be programmatically accessed or bound to a data Web control. That is, the XmlDataSource control does not display XML data, it just retrieves it.
Start by dragging an XmlDataSource control onto the User Control (the XmlDataSource control is found in the Data section of the Toolbox). Set
ID property to
the XmlDataSource's smart tag, click the "Configure Data Source" link to bring up the Configure Data Source wizard (shown below).
From the wizard, you can set the XmlDataSource control's three most useful properties:
DataFile- specifies the file that contains the XML data to access. This can be a local file, like
~/App_Data/XMLFile.xml, or a remote file, like
TransformFile- XML documents can be transformed from one structure to another using a markup language known as XSL Transformations, or XSLT. If you want to transform the XML contents in
DataFilebefore working with the XML data, specify the XSLT file to perform the transformation here. For more information on XSLT, check out the XSLT Tutorial at W3 Schools.
XPath- XPath is an XML syntax used to filter the contents of an XML document, returning a particular value or nodeset. If you want to work with a particular set of XML data, specify an XPath expression here to limit the results. See W3 School's XPath tutorial for more information.
The page developer using our User Control will need to specify the the
DataFile property value, so leave this blank. Also leave the
TransformFile textbox empty, since we do not need to transform the RSS data. Since we want our User Control to display each content
item in the RSS feed, we need to set the
XPath property so that it returns the set of content items. Since each content item is
contained within an
<item> element, which is a child of the
<channel> element, which is a child of the
<rss> element, enter the following XPath statement into the
At this point the XmlDataSource control's
XPath property is appropriately set, but we have yet to specify the
This, as aforementioned, will be specified by the page developer using the User Control. Therefore, we need to add a property to this User Control
that allows the page developer to specify the URL to the RSS feed. Create a property named
Url and have it simply return and assign
the property value to the XmlDataSource control's
DataFile property, like so:
As a final enhancement, you can set the XmlDataSource's
property to the number of seconds you want the XML data cached. If you do not set this value, each and every time anyone visits a web page
with this User Control, an HTTP request will be made to the RSS feed to retrieve its contents. Also, it's bad netiquette to frequently request
an RSS feed. The User Control available at the end of this article has the
CacheDuration property set to 600, which caches the
RSS feed for 10 minutes.
Displaying the RSS Feed
We can use any data Web control to display the XML data returned by the XmlDataSource control. The DataList or Repeater, however, will give us the most flexibility in the formatting and layout of the output. I have decided to use a DataList for this User Control. If you are following along, drag a DataList from the Toolbox onto the User Control's Designer and then, from its smart tag, bind it to the XmlDataSource (
RssData). Next, edit the DataList's
ItemTemplateso that there are Web controls for displaying the title, published date, and description. I used a HyperLink control for the title so that I could display the title as a link pointing back to the original content item.
At this point we have an XmlDataSource that returns a set of
<item> elements bound to the DataList that has Web controls
in place to display particular values from each
<item> element. Each
<item> element may have additional
sub-elements to describe information about the content item, including:
<title>- the title of the content item
<link>- the URL of the content item
<description>- a brief synopsis of the content item
<pubDate>- the date and time the content item was published
<item>element bound to the DataList, use the following databinding expression:
XPath("XPath expression"). For example, to bind the contents of the
<title>element to the
Textproperty of the HyperLink, assign the
Textproperty the value of
Alternatively, this can be done through the Designer by selecting the HyperLink (or Label) from the Edit Template interface and, from the HyperLink's
(or Label's) smart tag choosing Edit DataBindings. This will bring up the DataBindings dialog box (shown below) from which you can specify the databinding
expression for a particular property. The screen shot below shows the assignment of the
XPath("title") databinding expression to
That's all there is to it!
Enhancing the Display
Currently the DataList control used to display the RSS feeds does not have any stylistic properties set and, consequently, produces a rather bland output. To remedy this, we have three options:
- Hard code style settings in the DataList - this approach is the easiest to implement. Simply set the various style properties for the DataList directly in the User Control. The downside with this approach, however, is that it locks in the style settings to be the same across all web pages. That is, if this User Control is used on two web pages in our application, the appearance of the control will be the same in both pages.
- Hard code values for the Web controls'
CssClassproperties - rather than setting the style properties directly, we can introduce a layer of abstraction by using the
CssClassproperties. For example, rather than setting the font-related properties in the DataList control, we could instead set the DataList control's
RssClass. Then, at each page where the User Control was used, we could define a CSS class named
RssClassthat specified the style for the User Control specific to that page.
- Add Properties to the User Control that affects the style and appearance - this approach offers the most flexibility, but requires the most effort.
CellPaddingproperties are hard coded. The User Control provides three properties for specifying style information:
ShowDescription- a Boolean value. If set to True (the default), then the value from the content item's
<description>element is displayed; if it is set to False, the description is hidden. In order to get this property to work, you need to tap into the DataList's
ItemDataBoundevent handler, which fires once for each item added to the DataList. From this event handler we can programmatically reference the Label Web control used to display the content item's description and set its
Visibleproperty to the value of
ItemStyle- style information for the DataList's items.
AlternatingItemStyle- style information for the DataList's alternating items.
Adding the User Control to an ASP.NET Web Page and Displaying an RSS Feed
To display an RSS feed using this User Control, start by dragging the User Control from the Solution Explorer onto the page's Design surface. Next, you can specify the User Control's
Urlproperty either through the Properties window or programmatically. The download at the end of this article includes a sample ASP.NET web page that sets the
Urlproperty and some style-related properties through code in the ASP.NET page's
Page_Loadevent handler. The screen shot below shows the resulting output when setting the
Urlproperty to my blog's RSS feed, the
ShowDescriptionproperty to False, and the style-related properties so that the content is displayed using the Verdana font and alternating items' backcolors to Yellow.