Post
Ask Question

ESPN Sports News Headlines with Detail in ASP.NET

Introduction

This article describes how to add a Espn Sports News feature in ASP.Net. Here I will describe how to communicate with the Espn News Headline API to get the news headline with description and Image.

Description

As it is a Third party API You will have to generate your own API key to use the API.

In the public portion of the API, only calls to news (headlines) and news categories are allowed.

The public API key allows only for 1 call per second and 2500 calls per day.

In this link you have to register to get the API key: http://developer.espn.com/overview

API link: http://api.espn.com/v1/sports/news/headlines

Design

Design your screen as in the following screen.

image1.jpg

Or you can copy the following source code:

 <body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Espn Sports News Headlines"ForeColor="Red" Font-Size="X-Large"></asp:Label>
        <div id="divnews" style="overflow: scroll; height: 800px; width: 900px; background-color: SkyBlue;">
        </div>
    </div>
    </form>
</body>

Next add the following JavaScript code in the head tag (it's used to add News Result to page).

In that code I am getting the Response as Json :

 <head>
    <title>Espn</title>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        // Example JSONP request with jQuery
        $.ajax({
            url: "http://api.espn.com/v1/sports/news/headlines",
            data: {
                // enter your developer api key here
                apikey: "your Api key",
                // the type of data you're expecting back from the api
                _accept: "application/json",
                //no of headlines you want to retrive
                limit: 30
            },
            dataType: "jsonp",
            success: function (data) {
                // create an unordered list of headlines
                var ul = $('<ul/>');
                $.each(data.headlines, function () {
                    var content = '&nbsp<a href="' + this.links.web.href + '" >' +this.headline + '</a><br/>' + this.description;
                    $.each(this.images, function () {
                        content += '<br/><img src="' + this.url + '" width="200px" height="200px">';
                    });
                    var li = $('<li/>').html(content);
                    ul.append(li)
                });
                // append this list to the document body
                $('#divnews').append(ul);
            },
            error: function () {
                // handle the error
            }
        });
    </script>
</head>

Just check these three lines in the above code:

url: "http://api.espn.com/v1/sports/news/headlines":- This is the Api link for Get News Headlines.

apikey: "Your API key":- Here you have to pass your API key generated by Espn.

limit: 30:- No of headlines you want to retrieve

Here I am getting Headlines,Description and related Image from the json response.

Now build your application.

image2.jpg

Now click on the Headline Link to see detail news.

References

http://developer.espn.com/docs/headlines#what-it-returns

http://developer.espn.com/docs/headlines#code-samples