Introduction
This news rotator control gives us the possibility of displaying several news stories within the same area of the web page. News is taken apart to several pages in order to place in a specified area. Each page also contains a couple of news items. By clicking on the page number at the bottom, it is possible to navigate between different pages and also by clicking on each news item of the page, it is possible to see its details. The stories slide into view. It also provides the auto next (slide show) feature, and transition styles.
It uses JQuery to:
- Request JQuery Ajax Request to web server to get news in JSON format
- Bind data (news in form of JSON) to HTML controls
- Set the control style after data binding
- Navigate between news
- Interact with user
- Change and set styles
- Do JavaScript effects
News Rotator control uses ASP.NET to gather news from a news storage (for example database, XML file, RSS, ...), to cast news into a custom type (NewsItem), then convert a collection of newsItem objects to JSON format and send it to the client as a news rotator datasource.
This component uses open source Json.NET library to make working with JSON formatted data in .NET easier. Key features include a flexible JSON serializer for quickly converting .NET classes to JSON and back again. Read more about Json.NET library (code,sample and documentation) here.
News Rotator control uses the main idea of a jQuery Image Rotator sample. You can find out more about how to create an Image Rotator with its description (CSS/jQuery) By Soh Tanaka here.
This News Rotator control uses jQuery Cycle Plugin to rotate news, and it is a lightweight slideshow plugin. This plugin gives the developer a rich ability to rotate HTML controls on the page in the different rotation types. Read more about jQuery Cycle Plugin here.
Using the Code
All you need to use this control is:
- Reference the needed resource to your HTML page (.aspx page):
<head>
<script src='http://www.codeproject.com/jquery.js'
type='text/javascript'></script>
<script src='http://www.codeproject.com/jquery.cycle.all.min.js'
type='text/javascript'></script>
<script src='http://www.codeproject.com/TopNews.js'
type='text/javascript'></script>
<link href='http://www.codeproject.com/TopNews.css'
rel='stylesheet' type='text/css' />
</head>
- Register and embed TopNews.ascx control to your .aspx page:
<%@ Register Src="~/TopNews.ascx" TagName="TopNews" TagPrefix="ctrl" %>
<body>
<form id="form1" runat="server">
<div>
<ctrl:TopNews runat="server" id="TopNews1" />
</div>
</form>
</body>
- Start control through calling JavaScript
TopNews() function at the end of control DOM. This function sends an Ajax request to the server, gets news in JSON format, binds news to the control, sets control style to look nice after binding and then rotates news.
<script type="text/javascript">
new TopNews('#Container', 7,true,6000);
</script>
TopNews function parameters:
parameter 1(objRoot): newsRotator control container (a jquery selector),
the control uses this parameter as a prefix (root object) of every
jquery selector inside the control.this prefix helps to have multiple instance
of control in the page without any worry of jquery selection conflict.
parameter 2(newsCountPerPage): number of news items in a page.
parameter 3(viewSubtitle): a boolean value makes subtitle section
of the control enable or disable. the rest of the news titles shows
in the subtitle section randomly at the bottom of the current page.
parameter 4(Interval): news rotation (slideshow) interval in millisecond.
It also needs a server side mechanism to gather news, convert news to JSON format and send them to the client.
In the client, we use jquery to call a server method sending that an Ajax request.
PageMethod: function(fn, paramArray, successFn, errorFn) {
var pagePath = window.location.pathname;
var that = this;
$.ajax({
type: "POST",
url: pagePath + "?Callback=" + fn,
contentType: "application/json; charset=utf-8",
data: paramArray,
dataType: "json",
success: function(res) { successFn(res, that) },
error: errorFn
});
}
And at the server side, we have this:
protected void Page_Load(object sender, EventArgs e)
{
this.HandleCallbacks();
}
public void HandleCallbacks()
{
if (string.IsNullOrEmpty(Request.Params["Callback"]))
return;
switch (Request.Params["Callback"])
{
case "fetchAllNews":
this.FetchAllNews();
break;
}
Response.StatusCode = 500;
Response.Write("Invalid Callback Method");
Response.End();
}
public void FetchAllNews()
{
List<NewsItem> lsttst = new List<NewsItem>();
lsttst.Add(new NewsItem("Environment of Australia",
this.ResolveUrl("~/img/news1.jpg"),
this.ResolveUrl("~/img/news1_thumb.jpg"),
"Australia has a rich variety of endemic legume
species that thrive in nutrient-poor soils because
of their symbiosis with rhizobia bacteria and mycorrhizal fungi",
DateTime.Now.ToShortDateString()));
lsttst.Add(new NewsItem("Economy of Australia",
this.ResolveUrl("~/img/news2.jpg"),
this.ResolveUrl("~/img/news2_thumb.jpg"),
"The Australian dollar is the currency of the
Commonwealth of Australia, including Christmas Island,
Cocos (Keeling) Islands, and Norfolk Island",
DateTime.Now.ToShortDateString()));
lsttst.Add(new NewsItem("Demographics of Australia and
Immigration to Australia", this.ResolveUrl("~/img/news3.jpg"),
this.ResolveUrl("~/img/news3_thumb.jpg"),
"Most of the estimated 21.8 million Australians are
descended from colonial-era settlers and post-Federation
immigrants from Europe", DateTime.Now.ToShortDateString()));
lsttst.Add(new NewsItem("Religion in Australia",
this.ResolveUrl("~/img/news4.jpg"),
this.ResolveUrl("~/img/news4_thumb.jpg"),
"Australia has no state religion. In the 2006 census,
64% of Australians were listed as Christian of
any denomination, including 26% as Roman Catholic and
19% as Anglican", DateTime.Now.ToShortDateString()));
lsttst.Add(new NewsItem("Education in Australia",
this.ResolveUrl("~/img/news5.jpg"),
this.ResolveUrl("~/img/news5_thumb.jpg"),
"School attendance is compulsory throughout Australia.
In most Australian States at 5–6 years of age all children
receive 11 years of compulsory education",
DateTime.Now.ToShortDateString()));
Response.ContentType = "application/json; charset=utf-8";
Response.Write(JavaScriptConvert.SerializeObject(lsttst));
Response.End();
}
The source code contains the needed comments to illustrate more details about how this control works.
History
- 6th September, 2009: Initial version
