I have been working on my website some more (finally had some free time J and I want to add an RSS feed to show the ‘Latest Tuesday Night Squash Results’ on my site. I thought it would be nice to show the results each week of who won (rather than going to an external site). A good idea, especially if you win J I will do this via an RSS feed. My two goals are:

 

1)      Have current information;

2)      Make it look nice (formatted well)

 

An RSS feed is a way to ‘subscribe’ to a website to get the latest news. Think of it as getting the newspaper each day, each morning you get the most current and latest news. An RSS feed is exactly the same thing, you get the latest information from another website. It might get updated daily, monthly or even longer (Incidentally – you can subscribe to this blog via an RSS feed also - see top right).

 

Now, what do I need to do in Expression Web? There are 3 approaches I looked at.

 

1)     HTML Page Drag/Drop support

2)     ASP .NET RSS Toolkit

3)     ASP .NET Code for external .xml/.xsl files

 

I also talk about XSL to show how to format the content.

 

HTML Page Drag/Drop support

Firstly you need to get the structure of your RSS feed. That is as simple as getting an XML file from the site you want a feed from (Note: this does not work on any webpage, the website needs to enable RSS. A good way to know is in IE7 the RSS icon – orange icon becomes ‘bright’ if a site you visit supports RSS).

 

Anyway, back to it. Each RSS webpage is XML. The steps are:

 

-        In your site (in Expression Web) open a HTML page

-        Go to your favourite RSS enabled website (with the orange ‘light’ in IE7) – for example: http://rss.cnn.com/rss/cnn_topstories.rss

-        Right Click | View Source

-        Save locally as an .xml file (not txt)

 

You need to get this .xml file into Expression Web. You have 2 options here:

 

1)      Go to the Data Source Library and “Add an XML file” OR

2)      Add it as a file to your folder list (you’ll notice this) adds it to the Data Source Library.

 

Now drag and drop the xml file onto a HTML page (from either the Folder List or Data Source Library). This will create a <div> and <iframe> for you. In the <iframe> you will see an onload event. This points to the local xml file. All you need to do now is change that on load URL to point to the rss site. Voilà. You’ll notice that when you do the drag/drop onto the design view an xsl file is created. This XSL file is the styling applied to your view. A nice and easy way to edit the format is via the Common Data View Tasks on the top right of the div.

 

There are some downsides to this, mainly that you get prompted (by the browser) to view the data. A bad user experience.

 

 

ASP .NET RSS Toolkit

Another approach Is to use this very cool RSS toolkit http://blogs.msdn.com/dmitryr/archive/2006/02/21/536552.aspx - Here the site needs to be hosted on ASP .NET. This approach enables you to consume _and_ also post RSS feeds yourself. So it provides much broader functionality then the earlier approach. Here the steps are:

 

Firstly you need to make sure the Expression web sees this custom dll.

-        To do that Install the Toolkit and register the dll in the GAC. It is not as daunting as it sounds:

-        Go to the zip file, and go to the bin directory. If you see the RssToolkit.dll that is the dll you need to register in the GAC. Here is an article on how do to that.  http://www.samspublishing.com/articles/article.asp?p=101748&seqNum=13&rl=1

 

Open Expression Web

-        Create your Website (make sure you have ASPX pages)

-        Add a <%Register%> page directive to your page with the assemblies fully qualified name. The important thing to note here is the _fully qualified name_ that means all the properties to identify the dll in the GAC. Here is an example I added in Expression web:

-         <%@ Register Assembly="RssToolkit, Version=1.0.0.1, Culture=Neutral, PublicKeyToken=02e47a85b237026a" Namespace="RssToolkit" TagPrefix="cc1" %>

-        Note here is that the entire (or ‘fully qualified’ name needs to be added – that means the syntax needs to match what is above).

 

Now your website ‘sees’ the RSSToolkit (not too bad?). So the good news is that you can use the functionality of the toolkit for both receiving RSS feeds and also posting feeds yourself. I tried consuming feeds, following similar steps as above

-        Add your XML file into Expression Web and show the DataSource Details Toolbox

-        Added a DataList control (from the Toolbox) to your site.

 

Stay with me. This is where it gets a little tricky. You should have something like this in your page:

 

<asp:DataList runat=”server” id=”DataList1”>

</asp:DataList>

 

You need to hook up the DataList to your RSS feed. This might require a little tweaks based on your specific scenario. There are 2 tasks you need to do: 1) Hook up the RSS Source (via the <cc1:RssDataSource> tag) and 2) Hook up the elements you want displayed (based off your schema). To give you an example below:

 

To give you an example of the syntax:

<asp:DataList ID="DataList1" runat="server" DataSourceID="RssDataSource1">

            <ItemTemplate>

               Title:

                <asp:Label ID="Title" runat="server" Text='<%# Eval("Title") %>'></asp:Label><br />

                                      <!—This is hooking up what elements of the schema to display. Here I’m displaying the Title of the most current news from CNN  à         

            </ItemTemplate>

        </asp:DataList><cc1:RssDataSource ID="RssDataSource1" runat="server" Url="Your RSS URL Feed here">

                                      <!—This is hooking up the data source à

        </cc1:RssDataSource>

 

You will need to tweak the “asp:labels” to display the correct schema (based on your RSS feed). Applying styling here is easy. You can use the tooltip (top right of the DataList and you can also use themes – see earlier posting)

 

The advantage of this approach is that you do not get prompted by the browser and you also can make you site RSS enabled. So folks can subscribe to your website (more on that later). But at a fundamental level it is an easy way to integrate RSS into your site.

 

ASP .NET Code for external .xml/.xsl files

The 3rd (and final) approach is also simple. This requires copying some code into your page. This approach does not require an .xml file in your project to give you the schema. Rather it uses code to retrieve the XML structure and styling (XSL) dynamically through code. The nice thing about this approach is that you can use absolute URLs. The code is below.

 

The steps are:

 

-        Create Site

-        Copy code (into master page or ASPX page) - below

-        Run

 

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Xml"%>
<%@ Import Namespace="System.Xml.Xsl"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script type="text/javascript" runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        // Load the XML and XSL
        XslTransform mm = new XslTransform();
        mm.Load("
http://msdn.microsoft.com/rsspretty.xsl");
        XmlDocument doc = new XmlDocument();
        doc.Load(“Your RSS Feed URL Here");
 
        // Set up the XML control
        xml1.XPathNavigator = doc.CreateNavigator();
        xml1.Transform = mm;
    }
 
</script>
</head>
<body>

<form id="form1" runat="server">
 
 <asp:Xml runat="server" id="xml1" documentSource="Your RSS Feed URL Here ">
 </asp:Xml>
</form>

</body>
</html>

You can see that I used an external xsl style sheet (http://msdn.microsoft.com/rsspretty.xsl). Here I am using a xsl from MSDN. But you can use whatever you like. 

 

Summary

Hope that helps you solve your problems (ie. “How do I add an RSS feed in Expression Web”). If you have questions or problems let me know. I’m happy to help!

 

andrew