In my last ASP.Net seminar someone noticed that we did not talk at all about the XmlDataSource,ListView,DataPager web server controls.

It is rather impossible to investigate/talk about all issues regarding ASP.Net in a seminar but I promised to write a blog post. I thought that I could combine all those three web server controls to create a RSS reader.

1) Launch Visual Studio 2008/2010. Express editions will work fine.

2) Create an empty asp.net web site. Choose an appropriate name. We will not write any code so choose any development language you want.

3) I will read in my RSS reader application all the posts from this blog- http://weblogs.asp.net/dotnetstories.

4) If you go to this url:http://weblogs.asp.net/dotnetstories/rss.xml,  you will be able to subscribe to my Feeds (all the posts) if you have any suitable RSS Reader application.

Open Internet Explorer and type in the address bar , http://weblogs.asp.net/dotnetstories/rss.xml. You will see the RSS feed and its contents. If you go to see View->Source 

you will see the xml document source. Notice that we have some main items, like rss,category,channel,item,pubDate,link,description,title.All of them have parent/child relationships.

5) Drag and drop on the web form, a ListView control. Also drop an XML Datasource control.

6) Let's configure the XML Datasource control.

<asp:XmlDataSource
 
    ID="RSSxmlSource"
 
    DataFile="http://weblogs.asp.net/dotnetstories/rss.xml"
 
    XPath="rss/channel/item"
 
    runat="server">
 
</asp:XmlDataSource>

7) We set the DataFile attribute to rss feed url. Then I just create simple XPath expression based on the following relationship.If you want to learn more about XPath click here .

<rss>

<channel>

<item>  </item>

</channel>

</rss>

8) Let's configure the ListView control.

 <asp:ListView
 
        ID="MyRSSBlog"
 
        DataSourceID="RSSxmlSource"
 
        ItemPlaceholderID="PlcID"   
 
        runat="server">
 
    <LayoutTemplate>
 
    
        <br /><center><h2 style="border:2px dashed #000;font-family:Verdana;

        color:#1877d6"><i>Blog posts</i></h2></center><br />
 
        <asp:PlaceHolder ID="PlcID" runat="server"></asp:PlaceHolder>
 
    </LayoutTemplate>
 
    <ItemTemplate>
 
    <h2><asp:HyperLink ID="myLink"
 
            runat="server" Target="_blank" 
 
            NavigateUrl='<%# XPath("link") %>'>
        <h3 style="color:#dd1234;text-decoration:none";><%# XPath("title") %>

         </h3></asp:HyperLink>
 
        </h2>
 
            <p><i>It was published on <%# XPath("pubDate") %></i></p>
 
             <p><i>Belongs to the category: <em style="color:#8c0017">

            <%# XPath("category")%></em></i></p>
 
  <p style="font-size:12px;color:#66803a"><%# XPath("description") %></p>
 
    </ItemTemplate>
 
    <ItemSeparatorTemplate>
    
        <hr style="color:Orange"  />
    
    </ItemSeparatorTemplate>
 
    </asp:ListView>

 8) Let me explain what I do here.

We set the DataSourceID property of the control to the ID of the XmlDataSource control.

Inside the ListView control we have defined various templates. A LayoutTemplate where I define a simple header and I add a PlaceHolder web server control.

I set the ItemPlaceHolderID property to the PlaceHolder ID property.Then I define the ItemTemplate template.

First I define the link and the title of every post by using "evaluation expressions",using the simplest XPath expressions.

        <h2><asp:HyperLink ID="myLink"
 
            runat="server" Target="_blank" 
 
            NavigateUrl='<%# XPath("link") %>'>
        <h3 style="color:#dd1234;text-decoration:none";><%# XPath("title") %>

        </h3></asp:HyperLink>
 
        </h2>

Then inside the ItemTemplate template I get the remaining of the information(published date,category,description) I want from the xml document.

     <p><i>It was published on <%# XPath("pubDate") %></i></p>
 
     <p><i>Belongs to the category: <em style="color:#8c0017">

     <%# XPath("category")%></em></i></p>
 
     <p style="font-size:12px;color:#66803a"><%# XPath("description") %></p>

9) Finally I have the ItemSeperator template where I just use some simple markup to seperate the items-posts.

<ItemSeparatorTemplate>
    
        <hr style="color:Orange"  />
    
</ItemSeparatorTemplate>

10) Run your website and see the posts displayed on your screen.

11) We have many posts appearing in our reader application and we want some sort of pagination. We will add to the web form a DataPager control.We set the PagedControlID property to the ID of the ListView control.

  <asp:DataPager ID="DataPager1" runat="server" PagedControlID="MyRSSBlog" 

PageSize="5">
 

<Fields><asp:NextPreviousPagerField  /></Fields>
 
        </asp:DataPager>

 12) Run your website and see the posts displayed on your screen.Now you can page through the posts. There are only 5 posts per page.

Hope it helps!!!