c# - How To add JavaScript function for a user control in ASP.net that can be called using control ID -

i want create simple user control supports own javascript functions called using control id , example if have following control :

<%@ control language="c#" autoeventwireup="true" codebehind="mycontrol.ascx.cs" inherits="controls.mycontrol" %> <script type="text/javascript">   function controlclicked(id) {       alert('hello control:'+id);   } </script> 

i want able following on page contains user control

 <%@ page title="" language="c#" masterpagefile="~/light.master" autoeventwireup="true" codebehind="main.aspx.cs" inherits="control.main" %> <%@ register src="~/controls.mycontrol.ascx" tagprefix="uc1" tagname="mycontrol" %>         <script type="text/javascript">           function btnclicked() {             mycontrol.controlclicked('mycontrol');             }         </script>     <asp:content id="content1" contentplaceholderid="maincontent" runat="server">           <uc1:mycontrol runat="server" id="mycontrol" />      <asp:button id="button1"                text="call usercontrol function"                onclientclick="btnclicked"                 runat="server"/>     </asp:content> 

organized way use javascript prototype feature here.

<%@ control language="c#" autoeventwireup="true" codebehind="mycontrol.ascx.cs" inherits="controls.mycontrol" %> <script type="text/javascript">   var <%=this.clientid%> =      {         controlloaded: function(id) {             alert('hello loaded:'+id);         },         controlclicked: function(id) {             alert('hello clicked:'+id);         }     } </script> 

"<%=this.clientid%>" generate javascript prototype object each occurrence of "mycontrol" on page. can use prototype object call methods specific occurrence of control. can done given below:

<uc1:mycontrol runat="server" id="mycontrol1" />  <button id="btnshowalert1" onclick="javascript:btnshowalert1_clicked();">click 1 </button>  <uc1:mycontrol runat="server" id="mycontrol2" />  <button id="btnshowalert2" onclick="javascript:btnshowalert2_clicked();">click 2</button>      <script type="text/javascript">     var mycontrol1 = <%=mycontrol1.clientid%>;     var mycontrol2 = <%=mycontrol2.clientid%>;      function btnshowalert1_clicked() {         if(typeof(mycontrol1) != "undefined") {             mycontrol1.controlclicked('mycontrol1');         }     }      function btnshowalert2_clicked() {         if(typeof(mycontrol2) != "undefined") {             mycontrol2.controlclicked('mycontrol2');         }     }      window.onload = function() {         if(typeof(mycontrol1) != "undefined") {             mycontrol1.controlloaded('mycontrol1');         }     } </script>