Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
4.76/5 (18 votes)
29 Dec 2009Ms-PL3 min read 86.7K   2.1K   47   38
An article on how to show main news stories in a slideshow in Yahoo! style.

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):
  • HTML
    <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 the TopNews.ascx control in your .aspx page:
  • ASP.NET
    <%@ 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.
  • HTML
    <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.

JavaScript
//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:

C#
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

  • 20th December, 2009: Initial version.

License

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


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionچطور روتیتوری داشته باشیم که تصاویر باینری را نشان دهد Pin
ghasempoor20-Oct-12 2:29
ghasempoor20-Oct-12 2:29 
GeneralMy vote of 1 Pin
reza_boy6-Oct-12 5:15
reza_boy6-Oct-12 5:15 
Questionyahoo news style with rollOver event Pin
hcc0011-May-12 17:42
hcc0011-May-12 17:42 
Questionthanks Pin
mohamad yousef15-Dec-11 0:34
mohamad yousef15-Dec-11 0:34 
GeneralMy vote of 5 Pin
katiecat28-Oct-11 13:20
katiecat28-Oct-11 13:20 
GeneralHow can I change the images that are displayed ? Pin
Member 775503423-May-11 8:37
Member 775503423-May-11 8:37 
Newsسلام Hello Pin
ho.kurd14-Apr-11 1:25
ho.kurd14-Apr-11 1:25 
Questionnice job but? Pin
amr rabie7-Apr-11 10:38
amr rabie7-Apr-11 10:38 
AnswerRe: nice job but? Pin
Arlen Navasartian18-Dec-12 10:59
Arlen Navasartian18-Dec-12 10:59 
GeneralYour prevoius article Pin
Michal Zubek6-Jul-10 5:14
Michal Zubek6-Jul-10 5:14 
GeneralA question. Pin
Tuliox28-Apr-10 8:52
Tuliox28-Apr-10 8:52 
GeneralMore than 20 news Pin
kentex200021-Apr-10 13:52
kentex200021-Apr-10 13:52 
GeneralRe: More than 20 news Pin
Arlen Navasartian22-Apr-10 5:32
Arlen Navasartian22-Apr-10 5:32 
GeneralRe: More than 20 news Pin
kentex200022-Apr-10 23:23
kentex200022-Apr-10 23:23 
GeneralNews Rotator Pin
Member 42605887-Apr-10 4:08
Member 42605887-Apr-10 4:08 
GeneralMy vote of 1 Pin
arash.arash30-Jan-10 2:17
arash.arash30-Jan-10 2:17 
GeneralGood job Pin
artin_77724-Jan-10 11:03
artin_77724-Jan-10 11:03 
Generalحج آرلن Pin
arash.arash20-Jan-10 2:23
arash.arash20-Jan-10 2:23 
GeneralRe: حج آرلن Pin
Arlen Navasartian20-Jan-10 12:02
Arlen Navasartian20-Jan-10 12:02 
GeneralMy vote of 1 Pin
arash.arash20-Jan-10 2:23
arash.arash20-Jan-10 2:23 
Generalنظر باقریان بزرگه Pin
moslem52219-Jan-10 23:53
moslem52219-Jan-10 23:53 
GeneralRe: نظر باقریان بزرگه Pin
Arlen Navasartian20-Jan-10 12:02
Arlen Navasartian20-Jan-10 12:02 
سلام امیر
خوبی
دمت گرم
چاکریم

-------
Arlen.N

Generalسلام آرلن Pin
moslem52217-Jan-10 19:27
moslem52217-Jan-10 19:27 
GeneralRe: سلام آرلن Pin
Arlen Navasartian17-Jan-10 22:04
Arlen Navasartian17-Jan-10 22:04 
QuestionCan this be done using WPF? Pin
Ankur\m/11-Jan-10 22:26
professionalAnkur\m/11-Jan-10 22:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.