Building a Simple Client Callback to YouTube with Atlas

   
We will talk about how we can use Atlas to talk to YouTube using the REST protocol .
 
1) Download Visual Web Developer , Go Here
2) Download Atlas , Go Here
3) 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 = "http://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