どのようにコントロールIDを使用して呼び出すことができるASP.netのユーザーコントロールのJavaScriptコントロールを追加する

Question

コントロールIDを使用して呼び出される独自のJavaScript関数をサポートする単純なユーザーコントロールを作成したいと思います。制御以下：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="Controls.MyControl" %> 
<script type="text/javascript"> 
    function controlClicked(ID) { 
     alert('Hello I am Control:'+ID); 
    } 
</script> 

私は、ユーザーコントロールあなたはすべてのJavaScript関数は、固有の名前を持っていることを確認する必要があり

<%@ 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> 

Answer 1

整形された方法はここでjavascriptのプロトタイプ機能を使用することです。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="Controls.MyControl" %> 
<script type="text/javascript"> 
    var <%=this.ClientID%> = 
    { 
     controlLoaded: function(ID) { 
      alert('Hello I am Loaded:'+ID); 
     }, 
     controlClicked: function(ID) { 
      alert('Hello I am Clicked:'+ID); 
     } 
    } 
</script> 

"<% = this.ClientID％>" ページの "MyControlと" の各発生のためのJavaScriptのプロトタイプオブジェクトを生成します。このプロトタイプオブジェクトを使用して、コントロールの特定の発生のためのメソッドを呼び出すことができます。これは以下のように行うことができます。

<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> 

Answer 2

を含むページに次の操作を行うことができるようにしたいです。そのために、あなたはUniqueID

<script type="text/javascript"> 
    function controlClicked_<%= UniqueID %>(ID) { 
     alert('Hello I am Control:' + ID); 
    } 
</script> 

<asp:Button ID="Button1" Text="Call UserControl Function" runat="server" /> 

を使用することができますし、それに対応するJavaScript関数に一致するように、ユーザーコントロールの背後にあるコードでOnClientClickを設定します。

Button1.OnClientClick = "controlClicked_" + UniqueID;