News Feed - Web User Control

Share |

This is very simple code to create web user control to display News Feeds. Using this user can change properties of News Feeds and set his/her own url, number of news to display.

This code is developed in ASP.NET using C#, JavaScript and Simple HTML.

Lets step by step develop web user control for feeds

--------------------- Step 1 --------------------------------

Create one Web User control Named NewsFeed. Copy Past following code in C# file i.e. in ascx file. Just check out Properties in the code.

<br /> public partial class NewsFeed : System.Web.UI.UserControl;<br /> {<br /> public string feedUrl = "http://www.moneycontrol.com/rss/business.xml";<br /> public string feedNumber = "10";<br /> public string errMessage = "Error Occured while Fetching Feeds!";<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> <br /> }<br /> public string feed { set { feedUrl = value; } }<br /> public string NumberOfFeeds { set { feedNumber = value; } }<br /> public string ErrorMessage { set { errMessage = value; } }<br /> }<br /> <br />

--------------------- Step 2 --------------------------------

Here we will use google code to read feeds and retrieve data. For more information you can check Google Code.

Put following Code in HTML view of same Web User Control. Following code will include google JSAPI file in your code, and it will load Google Ajax Feed API.

<script type="text/javascript" src="http://www.google.com/jsapi"></script><br /> <script type="text/javascript"> google.load("feeds", "1") //Load Google Ajax Feed API (version 1) </script><br /> <br /> <div id="feeddiv"></div>

--------------------- Step 3 --------------------------------

We will use following code to set properties of Web User control in javaScript. Check out variables "feedUrl" , "feedNumber"; these variables are set in ASCX file. "feeddiv" is a div tag set in above code. We will display our feed in this div tag.

<br /> <script type="text/javascript"> <br /> var feedcontainer=document.getElementById("feeddiv")<br /> window.onload=function(){ rssfeedsetup('<%= feedUrl %>','<%=feedNumber%>') } </script><br />

--------------------- Step 4 --------------------------------

Following code takes care of Feeds retrieval, and manipulate HTML which we are suppose to display in Div tag discussed above.

"display" feed function automatically get called once we retrieve feeds using googleFeed.

"errMessage" is set in ASCX page. Which can be set as property of Web User Control.

This is very simple code to develop. Any one with basic understanding of HTML, JavaScript and ASPX can develop web user control to display Feeds.

Download Demo Code here --> NewsFeeds.zip