In this post I will demonstrate how to extend the functionality of the web server controls by adding client side functionality with Javascript.

Let's move on to our example.

1) Launch Visual Studio 2010/2008/2005. (express editions will work fine). Create a new empty website and choose a suitable name for it.

2) Add a new item in your site, a web form. Leave the default name.

3) We need to add some markup.

  <form id="form1" runat="server">
    <div>
    <span id="test1">nikos</span>
    <br />
    <br />
    <br />
      <asp:Button ID="mybutton" runat="server" Text="Click" 

onmouseover="ChangeFontSize()" onmouseout="ChangeBold()" />
    </div>
  </form>

4) We will add 2 Javascript functions.The first function changes the size of the text inside the span element. The second one will change the size again and make the text inside the span element bold.This is the javascript code

  <script type="text/javascript">
    
   
    function ChangeFontSize()
    {
        document.getElementById('test1').style.fontSize = '50px'; 
    }
      
    function ChangeBold()
    {
        document.getElementById('test1').style.fontWeight = 'bold';
        document.getElementById('test1').style.fontSize = '20px'; 
 
    }
  </script>

5) Run your application and see the text changing size/boldness as you mouse out and over the button.

6) Let's try another way to perform the same operation. We will add the same behaviour programmatically.

Change this line of code

 <asp:Button ID="mybutton" runat="server" Text="Click" 

onmouseover="ChangeFontSize()" onmouseout="ChangeBold()" />

to this one

 <asp:Button ID="mybutton" runat="server" Text="Click"/> 

Leave everything else as it is.

7) In the Page_Load event handling routine type,

mybutton.Attributes.Add("onmouseover", "ChangeFontSize()")
mybutton.Attributes.Add("onmouseout", "ChangeBold()")

8) Run your application and see the text changing size/boldness as you mouse out and over the button.

9) If you want to execute some Javascript client code when the button is clicked, then you can use the OnClientClick property.

In the Page_Load event handling routine type, 

 mybutton.OnClientClick = "return confirm('Are you sure?')"

10) Run your application and see the text changing size/boldness as you mouse out and over the button. When you click the button then you will see the little javascript confirmation window popping up.

11) Add a new web form to your site.Leave the default name. In this form we want to have a javascript function that adds 2 numbers.

We have 2 textboxes and we enter the values to be added. We have a 3rd textbox that will get the result of the addition. 

We will do that with a javascript function.  In order for this to work we need to pass to the javascript function the ID values of the controls. We can do that using the ClientID property of the textbox controls.

This property gets the ID of the control as it is generated from the ASP.Net in the HTML markup.

12) The markup for the Default2.aspx page is

      <asp:TextBox id="txtnum1" type="text" runat="server"/>
 
      <asp:TextBox id="txtnum2" type="text" runat="server" />
 
      <br />
      

      <asp:TextBox ID="txtnum3" runat="server"></asp:TextBox>
     
      <br />
      
    
    <asp:Button ID="BtnAdd" runat="server" Text="Add" 
    OnClientClick=" return Add();" />

Notice that we set the OnClientClick attribute of the button web server control to the Javascript function(Add) we will write below.

12) The Javascript code looks like this

   <script language="javascript" type="text/javascript">
     

     function Add()

     {
     var txtnum1 = document.getElementById('<%= txtnum1.ClientID%>');
     var txtnum2 = document.getElementById('<%= txtnum2.ClientID %>');
     var txtnum3 = document.getElementById('<%= txtnum3.ClientID %>');
     var CurrentValue = 0;
     if (txtnum1.value != '' && txtnum2.value != '')
     CurrentValue = parseInt(txtnum1.value) + parseInt(txtnum2.value);
     txtnum3.value = CurrentValue;
     }

   </script> 

12) The Javascript code is very easy.The only thing worth noticing is how we pass dynamically (not hardcoded) the ID of the textbox controls to the Javascript function.

13) Run your application and enter 2 values in the first 2 textboxes. After you click the button a javascript client event will take place.You will see the result of the addition displayed in the 3rd textbox.

Email me if you need the source code.

Hope it helps!!!