One might wonder how they can have news on their website. Will they have to be there and Update their site to get updated content? Do they have to hunt for news? This becomes confusing for a content designers of some websites. Can they get this news from other good Source? But how will they update the News from those sources? These are questions that are asked every day. In this article I will show you how to use RSS from other sites and display them in your site and get updates without you being there. Your website can display news with images and links to the source in ASP.Net
Introduction
One might wonder how they can have news on
their website. Will they have to be there and Update their site to get updated content?
Do they have to hunt for news? This becomes confusing for a content designers
of some websites. Can they get this news from other good Source? But how will
they update the News from those sources? These are questions that are asked every
day. In this article I will show you how to use RSS from other sites and
display them in your site and get updates without you being there. Your website
can display news with images and links to the source in ASP.Net
Background
In
this Article we are going to consume RSS feeds in our ASP.NET website
Using the code
We are going to user C# as our
language.
Start
Open Visual Studio and Create a New
Website. Automatically you will have an empty page defined for you like this
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Go to Design View and you will notice
there is nothing on your page. Now open your Toolbox and add a Gridview Control
in your page as depicted in the Diagram below.
And after you have added these two
Controls you should have something like this in your mark-up.
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" AutoGenerateColumns="true" runat="server">
</asp:GridView>
</div>
</form>
</body>
</html>
The Next Step is to get a RSS Url. Well
almost every site has RSS and I have one that I will use as my example
http://feeds.feedburner.com/SdTimesLatestNews
Double click on your page and you will
see the page load. And write the following in the page load event.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using
System.Xml;
public partial
class _Default
: System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
XmlTextReader
readerSport = new XmlTextReader("http://www.sowetan.co.za/rss/Sowetan_TopStories.xml");
DataSet
dsSport = new DataSet();
dsSport.Clear();
dsSport.ReadXml(readerSport);
GridView1.DataSource =
dsSport.Tables[2];
GridView1.DataBind();
}
}
This code will Bind the Grid on page
load and show us the Contents of the RSS. Lets test this and see how it looks.
Press f5 and you will see this
This is Good info but not for our
users. This info contains more than what we need some is info that we don’t
need. The nice thing about this RSS example is that it has images, that means
our news will show images not only text. Visitors like to see images. Writing a
Statement like “Obama Visits South Africa” that has no image is different from
a the stament that read “Omaba Visits South Africa” and a Pic of Obama near the
statement. A user becomes interested in a statement that has a Photo near it.
In this RSS we need the “url”, “Title”, and we can just redirect the users to
the site itself. Lets see how can we do this in our grid. On your markup change
the grid properties and add more and make sure it looks like this
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Image ID = "myimage"
runat="server"
ImageUrl='<%#
Eval("Url")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText
="Story">
<ItemTemplate>
<asp:Label ID="lblTitle" runat="server" Text='<%#
Eval("Title")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText
="Read more">
<ItemTemplate>
<asp:HyperLink ID="readmore" runat="server" Text="Read more..." NavigateUrl='<%#
Eval("Link")%>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
If you run this you will see the
Following
The Images changes, maybe the time you
try this example there will be a Different images and Story. If you have this
on your website, your website will updates itself you wont need to look for
news.
Conclusion
The
Solution was simple and clear. This is how we consume other websites RSS
Thank
you for visiting DotnetFunda.
Vuyiswa
Maseko