Surendra Sharma

Surendra Sharma

Search This Blog

Tuesday, August 27, 2013

How to Show YouTube videos on ASP.NET webpage


Now a days integration of SNS - Social Networking Sites links and feeds to our site is common requirement in almost all web application development.

This article helps how to display Youtube videos on webpage in ASP.NET.

If you are interested in showing Facebook feeds on ASP.NET page then read my article “How to show Facebook feeds on ASP.NET webpage”.

If you are interested in showing Twitter Tweets on ASP.NET page then read my article “How to get Twitter tweets on ASP.NET webpage”.

By searching any keyword in Youtube , Youtube shows all relevant videos in thumbnail with their description.

We need to create similar functianlity in asp.net page.

For this functionality we have to include this javascript in aspx page http://www.yvoschaap.com/ytpage/ytembed.js

We need to call function ytEmbed.init() which is in ytembed.js file.

ytEmbed.init({ 'block': 'youtubeDiv', 'type': 'search', 'q': 'baby laughing', 'results': '4', 'order': 'new_first' });

This function expect JSON string where its different parameter details with values are
·         block - obligated ID of the html element (<div id='this_is_the_block_id'>) where you want the results thumbnails to appear.
·         type - obligated setting that provides the function you want to execute:
o    search - YouTube searches for a video with the string set by 'q'.
o    playlist - results of a YouTube playlist set by playlist id in 'q'.
o    user - results of a YouTube user videos set by user name in 'q'.
·         q - obligated string to identify your results, see 'type' above.
·         results - the number of results you want to show.
·         order - what comes first:
o    new_first - newest videos published on top
o    highest_rating - highest rated videos on top
o    most_relevance - most relevant videos on top
·         player - decide if you want to play the video on youtube.com or embed on your page:
o    embed - plays the video on your page.
o    link - plays the video on youtube.com
·         display_first - display the player and queu first video results (needs player set to embed)
o    true
·         width: embed player width
·         height: embed player height
·         layout - how do you want the results to appear:
o    thumbnails - only a list of thumbnails as result.
o    full - list of results with thumbnail, description, rating and user

Ok OK Ok. Now stop theory , show us code [ Afterall we all are developer who only and mostly intersted in code J]

Get searched keyword from user , query string etc.

I am hard coding here. Lets find all videos on Youtube of great great man Steve Jobs.

protected void Page_Load(object sender, EventArgs e)
{
YoutubeKeyword.Value = "Steve Jobs";
}


Use below ASPX page for displaying Youtube videos in thumbnail

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Youtube Videos</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript" src="http://www.yvoschaap.com/ytpage/ytembed.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            YouTubeFeeds($("#YoutubeKeyword").val());
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <h1 align="left">
                Youtube Videos</h1>
        </div>
        <div>
            <div id="snsYouTube">

                <script type="text/javascript">
                    function YouTubeFeeds(YoutubeKeyword) {
                        ytEmbed.init({ 'block': 'snsYouTube', 'q': YoutubeKeyword, 'type': 'user', 'results': 7, 'order': 'most_relevance', 'player': 'embed', 'layout': 'full' });
                    }
                </script>

            </div>
        </div>
    </div>
    <asp:HiddenField ID="YoutubeKeyword" runat="server"></asp:HiddenField>
    </form>
</body>
</html>


Reference :- Most of the stuff are referred from http://www.yvoschaap.com/youtube.html


Please leave your comments or share this tip if it’s useful for you.

Monday, August 26, 2013

Unterminated string constant


I was working today to display message in javascript alert() function.

I was passing message from C# code to javascript function as

protected void btnShow_Click(object sender, EventArgs e)
{
    StringBuilder strMsg = new StringBuilder();

    strMsg.AppendLine("Product ID: 101");
    strMsg.AppendLine("This product is not available.");
    strMsg.AppendLine("Please select another product.");

    string strMessage = strMsg.ToString();
   
    ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "ShowMessage", "AlertInfo('" + strMessage + "');", true);
}

My Javascript looks like this

<script type="text/javascript">

    function AlertInfo(msg) {
        alert(msg);
    }
   
</script>

When I run the code and click on my Show button, browser welcomes me by displaying javascript error as “Unterminated string constant”.

When I investigated it, I come to know that I was using AppendLine method which introduced \r\n newline characters in string message. So my final message looks something like this

Product ID: 101\r\nThis product is not available.\r\nPlease select another product.\r\n

Then I replacess all occureneces of \r\n by space as below

string strMessage = strMsg.ToString();
strMessage = strMessage.Replace("\r\n", " ");
ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "ShowMessage", "AlertInfo('" + strMessage + "');", true);

By replacing \r\n message with space solve my problem

strMessage = strMessage.Replace("\r\n", " ");

So never pass \r\n to javascript variables, parameters, functions.



Please leave your comments or share this tip if it’s useful for you.

Friday, August 23, 2013

How to get Twitter tweets on ASP.NET webpage

Now a days integration of SNS - Social Networking Sites links and feeds to our site is common requirement in almost all web application development.

This article helps how to display Twitter tweets on webpage in ASP.NET.

If you are interested into show Facebook feeds on ASP.NET page then read my article “How to show Facebook feeds on ASP.NET webpage

Twitter provides API calls to get feeds using Twitter data widget id and twitter link like https://twitter.com/YourTwitterAccountLink

Storing widget id in web.config, database is good place.

protected void Page_Load(object sender, EventArgs e)
{
TwitterID.Value = ConfigurationManager.AppSettings["TwitterID"];
}


Use below ASPX page for displaying Twitter tweets

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Twitter Tweets</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#TwitterLink").attr("href", "https://twitter.com/YOURTWITTERNAME");
            $("#TwitterLink").attr("data-widget-id", $("#TwitterID").val());

            TwitterFeeds(document, "script", "twitter-wjs");
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <h1 align="left">
                Twitter Tweets</h1>
        </div>
        <div>
            <div>
                <div>
                    <a id="TwitterLink" border="0px" data-border-color="white">Tweets by @XYZ</a>

                    <script type="text/javascript">
                        function TwitterFeeds(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (!d.getElementById(id)) {
                                js = d.createElement(s);
                                js.id = id;
                                js.src = "//platform.twitter.com/widgets.js";
                                fjs.parentNode.insertBefore(js, fjs);
                            }
                        }
                    </script>

                </div>
            </div>
            <!--twitter//-->
        </div>
    </div>
    <asp:HiddenField ID="TwitterID" runat="server"></asp:HiddenField>
    </form>
</body>
</html>


Please leave your comments or share this tip if it’s useful for you.

Thursday, August 22, 2013

How to show Facebook feeds on ASP.NET webpage


Now a days intergation of SNS - Social Networking Sites links and feeds to web site is common requirement in almost all web application development.

This article helps how to display facebook feeds on webpage in ASP.NET.

Facebook provides API calls to get feeds using TOKEN.

Storing token in web.config, database is good place.

protected void Page_Load(object sender, EventArgs e)
{
FacebookToken.Value=ConfigurationManager.AppSettings["FacebookToken"];
}


Use below ASPX page for displaying Facebook feeds

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Facebook Tags</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $("#FacebookFeeds").attr("data-href", "http://www.facebook.com/" + $("#FacebookToken").val());
            FacebookFeeds(document, 'script', 'facebook-jssdk');
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <h1 align="left">
                Facebook Feeds</h1>
        </div>
        <div>
            <div>
                <div>
                    <div id="fb-root">
                    </div>

                    <script type="text/javascript">
                        function FacebookFeeds(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) return;
                            js = d.createElement(s); js.id = id;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            fjs.parentNode.insertBefore(js, fjs);
                        }
                     </script>

                    <div id="FacebookFeeds" class="fb-like-box" data-width="400" data-height="600" data-border-color="white"
                        data-show-faces="false" data-stream="true" data-header="false">
                    </div>
                </div>
            </div>
            <!—Code Ends Here//-->
        </div>
    </div>
    <asp:HiddenField ID="FacebookToken" runat="server"></asp:HiddenField>
    </form>
</body>

</html>

Please leave your comments or share this tip if it’s useful for you.

Tuesday, August 20, 2013

How to migrate or upgrade VB project to VB.NET Project


Before .NET, VB was primary language for application development on Windows platform.

Several applications are still running in VB worldwide. End users are habitual with these VB application and don’t want to stop these.

But there are need to change those VB applications to .NET.

However end user / client can’t wait, invest to rewrite all these VB applications to .NET.

So what’s the middle and safe way?

Migration or Upgradation is the only answer. It saves time, money and efforts of both clients as well as developers.

How to migrate or upgrade VB code to VB.NET?

It’s a 5 steps process.

Open VB project file [extension is .VBP] in Visual Studio from either File -> Open -> Project / Solution… or Press Ctrl + Shift + O or click on Open: Project… link on Start Page as below

 

1.   First screen is welcome screen. Just click on Next > button as below

 

2.   This screen asks which type of project you want. Here you have two option – either select .EXE or DLL as per your VB project

 

3.   Specify location of new migrated project

 

4.   At this point, all required information is available to Visual Studio for migration. Click on Next > button as below


5.   Last wizard shows you progress of migration.


Build the migrated project.

After migration, visual studio creates Upgrade report with name “_UpgradeReport.htm” in project itself. This is very useful report. One should have to check it as it includes all passed and failed coding area which finally helps to fix migrated errors.


Please leave your comments or share this tip if it’s useful for you.

Windows… Option - Secrets of Visual Studio


Least known but yet most powerful facility of Visual Studio is Windows… option.

What is Windows…?

Suppose you have 8 windows or forms opened in Visual Studio as below
·         TestPage1.aspx
·         TestPage2.aspx
·         TestPage3.aspx
·         TestPage4.aspx
·         TestPage1.aspx.cs
·         TestPage2.aspx.cs
·         TestPage3.aspx.cs
·         TestPage4.aspx.cs



Now how can you close only some of the forms?

Way 1:-
Close each form one by one by right click on form tab and select Close as below


Way 2:-
Close all opened forms except only selected form by right click on any one form tab and select Close All But This as below


Way 3:-
Close all opened forms from menu Window -> Close All Documents as below


Way 4:-
From ours all 8 opened forms suppose I want only 3 forms should be opened and rest should be closed.

Below forms should be opened
·         TestPage1.aspx
·         TestPage2.aspx
·         TestPage4.aspx.cs

Below forms should be closed

·         TestPage3.aspx
·         TestPage4.aspx
·         TestPage1.aspx.cs
·         TestPage2.aspx.cs
·         TestPage3.aspx.cs

Visual Studio provides to achieve this from its Window… option
This option is available in menu Window -> Windows…  [Last menu item]


On Click on Windows… item, a window should appear

Now select the forms and click on “Close Window(s)”.


All selected forms should be closed.

Also you can activate any forms from Windows… option. Just select any form and click on Activate as below


Your form should appear as selected form in Visual Studio IDE.



Please leave your comments or share this tip if it’s useful for you.