Client Script can be added to Asp.Net Controls in the following ways:

• Declaratively
• Programmatically

Adding client script dynamically to a server control (Asp.Net) is useful if the event or the code relies on information that is available only at run time.

Adding a client event handler declaratively to an ASP.NET server control

Add an attribute like onmouseover or onkeyup in the controls mark up. Write client script to this attribute value which is to be executed.

Note: Always add a semicolon (;) after the client script in the attribute. This is required so that if ASP.NET generates client script for the control (for example, if the control's AutoPostBack property is set to true), your code will run first.

Any attribute/value pairs in the control's markup that do not correspond to control properties are passed through to the browser as is.

The following example shows an ASP.NET Web page that includes client script that changes the button text color when the user passes the mouse over it.

<asp:Button ID="Button1" runat="server" Text="Button1" onmouseover="MakeRed();" onmouseout="RestoreColor();" />

<script type="text/javascript">
    var previousColor;
    function MakeRed() {
        previousColor = window.event.srcElement.style.color;
        window.event.srcElement.style.color = "#FF0000";
    }
    function RestoreColor() {
        window.event.srcElement.style.color = previousColor;
    }
</script>

Adding a client event handler programmatically to an ASP.NET server control.

Call the 'Add' method of control's attributes collection, in the Page's 'Init' or 'Load' event.

The following example show how to add client script to a Textbox. The length of the text in the Textbox control can be shown by using this script.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<span id="spanCounter"></span>

String displayControlName = "spanCounter";
TextBox1.Attributes.Add("onkeyup", displayControlName +
".innerText=this.value.length;");

Adding 'OnClientClick' event to a button control

In the button control (Button, LinkButton, and ImageButton controls), set the OnClientClick property to the client script to execute.

In the following example a confirmation box is displayed when the button is clicked. Here, OnClientClick event is fired before the OnClick event of button is executed.

<asp:Button ID="Button2" runat="server" OnClick="Button1_Click"   OnClientClick="return confirm('Ready to submit.')"
        Text="Test Client Click" /><br />
<asp:Label ID="Label1" runat="server" Text="" />

protected void Button1_Click(Object sender, EventArgs e)
{
     Label1.Text = "Server click handler called.";
}

In next article we will see How to Create Client Script Dynamically.

Comments/Suggestions are invited. Happy coding......!