Introduction:
You might observe Microsoft community bar at the top of ASP.NET website or IIS.NET website or any other Microsoft community website. This bar display RSS feeds from deferent Microsoft community locations.
In this article we will see how we could build something similar but not as a bar, it will like a group box where specific community location's RSS feeds are displayed.
Figure 1. Microsoft Community bar.
Requirements
You might have heard about RssToolKit. It is available to download from dmitryr's blog. This tool kit provide a wonderful DataSource Control, the RssDataSource Control. I used this control to populate RSS feeds data and display them in a DataBound control. Of course you might many other things interesting in the RssToolKit.
This article also uses the latest release of Microsoft ASP.NET AJAX, which ASP.NET AJAX 1.0. So you will need to download it and install it to be able to work with the sample attached with this article.
Note that you have to be connected to the internet while using the attached sample; because it is using live urls.
Getting started: Creating an ASP.NET AJAX-Enabled Web Site
To create an ASP.NET AJAX-Enable Web Site follow the following:
- From VS.NET 2005 file menu click New Web Site.
- In New Web Site dialog box, under Visual Studio installed templates, select ASP.NET AJAX-Enabled Web Site.
- Enter a location and a language, and then click OK.
- Right click on the web site node. From Add ASP.NET Folder menu item click on Bin. A Bin folder will be added to the web site.
- Right click on Bin folder. Click on Add Reference menu item. In Add Reference Dialog select Browse tab. Now browse for the downloaded RssToolKit assembly.
The newly created web site contains all configurations necessary to make it AJAX enabled. if you opened the default.aspx page in design mode, you'll notice that a default ScriptManager control is added to this page. We will use this page to complete this tutorial.
Adding an UpdatePanel and AJAX Timer Controls to an ASP.NET Web Page
- From VS.NET 2005 Tool Box locate AJAX Extensions tab and double click on the UpdatePanel control or drag it to your form.
Figure 2. AJAX Extensions tab on VS.NET 2005 tool box.
- From VS.NET 2005 Tool Box locate AJAX Extensions tab drag Timer control into the UpdatePanel control.
Figure 3. Timer control placed with UpdatePanel control.
Note: small brief about Timer control, Timer control performs asynchronous or synchronous web page postbacks at a defined interval.
- Select Timer control and open Property Grid. Modify Interval property to be 5000. This means every 5000 milliseconds (5 seconds) the page will automatically post back. But actually the page will not refresh, because the Timer is placed inside an UpdatePanel.
Figure 4. Time Control properties.
Adding Content to an UpdatePanel Control, Handle Timer Tick and maintain ViewState
Now we will add content to the UpdatePanel. The content is very simple, a group box to display RSS Feeds.
Here we will use also RssDataSource Control.
The final design of your page should be like the one bellow:
|
Figure 5. RSS Feeds page design.
The code for the above screen will be similar to the following:
Figure 6. RSS Feeds page ASPX/HTML source code.
I've used fieldset tag with legend tag to represent the content as group box. In the legend tag, I've placed an image control and label control. Image will display community logo and label will display community title.
As you can see, I'm using ASP.NET repeater control to display list of RSS Feeds. The control is bounded to an RssDataSource Control. The RssDataSource control has initial value for its Url property as you can see. Also I've limited the items to be retrieved to 10 items.
Now let's see how the content is going to be updated every 5 seconds. On every 5 seconds as configured here, I'll change the Url Property of the RssDataSource control to another RSS Url and rebind the repeater. so every time the content of the page will change to display deferent list of RSS feed items based on the Url of the RssDataSource control.
I've defined my list of Urls with title of each Url and image as 2 dimensions array as the following. The array is declared as private variable on the page.
Figure 7. Code Behind, rssFeeds array declaration.
Timer Control has an event called Tick. I've handled this event to change the Url of the RssDataSource as well as the label text and the image Url. It worth to mention that I've used also a ViewState variable to control the channel scrolling so that I can scroll from channel to channel, and when reach the last channel rest the counter to 0, so the first channel to be displayed again, and so on.
Figure 8. Code Behind, Timer Tick event handler and ViewState management.
Conclusion:
This is a simple example of Timer can be used in conjunction with UpdatePanel. Also it shows that you can maintain ViewState across page postbacks. It gives you an small idea about the wonderful RssToolKit and how to put this all together to achieve real usage scenario.
Additional resources:
How Do I: Use the ASP.NET AJAX Timer Control? by Jeo Stagner