Adding JavaScript to ASP NET controls

Published: 25 February 2015
on channel: kudvenkat

139,275

560

If you are a foodie like me, I am sure you will enjoy the recipes on my friend's YouTube channel. If you find them useful, please subscribe and share to support her. She's really good at what she does.
/ @aarvikitchen5572

Link for all dot net and sql server video tutorial playlists
/ kudvenkat

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

In this video we will discuss different options available to add JavaScript to ASP.NET server controls.

Adding JavaScript to ImageButton in ASP.NET :

Adding JavaScript to ASP.NET server control declaratively : Copy and paste the following HTML in WebForm1.aspx. In this example we are declaratively adding the JavaScript that we want to execute in response to onmouseover and onmouseout events. onmouseover and onmouseout attributes does not correspond to any of the ImageButton control properties, so they will be passed through to the browser as is.

[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"
onmouseover="this.src='/Images/greenButton.png'" onmouseout="this.src='/Images/blueButton.png'" /]

The JavaScript that we want to execute in response to onmouseover and onmouseout events can also be present in separate JavaScript functions as shown below.
[form id="form1" runat="server"]
[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"
onmouseover="changeImageOnMouseOver();" onmouseout="changeImageOnMouseOut();" /]
[script type="text/javascript"]
function changeImageOnMouseOver()
{
document.getElementById("ImageButton1").src = "/Images/greenButton.png";
}
function changeImageOnMouseOut()
{
document.getElementById("ImageButton1").src = "/Images/blueButton.png";
}
[/script]
[/form]

Adding JavaScript to ASP.NET server control at runtime :

ASPX : Notice that in the declarative markup we removed onmouseover and onmouseout attributes
[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"/]

ASPX.CS :
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.Attributes.Add("onmouseover", "this.src='/Images/greenButton.png'");
ImageButton1.Attributes.Add("onmouseout", "this.src='/Images/blueButton.png'");
}

Adding JavaScript to ASP.NET Button onclick client event declaratively : With Button, LinkButton and ImageButton controls, OnClick attribute corresponds to server side click event. For this reason you cannot use OnClick attribute to add JavaScript that you want to execute in response to client side click event. The following code throws an error.

[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"
OnClick="return confirm('Are you sure you want to submit')"/]

With Button, LinkButton and ImageButton controls to associate JavaScript that you want to execute in response to client side click event use OnClientClick attribute as shown below.

[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"
OnClientClick="return confirm('Are you sure you want to submit')"/]

Adding JavaScript to ASP.NET Button onclick client event at runtime : If you are adding JavaScript at runtime, then you will have to use onclick.

ASPX :
[asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png"/]

ASPX.CS
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.Attributes.Add("onclick", "return confirm('Are you sure you want to submit');");
}

On this page of the site you can watch the video online Adding JavaScript to ASP NET controls with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 25 February 2015, share the link with friends and acquaintances, this video has already been watched 139,275 times on youtube and it was liked by 560 viewers. Enjoy your viewing!