To read the article online, visit http://www.4GuysFromRolla.com/articles/061307-1.aspx

Building a User Control that Displays RSS Feeds Using a DataList and an XmlDataSource Control

By Scott Mitchell


Introduction


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 the control's ID property to RssData. From 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 http://msdn.microsoft.com/rss.xml.
  • 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 DataFile before 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 XmlDataSource control wizard.

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 XPath textbox: /rss/channel/item.

At this point the XmlDataSource control's XPath property is appropriately set, but we have yet to specify the DataFile value. 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:

public string Url
{
    get { return RssData.DataFile; }
    set { RssData.DataFile = value; }
}

As a final enhancement, you can set the XmlDataSource's CacheDuration 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 ItemTemplate so 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
To access a particular piece of each <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 Text property of the HyperLink, assign the Text property the value of XPath("title") like so:

<asp:HyperLink runat="server" ... Text='<%# XPath("title") %>' ... />

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 the HyperLink's Text property.

Bind the XPath expression to the HyperLink's Text property.

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' CssClass properties - rather than setting the style properties directly, we can introduce a layer of abstraction by using the CssClass properties. For example, rather than setting the font-related properties in the DataList control, we could instead set the DataList control's CssClass property to RssClass. Then, at each page where the User Control was used, we could define a CSS class named RssClass that 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.
The User Control available at the end of this article has both hard coded style settings and some properties for specifying style. In particular, the DataList's border-related and CellPadding properties 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 ItemDataBound event 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 Visible property to the value of ShowDescription.
  • ItemStyle - style information for the DataList's items.
  • AlternatingItemStyle - style information for the DataList's alternating items.
Feel free to add additional style properties to the User Control as needed.

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 Url property 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 Url property and some style-related properties through code in the ASP.NET page's Page_Load event handler. The screen shot below shows the resulting output when setting the Url property to my blog's RSS feed, the ShowDescription property to False, and the style-related properties so that the content is displayed using the Verdana font and alternating items' backcolors to Yellow.

The RSS feed's content is outputted.

Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the demo application used in this article
  • Recommended Articles


  • Retrieving XML Data with XmlDataSource Control
  • Personalizing RSS Feeds with ASP.NET 2.0
  • RssFeed :: Project Page
  • Article Information
    Article Title: ASP.NET.Building a User Control that Displays RSS Feeds Using a DataList and an XmlDataSource Control
    Article Author: Scott Mitchell
    Published Date: June 13, 2007
    Article URL: http://www.4GuysFromRolla.com/articles/061307-1.aspx


    Copyright 2014 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers