Wednesday, October 22, 2008

Page Methods is undefined

        You may receive "Page Methods is undefined while calling Server Side function from Client Side Code using PageMethods in AJAX. The possible cause can be,

1. You may have not added EnablePageMethods="true" in ScriptManager tag.

   1: <ajax:ScriptManager 
   2:     EnablePageMethods="true" ID="ScriptManager1" runat="server">
   3: </ajax:ScriptManager>

2. You have a pre-release version of Atlas or the Ajax beta installed. Download latest version from here.


3. Your application’s virtual directory is configured for .NET Framework 1.1


4. Your application does not have the Ajax DLL in its Bin folder. The DLL is "System.Web.Extensions.dll". You may find the DLL at "C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025". You may have this DLL at different location.


5. Your Web.config does not include a WebServices section. To verify this create a new website and select Ajax Enable Website. You can see that all necessary tags are included in web.config file of this website. You cab replace new web.config file with your application. 


Happy Programming !!!

Tuesday, September 16, 2008

Integrate Youtube in ASP.NET

       I will discuss how to integrate youtube video in asp.net. Youtube provides the API to access the its huge database of videos. It also provides search facility and customized player for integration.

       First thing you need is to get developer key for accessing youtube service. You can get it from here. Once you get the developer you can use the API URL to retrieve youtube videos. The URL is,

   1: http://www.youtube.com/api2_rest

Fig - (1) Youtube API URL


       There specific parameters that you need to pass in query string to get desire result from youtube. See the list below,



   1: Parameter    Description
   2: =============================================================================================
   3: method       youtube.videos.list_by_tag (only needed as an explicit parameter for REST calls)
   4: dev_id       Your developer ID .
   5: tag          Search keyword
   6: page         The "page number" of results you want to retrieve (e.g. 1, 2, 3)
   7: per_page     The number of results you want to retrieve per page (default 20, maximum 100)

Fig - (2) Parameters for youtube querystring


       So from fig - (1) and (2) if you need to search video for asp.net and you need 10 records per page and page should display 3rd page the the URL will be,



   1: http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=YOURDEVELOPERID&tag=asp.net&page=3&per_page=10
   2:  

Fig - (3) Querystring for youtube video


      Use page=-1 and per_page=-1 to display all the videos on same page without paging. You will get reply in XML format from this URL. You can retrieve that XML as XML document and use XQuery to to get the desire result. OR you can generate dataset from that XML using ReadXML method. I have used ReadXML method.


      This will create three tables (1) ut_response , (2) video_list and (3) video. in dataset. ut_response table contains the information whether the supplied DeveloperId is correct? If yes, the status field contains "ok". video_list contains total number of videos returned. video table contains the information about the videos.



   1: private void GetYoutubeVedio()
   2: {      
   3:         
   4:         StringBuilder stbURL = new StringBuilder("http://www.youtube.com/api2_rest?");
   5:         stbURL.Append("method=youtube.videos.list_by_tag");
   6:         stbURL.Append("&dev_id=" + DEVELOPERKEY);
   7:         stbURL.Append("&tag=" + txtSearch.Text.Trim());
   8:         stbURL.Append("&page=-1&per_page=-1"); // you can add custom paging if desired
   9:         
  10:         DataSet ds = new DataSet();
  11:         ds.ReadXml(stbURL.ToString());
  12:  
  13:         dlYoutube.DataSource = ds.Tables[2];
  14:         dlYoutube.DataBind();
  15:         
  16:         
  17: }

Fig - (4)  Function to retrieve youtube video in ASP.NET


     You can retrieve youtube videos using above function in ASP.NET. Youtube also provides player integration details.


      Lets have a look at the code below. This code displays all youtube videos played in same asp.net page.



   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetYouTubeVedios.aspx.cs"
   2:     Inherits="Youtube_GetYouTubeVedios" %>
   3:  
   4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5: <html xmlns="http://www.w3.org/1999/xhtml">
   6: <head runat="server">
   7:     <title>Get Youtube Vedios</title>
   8: </head>
   9: <script src="swfobject.js" type="text/jscript"></script>
  10:     <script type="text/javascript">
  11:  
  12:     var params = { allowScriptAccess: "always" };
  13:     var atts = { id: "myytplayer" };
  14:     
  15:  
  16:   </script>
  17: <body>
  18:     <form id="form1" runat="server">
  19:         <div>
  20:             <table >
  21:                 <tr>
  22:                     <td>
  23:                         Sample application to fetch vedios from Youtube. 
  24:                     </td>                    
  25:                 </tr>
  26:                 <tr>
  27:                     <td>
  28:                         First you need to create developer account in youtube to get developer key. You can get 
  29:                         <a href="http://youtube.com/signup?next=/my_profile_dev" target="_blank">here</a>.
  30:                     </td>                    
  31:                 </tr>
  32:                 <tr>
  33:                     <td>
  34:                         Enter Seach text :
  35:                         <asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox>
  36:                         <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
  37:                     </td>
  38:                 </tr>
  39:                 <tr>
  40:                     <td>
  41:                         <br />
  42:                     </td>
  43:                 </tr>
  44:                 <tr>
  45:                     <td width="80%">
  46:                         <asp:DataList ID="dlYoutube" runat="server" CellPadding="4" ForeColor="#333333" OnItemDataBound="dlYoutube_ItemDataBound">
  47:                             <ItemTemplate>
  48:                                 <table>
  49:                                     <tr>
  50:                                         <td colspan="2">
  51:                                             <asp:Label ID="lblTotle" Font-Bold="true" runat="server" Text='<%# Eval("title")%>'></asp:Label>
  52:                                         </td>
  53:                                     </tr>
  54:                                     <tr>
  55:                                         <td valign="top">
  56:                                             <%--<a id="aURL" style="text-decoration: none" runat="server" href='<%# Eval("url")%>'>
  57:                                                 <asp:Image ID="imgImage" runat="server" ImageUrl='<%# Eval("thumbnail_url")%>' />
  58:                                             </a>--%>
  59:                                             <div runat="server" id="player"></div>
  60:                                             <asp:Literal ID="ltrl" runat="server"></asp:Literal>
  61:                                         </td>
  62:                                         <td valign="top">
  63:                                             <table width="100%">
  64:                                                 <tr>
  65:                                                     <td>
  66:                                                         <asp:Label ID="lblAuthor" runat="server" Text="Author : "></asp:Label>
  67:                                                     </td>
  68:                                                     <td>
  69:                                                         <asp:Label ID="lblAuthorName" runat="server" Text='<%# Eval("author")%>'></asp:Label>
  70:                                                     </td>
  71:                                                 </tr>
  72:                                                 <tr>
  73:                                                     <td valign="top">
  74:                                                         <asp:Label ID="Label1" runat="server" Text="Description : "></asp:Label>
  75:                                                     </td>
  76:                                                     <td>
  77:                                                         <asp:Label ID="Label2" runat="server" Text='<%# Eval("description")%>'></asp:Label>
  78:                                                     </td>
  79:                                                 </tr>
  80:                                                 <tr>
  81:                                                     <td>
  82:                                                         <asp:Label ID="Label3" runat="server" Text="Rating : "></asp:Label>
  83:                                                     </td>
  84:                                                     <td>
  85:                                                         <asp:Label ID="Label4" runat="server" Text='<%# Eval("rating_avg")%>'></asp:Label>
  86:                                                     </td>
  87:                                                 </tr>
  88:                                             </table>
  89:                                         </td>
  90:                                     </tr>
  91:                                 </table>
  92:                             </ItemTemplate>
  93:                             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  94:                             <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
  95:                             <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
  96:                             <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
  97:                             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  98:                         </asp:DataList>
  99:                     </td>
 100:                 </tr>
 101:             </table>
 102:         </div>
 103:     </form>
 104: </body>
 105: </html>

Fig - (5) Youtube asp.net aspx page.



   1: using System;
   2: using System.Data;
   3: using System.Configuration;
   4: using System.Collections;
   5: using System.Web;
   6: using System.Web.Security;
   7: using System.Web.UI;
   8: using System.Web.UI.WebControls;
   9: using System.Web.UI.WebControls.WebParts;
  10: using System.Web.UI.HtmlControls;
  11: using System.Text;
  12:  
  13:  
  14: public partial class Youtube_GetYouTubeVedios : System.Web.UI.Page
  15: {
  16:     const string DEVELOPERKEY = "YOUR DEVELOPER KEY";
  17:  
  18:     protected void Page_Load(object sender, EventArgs e)
  19:     {
  20:         
  21:     }
  22:  
  23:     private void GetVedio()
  24:     {      
  25:         
  26:         StringBuilder stbURL = new StringBuilder("http://www.youtube.com/api2_rest?");
  27:         stbURL.Append("method=youtube.videos.list_by_tag");
  28:         stbURL.Append("&dev_id=" + DEVELOPERKEY);
  29:         stbURL.Append("&tag=" + txtSearch.Text.Trim());
  30:         stbURL.Append("&page=-1&per_page=-1"); // you can add custom paging if desired
  31:         
  32:         DataSet ds = new DataSet();
  33:         ds.ReadXml(stbURL.ToString());
  34:  
  35:         dlYoutube.DataSource = ds.Tables[2];
  36:         dlYoutube.DataBind();
  37:         
  38:         
  39:     }
  40:  
  41:     protected void btnSearch_Click(object sender, EventArgs e)
  42:     {
  43:         GetVedio();
  44:     }
  45:     protected void dlYoutube_ItemDataBound(object sender, DataListItemEventArgs e)
  46:     {
  47:         if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
  48:         {
  49:             HtmlControl div = (HtmlControl)e.Item.FindControl("player");
  50:             Literal objL = (Literal)e.Item.FindControl("ltrl");
  51:             objL.Text = "<script language='javascript' type='text\\javascript'>swfobject.embedSWF('http://www.youtube.com/v/" + Convert.ToString(DataBinder.Eval(e.Item.DataItem,"id")) + "&enablejsapi=1&playerapiid=ytplayer','" + div.ClientID + "', '425', '356', '8', null, null, params, atts);</script>";
  52:         }
  53:     }
  54: }

Fig - (6) Youtube asp.net aspx.cs page.


 


Happy Programming !!!