Monday, May 7, 2012

Secrets of the Cheese Syndicate– Consuming RSS 101 in asp.net 4.0

Hack the Gibson
RSS or Really Simple Syndication has become unbelievably easy to consume in the 4.0 framework.  In fact, you can completely consume a feed in the amount of time it will take you to read these two sentences.  To implement, you will need two controls – A xmlDataSource and a Repeater. 
xmlDataSource Parameters -
ID – This will be the name that you will use to programmatically reference the control.
runat – As a server control, this will always be set to “server”.
DataFile – The URL to the feed which you wish to consume.
XPath – This takes a little explanation.  This refers to the tree structure (called nodes) of the XML Document.  When you consume the feed, the server sees it as a XML Document and builds the file and then searches for the particular nodes that you are requesting.  So rather than displaying irrelevant data that could be contained in the file (say xml document titles or such) you can drill down to the specific data you want.  XPath is the direction you want to your data.
Repeater Parameters -
ID – Again this is how you wish to programmatically wish to refer to the repeater control.
runat – Server.  Always.
DataSourceID – This is the ID of the control that holds our dataset.  In this particular instance it will be our ID parameter of the xmlDataSource.
Design v. Source Ok, here’s the deal.  I absolutely HATE the design IDE of Visual Studio.  For one thing, if you switch to it, it will “correct” your code and add tags and such that in my experience, does nothing but completely destroys and wastes my time.  I absolutely refuse to use it and have actually turned down jobs that have asked interview questions about it.  In my mind it is pretty much AOL for the internet or iPads for tablets (Sorry for you Apple peoples).  It is the kindergarten version of the Source IDE and needs to be removed.  Only amateurs and beginners use it.  Just my opinion, but all code in this blog will be represented by the Source or Code IDEs.
That being said, let’s move on to the source code.  For the xmlDataSource, our code will use the above mentioned Parameters and look like -
<asp:XmlDataSource ID="xdsAviationFeeds" runat="server" 



  DataFile="http://www.avweb.com/topnews.xml" XPath="rss/channel/item">



</asp:XmlDataSource>






Yup, that’s all it takes for the XMLDataSource.  Just make sure you have the correct URL to the RSS Feed.  Nothing magical going on here.

Using the above mentioned parameters for our Repeater, it will look like:




<asp:Repeater ID="Repeater1" runat="server" DataSourceID="xdsAviationFeeds">



  <ItemTemplate>



    <div>



      <asp:HyperLink ID="HyperLink1" runat="server" 



       NavigateUrl = '<%#XPath("link")%>' 



       Text = '<%#XPath("title")%>' Target="_blank"></asp:HyperLink>



    </div>



    <hr />



  </ItemTemplate>     



</asp:Repeater>




Again, we’re not reinventing the moon landing here.  Just reference your XMLDataSource and the magic in the controls makes it all possible.


This will give us the ENTIRE feed from the source like so:

image


But what if we only want the first 3 rows from the dataset?  Well we need to consider our datasource.  That is controlled at the xmlDataSource (It actually fetches the feed and turns it into a dataset so we can bind it to the repeater).  In order to limit the number of rows, we add a position marker like so to the control:




<asp:XmlDataSource ID="xdsAviationFeeds" runat="server" 



 DataFile="http://www.avweb.com/topnews.xml" 



 XPath="rss/channel/item[position()<4]">



</asp:XmlDataSource>



Notice the less than (<) sign.  This will keep our return under 4, which means we will actually display 3 rows (from the dataset) like so:


image

Notice there are only 3 returns here.


Suppose that we want to add the description of the RSS Feed to our display rather than just displaying the title.  This will give the user information about the article you are feeding them.  We would need to add a label control to our repeater like so:




<asp:Repeater ID="Repeater1" runat="server" DataSourceID="xdsAviationFeeds">



  <ItemTemplate>



    <div>



      <asp:HyperLink ID="HyperLink1" runat="server" 



       NavigateUrl = '<%#XPath("link")%>' Text = '<%#XPath("title")%>' 



       Target="_blank"></asp:HyperLink>



      <br />



      <asp:Label ID="Label1" runat="server" Text = '<%#XPath("description") %>' />



    </div>



    <hr />



  </ItemTemplate>     



</asp:Repeater>



Notice my <br /> tag.  This puts the description on the next line (I like for simplicity of reading).  Additionally, because we binded to the parent repeater control, our sibling label control has access to the dataset and thus, the description.  This will render as so:


image

Holy crap that is ugly, let’s limit that amount of a description we give.  Most users know within the first couple words if the article is what they are looking for.  We can accomplish this by converting our XPATH result to String and then adding a substring property like so:




<asp:Label ID="Label1" runat="server"  



 Text='<%#XPath("description").ToString().SubString(0,40) %>' />




This will give us the following effect:

image


Now no matter what size the description field is, it will only render the first 40 characters (No matter what they are), so let’s let the user know that there is actually more information with ellipsis, like so:




<asp:Label ID="Label1" runat="server"  



 Text = '<%#XPath("description").ToString().SubString(0,40) & "...more..." %>' />




This will render our …more… at the end of every line like so:

image


The point is that when you find a feed that you like, type it into the URL of your browser and then right-click it | View Source.  You can look through the XML and find additional tags that you can utilize, for instance a date/time stamp.  The tags available are limited to what the source of the article make available.  If you notice a tag missing, email the source.  The whole idea is that they want you to use their Syndication.  So they may add the information.


Now there is a lot more you can do to spruce this feed up, for instance add some CSS to make it pop and add eye candy that will make the users come to your site to view the articles. 

*** UPDATE ***
You can find the article on how to create an RSS here:
http://chadcarter30101.blogspot.com/2012/08/return-of-cheese-syndicatecreating-rss.html
Happy .Netting…

Hack the Gibson

No comments:

Post a Comment