Add a YouTube Search Page to your ASP.NET Site

[admin]

Shows how to easily create a YouTube Search page using the YouTube RESTful API and a simple DataList control.
YouTube is a popular video sharing website where users can upload, view and share video clips. YouTube was created in mid February 2005 by three former PayPal employees. The San Bruno-based service uses Adobe Flash technology to display a wide variety of video content, including movie clips, TV clips and music videos, as well as amateur content such as videoblogging and short original videos. In October 2006, Google Inc. announced that it had reached a deal to acquire the company for US$1.65 billion in Google stock. The deal closed on November 13, 2006.

Since YouTube has become so popular, it occured to me that I might want to add a YouTube Search Page to my "playground site", IttyUrl.net. It turned out that with the REST - based YouTube developer API, it was a "piece of cake".

Here is how you can add a very simple yet effective YouTube search page to your ASP.NET  web site:

1) First, you need to get a free Developer Key:  http://youtube.com/signup?next=/my_profile_dev. This is required to use the API. When you've got your developerKey,  put it in the developerKey appSettings element in the web.config.
2) Next you will construct a REST call to the youtube.videos.list_by_tag method, passing the tag (search phrase), your developer key, and paging information.
   A fully constructed dynamic REST uri would be constructed like this:

   

Code: [Select]

string uri = "http://www.youtube.com/api2_rest?";
            uri += "method=youtube.videos.list_by_tag";
             uri += "&dev_id=" + developerKey;
            uri += "&tag=" + txtSearch.Text;
            uri += "&page=1&per_page=50"; // you can add custom paging if desired
3) Since the results are returned as an XML document, there is no need to get involved in a lot of XPATH - simply load the XML into a DataSet using its ReadXml method.
 
4) The table that holds the information you need is DataSet.Tables[2] - the third table in the resulting dataset.
5) I inserted some rows with my own Google Adsense ad to show how easy it is to add advertising to the resultset.
6) Bind the DataTable to a templated DataList - you are done!

Here is the complete codebehind for the search page:

Code: [Select]

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace YouTubeSearch
{
    public partial class YouTube : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

         protected void Button1_Click(object sender, EventArgs e)
        {
            string developerKey = ConfigurationManager.AppSettings["developerKey"];
            if (developerKey.Length == 0)
            {
                Response.Write("You need to get a <a href=http://youtube.com/signup?next=/my_profile_dev> YouTube developer key</a> first!");
                return;
            }
            // Call the YouTube api to list all videos for a tag
            string uri = "http://www.youtube.com/api2_rest?";
            uri += "method=youtube.videos.list_by_tag";
             uri += "&dev_id=" + developerKey;
            uri += "&tag=" + txtSearch.Text;
            uri += "&page=1&per_page=50"; // you can add custom paging if desired
            DataSet ds = new DataSet();
            ds.ReadXml(uri);
            DataTable dt = ds.Tables[2];
             PlaceAds(dt);
             this.DataList1.DataSource = dt;
            DataList1.DataBind();
        }

       
        protected void PlaceAds(DataTable tbl)
        {
            string adCode = ConfigurationManager.AppSettings["adCode"];
            adCode = Server.HtmlDecode(adCode);

            int adpos = tbl.Rows.Count / 3;
            DataRow rowAd = tbl.NewRow();
            rowAd["description"] = adCode;
            rowAd["thumbnail_url"] = "images/sponsor.gif";
            tbl.Rows.InsertAt(rowAd, 1);
            if (tbl.Rows.Count > 10)
            {
                rowAd = tbl.NewRow();
                rowAd["description"] = adCode;
                rowAd["thumbnail_url"] = "images/sponsor.gif";
                tbl.Rows.InsertAt(rowAd, adpos);
                rowAd = tbl.NewRow();
                rowAd["description"] = adCode;
                rowAd["thumbnail_url"] = "images/sponsor.gif";
                tbl.Rows.InsertAt(rowAd, adpos * 2);
            }
        }
    }
}Here is what the markup for the DataList looks like:

Code: [Select]

<table cellspacing="2" cellpadding="2" border="0">       
<asp:Datalist id="DataList1" runat="server" Font-Names="Verdana" CellPadding="2" CellSpacing ="2" BorderStyle="None">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
<ItemTemplate>
<tr  ><td colspan="2" align=center> <b><%# DataBinder.Eval(Container, "DataItem.title") %>   </b>  </td></tr>
  <tr>
<td style="width:100px;Height:20px;">
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("url") %>' >
    <asp:Image ID="Img" ImageUrl='<%#Eval("thumbnail_url") %>' runat="Server" />
    </asp:HyperLink>
    </td>
<td style="width:450px;Height:20px;"><%# DataBinder.Eval(Container, "DataItem.description") %></td>
        </tr>       
</ItemTemplate>
</asp:Datalist>     
</table>