.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Post New Resource Bookmark and Share   

ESPN Sports News Headlines in ASP.NET

Posted By:Sanjeeb Lenka       Posted Date: November 10, 2013    Points: 200    Category:    URL: http://www.dotnetspark.com  

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.
 

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.



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.




     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend