Yahoo! News Rotator using jQuery, CSS, JSON, and ASP.NET

Download source code - 227 KB

Introduction

This Yahoo! news rotator control gives us the possibility of displaying several main news stories within the same area of a web page. News is taken apart to several pages in order to place them in a specified area. Each page also contains a couple of news items.

The control uses jQuery to:

Send a jQuery AJAX request to a web server to get news in JSON format
Bind data (news in the 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

The 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 the Open Source Json.NET library to make working with JSON formatted data in .NET easier. The key features include a flexible JSON serializer for quickly converting .NET classes to JSON and back again. Read more about the Json.NET library (code, sample, and documentation) here.

The 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 description (CSS/jQuery) by Soh Tanaka, here.

I also made some changes to the news rotator control by khaksari, available here.

This news rotator control uses the jQuery Cycle plug-in to rotate news, and it is a lightweight slideshow plug-in. This plug-in gives the developer the rich ability to rotate HTML controls on the page in different rotation types. Read more about the jQuery Cycle plug-in here.

Using the code

All you need to use this control is:

Reference the needed resources in 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 Src="~/TopNews.ascx" 
       TagName="TopNews" TagPrefix="ctrl" %>
<body>
    <form id="form1" runat="server">
    <div>
        <ctrl:TopNews runat="server" id="TopNews1" />
    </div>
    </form>
</body>

Start the control by calling the JavaScript TopNews() function at the end of the control DOM. This function sends an AJAX request to the server, gets news in JSON format, binds news to the control, sets the control style to look nice after binding, and then rotates the news items.

<script type="text/javascript">
    new TopNews('#Container', 7,true,6000);
</script>

TopNews function parameters

objRoot: The news rotator 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 instances of the control in the page without any worry of jQuery selection conflict.
newsCountPerPage: The number of news items in a page.
viewSubtitle: A boolean value that enables or disables the subtitle section of the control. The rest of the news titles show in the subtitle section randomly at the bottom of the current page.
Interval: The news rotation (slideshow) interval in milliseconds.

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 it an AJAX request.

//call ASP.NET page method asynchronous (send and recives data in JSON format)
PageMethod: function(fn, paramArray, successFn, errorFn) {
    var pagePath = window.location.pathname;
    var that = this;
    //Call the page method
    $.ajax({
        type: "POST",
        url: pagePath + "?Callback=" + fn,
        contentType: "application/json; charset=utf-8",
        data: paramArray,
        dataType: "json",
        //that is a reference to the object calling this callback method
        success: function(res) { successFn(res, that) },
        error: errorFn
    });
}

And at the server side, we have this:

protected void Page_Load(object sender, EventArgs e)
{
    // *** Route to the Page level callback 'handler'
    this.HandleCallbacks();
}

// Callback routing
public void HandleCallbacks()
{
    if (string.IsNullOrEmpty(Request.Params["Callback"]))
        return;

    // *** We have an action try and match it to a handler
    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("Group 1", 
       this.ResolveUrl("~/img/news1.jpg"), 
       "http://www.yahoo.com", 
       this.ResolveUrl("~/img/news1.jpg"), 
       "This is a description about image 1 ...", 
       DateTime.Now.ToShortDateString()));
    lsttst.Add(new NewsItem("Group 2", 
       this.ResolveUrl("~/img/news2.jpg"), 
       "http://www.msn.com", 
       this.ResolveUrl("~/img/news2.jpg"), 
       "This is a description about image 2 ...", 
       DateTime.Now.ToShortDateString()));
    lsttst.Add(new NewsItem("Group 3", 
       this.ResolveUrl("~/img/news3.jpg"), 
       "http://www.msn.com", 
       this.ResolveUrl("~/img/news3.jpg"), 
       "This is a description about image 3 ...", 
       DateTime.Now.ToShortDateString()));
    lsttst.Add(new NewsItem("Group 4", 
       this.ResolveUrl("~/img/news4.jpg"), 
       "http://www.microsoft.com", 
       this.ResolveUrl("~/img/news4.jpg"), 
       "This is a description about image 4 ...", 
       DateTime.Now.ToShortDateString()));

    Response.ContentType = "application/json; charset=utf-8";
    Response.Write(
      Newtonsoft.Json.JavaScriptConvert.SerializeObject(lsttst));
    Response.End();
}

The source code contains comments to illustrate more details about how this control works.

History

20^th December, 2009: Initial version.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

Arlen Navasartian

Web Developer

United States

Member

No Biography provided

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

An article on how to show main news stories in a slideshow in Yahoo! style.

Type	Article
Licence	Ms-PL
First Posted	29 Dec 2009
Views	31,429
Downloads	1,547
Bookmarked	44 times

C#ASP.NETWindowsDev
IntermediatejQuery