Building a Simple Client Callback to YouTube with Atlas

  • Article 
    We will talk about how we can use Atlas to talk to YouTube using the REST protocol . 1) Download Visual Web Developer , Go Here2) Download Atlas , Go Here3) Get an Application Developer ID at Youtube . Go Here  After you are done  running around the world collecting tools , you should be all set to take on YouTube .  We have a WebService that talks to YouTube's REST Interface and downloads Data .Without Getting into Discussions of using Service Bridges , we will have a wrapper over the YouTube REST-API using a webservice on the Server-Side. The YouTube Wrapper Class We have a class that wraps the Fucntionality Provided by YouTube REST APIs , lets Call it "YouTubeSearch".It will  have a method called "SearchTags" which takes a Tagname as an input and will return results of the type "VideoRow"  Schema of VideoRow  Class    ClassName  : VideoRow  
  Methods    : None   
  Attributes :

  Name          Description
   Url           The Url to View the Video on 
   ThumbNailUrl  The Url to View the thumbnail of the video
   Description   A Short Description of the video

 

Signature of the SearchTags method of YouTubeSearch

 

public static List<VideoRow> SearchVideoTags(string tagName)

 

Make a WebClient Request to the RESTBased Webservice and gather the downloaded info onto a string

 

string requestURL = "https://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=" +
    youTubeAppId + "&tag=" + tagName + "&per_page=6" 
WebClient restRequest = new WebClient();
string dataDownloaded = restRequest.DownloadString(requestURL);

 

Read the Downloaded String onto a DataSet

 

DataSet dsResultSet = new DataSet(); 
StringReader dataWriter = new StringReader(dataDownloaded);
dsResultSet.ReadXml(dataWriter);

 

Convert the DataRows onto VideoRows

 

 

foreach (DataRow drVideoRow in dsResultSet.Tables["video"].Rows)
{     
searchResults.Add(new VideoRow( drVideoRow["url"].ToString(), 
drVideoRow["thumbnail_url"].ToString(), 
drVideoRow["description"].ToString()));
}

 

return searchResults back to Caller

 

The ServerSide WebService

 

1) Create a WebService

2) Include the Following Directive to make the Web-Service "Client Proxiable"

 

using Microsoft.Web.Script.Services;

 

3) Decorate the Webservice with the "ScriptService" attribute.

 

[ScriptService]
public class AjaxService : System.Web.Services.WebService 

 

4) The methods of the webservice that need to be proxied onto the client are marked as "WebMethod"

 

[WebMethod]
public string SearchYouTube(string tagName)

 

5) Call the SearchVideoTags method of the YouTube Wrapper class with the Parameter passed from the Client Proxy.

Have the Content Formatted in the form of a Usercontrol's rendered output .

I use a ViewManager to implement the MVC pattern here.

For an explanation of the same , refer to ScottGu's blog post Here .

 

 

Markup of the View

 

<asp:DataList runat="server" ID="grdvSearchResults" 
         RepeatColumns="6" RepeatDirection="Horizontal"         
        BorderStyle="None" BorderWidth="0px" 
         GridLines="none" Width="100%">  
<ItemTemplate>         
<a href="<%#DataBinder.Eval(Container.DataItem, "Url")%>">           
   <img  src="<%#DataBinder.Eval(Container.DataItem, "ThumbNailUrl")%>"                  
     title="<%#DataBinder.Eval(Container.DataItem, "Description")%>"/> 
  </a>   
</ItemTemplate>   
<SeparatorTemplate>   &nbsp;&nbsp;&nbsp;   </SeparatorTemplate>
</asp:DataList>

6) Return the Rendered View in the form of a String back to the Client Method calling this Webmethod .

 

The Client Web Page

 

The Following Controls will be put in ..

 

HTML Controls

 

1) A textbox which provides the Tag to search for.

 

<input type="text" id="searchKey"/>

 

2) A button to call the Search Function in the Webservice .

 

<input Type="button" id="btnSearchServer" 
    onclick ="SearchYouTube(searchKey.value)" 
    value ="Search You Tube"/>

 

3) A Div to show the Server Returned Markup .

 

<div id="serverMarkupRecipient">
     Search Results Go Here
</div>

 

AJAX Controls

A Script Manager to Generate the proxy of the webservice and handle all Ajax Scripts

We will add a Service Reference to the WebService that we want a Client proxy for ..

 

<asp:ScriptManager runat="server" ID="scrpManager"> 
     <Services>   
       <asp:ServiceReference Path="~/Services/AjaxService.asmx" />      
     </Services>
</asp:ScriptManager>

 

 

Javascript Code to Call the Webservice

 

function SearchYouTube( searchTag ) 
{   
// The Proxy generated enables you to do something as simple as calling a method on an object .   
// the Two parameters are <inputparam>,<OnCompleteCallback>   
    AjaxService.SearchYouTube(searchTag,VideSearchCallback ); 
} 

 

 

function VideSearchCallback(returnValue)
{
  // Microsft Ajax  enables Browser - Independent ways to wrappers To Document.getElementById as $get    //Show the Div Element   
 $get("serverMarkupRecipient").style.display= "block"  
  //Inject Server Returned Markup into the DIV element    
 $get("serverMarkupRecipient").innerHTML = returnValue;
}

Thats it , You can download the Source of the application Here

AjaxYouTube.zip