Display youtube video in asp.net mvc using "YouTubePlayerHelper"

Here i am explaining how you can display youtube video in asp.net mvc page using "YouTubePlayerHelper". Using "YouTubePlayerHelper" you have to just pass youtube media file name and id of the player. You can also pass the you-tube player option like width, height, color and border which are optional.

How to used "YouTubePlayerHelper"in asp.net mvc page ?

It is simple just add namespace where your "YouTubePlayerHelper"class reside and then add the following code in your asp.net mvc page.

For "YouTubePlayerHelper" you can download from here.

<%@ Import Namespace="Lesson1.Helpers" %>
<%= Html.YouTubePlayer("test","3sdJtQWlVrI", new YouTubePlayerOption { Width = 480, Height = 385, PrimaryColor = System.Drawing.Color.White, SecondaryColor = System.Drawing.Color.Pink,Border= true })%>

Here i am just pass the youtube video file name "3sdJtQWlVrI" and pass the some option for displaying youtube video in my asp.net mvc page.

Here one question arise in your mide that Why i am creating "YouTubePlayerHelper" class?? It is simple to just right down the embedded code and give all the option and display youtube video just simple then.....

Because of creating "YouTubePlayerHelper" class is you have not right down the whole embedded code each and every page where you need ti display youtube video. If changes occurs in embedded code you have to just change "YouTubePlayerHelper" class nothing else.

Call webservice method at server side which return data in json formate

In my previous post i have done with how to access the webservice method at client side using jQuery and how to handle the json data which is return by
webservice method.In this post i describe how we can handle the json data the webservice method at client using jQuery.

-> Take one .asmx file in your peoject for creating webservice.
-> For that i can used Northwind database and in that i take product table ( Linq To Sql Classes => .dbml file).
-> I used JavaScriptSerializer class for the convert data into json formate

public string Getjsondata()
{
string jsonstring = "";

NorthwindDataContext ObjDataContext = new NorthwindDataContext();

var product = from p in ObjDataContext.Products
select new { p.ProductID, p.ProductName };

JavaScriptSerializer js = new JavaScriptSerializer();
jsonstring = js.Serialize(product).ToString();

return jsonstring;
}


-> Now add created webservice in your project using "Add Web References".You can see in the image i have add webservice and give the name "jsonproduct".

-> For getting json data at server side we can create one "JsonProduct" class

class JsonProduct
{
public string productid { get; set; }
public string productname { get; set; }

}


-> After this you can access the webservice method in .cs file using webservice class in my case i have "getproduct" class and also i am adding one
dropdownlist in .aspx page

// Web Service Class and create the the object of that class
getproduct ObjProduct = new getproduct();

// Using created object i can call the webservice method and take the json data into string variable
string jsonstring = ObjProduct.HelloWorld();

// After that i can used JavaScriptSerializer class for Deserialize json string and store the data into IList
IList<JsonProduct> persons = new JavaScriptSerializer().Deserialize<IList<JsonProduct>>(jsonstring);

// Bind IList object to dropdownlist datasource
ddlProduct.DataSource = persons;
ddlProduct.DataTextField = "productname";
ddlProduct.DataValueField = "productid";
ddlProduct.DataBind();


Call the webservice at client side using jquery

In my previous post i have done with how to access the webservice method at client side using AjaxcontrolToolKit.

Initial Steps
--------------
-> Add one .asmx [In my case i add Testservice.asmx] file in your peoject for creating webservice.
-> Then add "ScriptService" attribute see the Fig.-1. Using "ScriptService" we can access the
webserivce method in the javascript.
-> After that add 2 different web method in the webservice see the Fig.- 1.
-> First method don't take any parameter and return string and second method take one
parameter and return string.

-> Add the jQuery script

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

-> Here i have take two different example in first i don't pass any parameter and in the second
example i pass one parameter and get the results

EXample 1 : Call the webservice method without passing any parameter

-> Add one button and one div tag for display result

<input type="button" name="btnCall" value="Call Webservice" id="btnCall" />
<div id="output">
</div>

-> Now add some javascript bwtween two script tag for calling webservice method...

$(function () {
$('#btnCall').click(getData)
});

function getData() {
$.ajax(
{
type: "POST",
url: "http://yourservername/AjaxExample/WebService/Testservice.asmx/HelloWorld",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (response, status) {
//alert(response.d);
$('#output').empty();
$('#output').append(response.d);

},
failure: function (msg) {
alert(msg);
}
}
);
}

Here you can see that i have not pass anything in data attribute and two other
function success and failure which is inbulit function for the jQuery.

Example 2 : Call the webservice method which take one string parameter

-> For that you can add following html code in your file.

<input type="text" name="txtData" value="Test string is come." id="txtData" />
<input type="button" name="btnCall1" value="Get string From webservice" id="btnCall1" />
<br />
<div id="output">
</div>

-> After that you can add following javascript function between script tag

$(function () {
$('#btnCall1').click(getstring)
});

function getstring() {
$.ajax(
{
type: "POST",
url: "http://yourserver/AjaxExample/WebService/Testservice.asmx/GetString",
data: "{ strData: '" + $('#txtData').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (response, status) {
//alert(response.d);
$('#output').empty();
$('#output').append(response.d);

},
failure: function (msg) {
alert(msg);
}
}
);
}

Here you can see that i take the data from the textbox and pass that data to webservice method and get the result

Above two webmethod is simple which return string data but what if webmethod return json data.

EXample 3 : Call the webservice method which return string data but in the form of json.

-> For that i can used Northwind database and in that i take product table ( Linq To Sql Classes => .dbml file).

-> I used JavaScriptSerializer class for the convert data into json formate

public string Getjsondata()
{
string jsonstring = "";

NorthwindDataContext ObjDataContext = new NorthwindDataContext();

var product = from p in ObjDataContext.Products
select new { p.ProductID, p.ProductName };

JavaScriptSerializer js = new JavaScriptSerializer();
jsonstring = js.Serialize(product).ToString();

return jsonstring;
}

-> Now add html button in your page

<input type="button" name="btnCallJson" value="Retrun Json Data" id="btnCallJson" />
<br />
<div id="output">
</div>

-> After that you can add this javascript function in the script tag

$(function () {
$('#btnCallJson').click(getjsondata)
});

function getjsondata() {
$.ajax(
{
type: "POST",
url: "http://yourserver/AjaxExample/WebService/Testservice.asmx/Getjsondata",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (response, status) {
var myObjects = eval('(' + response.d + ')');
//alert(myObjects.length);
$('#output').empty();
$.each(myObjects, function (index, myObject) {
$('#output').append('<p><strong>(' + myObject.ProductID + ')' +
myObject.ProductName + '</strong>');
});
},
failure: function (msg) {
alert(msg);
}
}
);
}

Here i take used eval for json parse and take jQuery each syntax for taking data from json and display that data into div tag.

Call the webservice at client side using Ajaxcontroltoolkit

In my previous post i have done with how to create web service and how to access that web service in asp.net site (at server side). In most of forum i am read one question how to access the web service at client side means using the JavaScript? So here i am explain how to call the web service at client side, with two different way 1) AjaxControlTollKit and 2) jQuery

Create web service
-> Add one .asmx file in your peoject for creating webservice.
-> Then add "ScriptService" attribute. Using "ScriptService" we can access the webserivce
method in the javascript.
-> After that add 2 different web method in the webservice see the Fig.- 1.
-> First method don't take any parameter and return string and second method take one
parameter and return string.

Fig-1 Creating web service

-> So now calling webservice webmethod in the javascript using Ajaxcontroltoolkit you can do
the following way

1) Register AjaxControlToolkit.dll in your page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2) Then add scriptmanager between from tag

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService/Testservice.asmx" />
</Services>
</asp:ScriptManager>

Here you can see that in the servicerefernce i have not given the the full path in the "Path" attribute because the web service which i call is
reside in my project. If you want to call webservice which is not reside in your project then give the full path in the "Path" attribute this way

<asp:servicereference path="http://yourservername/AjaxExample/WebService/Testservice.asmx">

3) Now you can add one button for calling javascript function which can call the first webmethod "HelloWorld" and get the return data.

<asp:Button Text="Call Webservice" runat="server" ID="btnCall" OnClientClick="javascript:return getData();" />

function getData()
{
Testservice.HelloWorld(SucceededCallback, FailedCallback);
return false;
}

4) Now you can add second button for calling javascript function which can call the second webmethod "GetString(string strData)" and get the return data.

<asp:TextBox runat="server" ID="txtData" Text="Test string is come." />
<asp:Button Text="Get string From webservice" runat="server" ID="btnCall1" OnClientClick="javascript:return getstring();" />

Here you can see that i take one textbox also.Using this textbox i can pass the string to webmethod and get that pass string into the alert.

javascript
----------

function getstring()
{
Testservice.GetString(document.getElementById('txtData').value,SucceededCallback, FailedCallback);
return false;
}



In javascript function you can see that i call the method using the class name of the webservice in our case this is "Testservice" and after
that call the webmethod that is "HelloWorld" and "GetString".In both function you can see that i have pass two parameter which is common for both
that is SucceededCallback and FailedCallback.

-> SucceededCallback : This is the function name in which we can get the result data which is return by webemthod.

function SucceededCallback(result)
{
alert(result);
}

-> FailedCallback : This is the function name in which we can catch the error if webmethod reurn any error.

function FailedCallback(error)
{
alert(error.get_message());
}


Display category in the hierarchical way in the dotnetblogengine

Hello to all developer,
i want to display category in the form of tree view in dotnetblgoengine blog.But i can't find any single post about the category display this way.???
So i start work on that to display category tree view form and the finally i got the solution for how to display category in the hierarchical form.

In my solution i am doing this way...

-> When page load all the parent category display with the post count and rss image.
-> After clicking on the parent category only child category of that parent category display.
-> i do this up to n-level....



Download Widgets : Hierarchical Catgeory List

Comment's from the developer always come.

Sql Azure

I search for something in the sql server at that i found one article about the sql azure .

Thanks to "Don Schlichting" he is creating such a wonderful article for the .net users. How to used sql Azure in the .net . After reading this i search about the sql azure and seeing in the sql azure site and create the database then table. After this i think that it is possible to connect the sql azure to sql server management studio???

For that here i describe steps by step for creating account,database and table in the sql azure.

1) First of all you have to go sql Azure . In that you have to login with your window live Id (If You don't have then create it.)

2) After login you have to redirect to invitation code page where you have to enter your 32 character invitation code. So you think how you can find your invitation code. So don't worry
for that you can see one "Note : If you do not have an invitation code, please go here to join our mailing list to receive one." so please click on the "Mailing list ".


3) After click on the link one new tab is open like "Complete Required Registration Information". So in this you can choose "Continue" button for the further processing.



4) So you redirect to register page and enter your detail for getting invitation code and the click on "Continue" button. So you can redirect on verification page.



5) In the verification page you have to see your email address which you enter in the register page. So Microsoft ask to you that verify your email address that is enter into register page is correct or not. Then click on "Continue" button and got the new screen with the display name


6) So enter you display name which you want then click on the "Finish Registration" button.

7) After Clicking Finish Button you redirect to another page "Sql Azure Registration". So fill up your detail and click on the "Submit" button.



8) After Submit button you got the confirmation page "Thanks for registering!".


What after this, please sign out in the Sql Azure and checking the your mail box which is your register in the registration form.If you can't get any mail within two days please post your query in the sql azure forum .

After doing this long process i got the long mail from the Microsoft about the sql azure in that they provide the sql azure link and the invitation code and some URL for references.

So i copy that invitation code and open the https://sql.azure.com site and enter my windows live id and i redirect to invitation code page where you have to enter your 32 character invitation cod. After enter the invitation code you can see your account is now enabled.They display following detail.



After getting this screen you are now ready to create your own database so click on the project name so you can get the next screen. In that you have to provide server login detail like user name , password , server location and then submit this detail so you can get the next screen say "Server Administration".



In this above image you can see the Server Name, Administrator User Name, Server Location , your master database (which is by default create by sql azure for you) and fire wall setting.

So creating database, first of all you have to set "Firewall Setting" tab. After Clicking firewall you can see the three buttons Add, Edit and Delete Rule. So click on the add rule and so one pop up is open with add name , your ip range and your ip from which you access this sql azure database.So fill up all the detail and then click on submit button.



Now after doing above all the long steps you are now ready to create the database. you can create a database three way using sql azure site or sql server management studio or sqlcmd (using command).

A) Sql Azure :
-> For creating database using sql azure site you have to click on the "Database" tab.
So you can see the four button.
1) Connection String
-> After clicking this button one pop up is open and you get two Connection string
1) Ado.net and 2) ODBC. So take which you want.
-> I select first one ado.net.
-> e.g For this tutorial i used this connection string
(It is dummy so you can't used any where)

Server=tcp:servername.database.windows.net;Database=master;User
ID=myusername;Password=myPassword;
Trusted_Connection=False; Encrypt=True;

2) Test Connectivity
-> This button is used for test connectivity.
3) Create Database
-> After clicking this button one pop up is open.
-> Enter your database name select size of the database. Then click on "Create" button.



4) Drop Database
-> Used for drop the selected database.

B) SqlCmd :
-> go to run and type cmd then command propmt is open
-> Now type sqlcimd -S your_server_name -U username@servername -P
yourpassword -d master
Note :
->Your_server_name:Please remove "tcp:" which is given into the connection string
-> username@servername : Please add your server name which is given into your
connectionstring

e.g. sqlcimd -S servername.database.windows.net -U myusername@servername -P
myPassword -d master and then eneter.

C:\Document and Settings\vipul>sqlcimd -S servername.database.windows.net -U
myusername@servername -P myPassword -d master
1>create database OnlineExam1
2>Go
1>



So OnlineExam1 Database is created.

3) Sql Server Managment Studio :
-> I have sql server 2008.So go to run and type ssms (open sql server managment studio)
-> Now enter your server name,UserId and Password and then click on the connect and
ohhhhhhhhh you can get the error like Invalid object name......So What to do???

-> Click ok in the error window and cancle the connection window.Now once again click the
new query and now you can enter all the detail and now connect so it will
connect and you can see the "master" database in the avilabel database dropdown.
-> Now you are all the expert in the sql server so you can create the database and see the
effect same as we create the database in the sqlcmd.

So we can see the above steps for creating account in the sql azure ,database and how you can access that account in the different way.

One min................

When i connect once again in the sql server management studio and when i acess the my newly created database "Onlinexam1" and got the error...say you can't access the database i am afraid what happen....................

then i close my existing connection and the once again click on new query window and then click on "Option" Button. In that you can select in the Connect to database so they ask one whould you like to continue? so click on ok and enjoy because now you can access the "OnlineExam" database.

How to get value from Checkboxlist using javascript

I read many of the thread regarding to how to get value from the check box list using javascript.....

Here i am describing how you get the value from the check box list using javscript

JavaScript
----------
function getName1()
{

var chkText = '';
var chktable = document.getElementById('chklistInterests');
var chktr = chktable.getElementsByTagName('tr');

for(var i=0; i ;lt chktr.length;i++)
{
var chktd = chktr[i].getElementsByTagName('td');
for(var j=0; j ;lt chktd.length; j++)
{
var chkinput = chktd[j].getElementsByTagName('input');
var chklabel= chktd[j].getElementsByTagName('label');
for(k=0;k ;lt chkinput.length;k++)
{
var chkopt = chkinput[k];
if(chkopt.checked)
{
chkText = chkText + chklabel[k].innerText + ',';
}
}
}
}
alert( chkText);
}