title: How do you create a client-side API for an ASP.NET User Control?
body: <p>For example: I have a user control, let's call it "MyControl1" and I want to create "Show()" and "Hide()" javascript functions that can be called from javascript on the parent page - something like "MyControl1.Show();"</p>
  
  <p>Obviously there could be multiple controls on the page, so if you had dropped 2 controls on page:</p>
  
  <pre><code>   &lt;MyTag:MyControl ID="MyControl1" runat="server" /&gt;
     &lt;MyTag:MyControl ID="MyControl2" runat="server" /&gt;
  </code></pre>
  
  <p>It would be nice to be able to do something like:</p>
  
  <pre><code>   function ParentPageJavascriptFunction(){
        MyControl1.Show();
        MyControl2.Hide();
     }
  </code></pre>
  
  <p>How do I go about doing this? Every article I find is about how to hook events in a user control, and I just want the parent page to be able to call certain functions as it sees fit - or perhaps there is a way to use events to do what I am trying to do and I just don't understand it.</p>
  
  <p>Edit: This doesn't seem to be coming across correctly, how about this...</p>
  
  <p>This is what my hypothetical control looks like:</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="controls_MyControl" %&gt;
  
  &lt;script type="text/javascript"&gt;
      function Display(msg) {
          var Label1ClientID = '&lt;%= Label1.ClientID %&gt;';
          document.getElementById(Label1ClientID)... (display the message)
      } 
  &lt;/script&gt;
  
  &lt;asp:Label ID="Label1" runat="server"&gt; &lt;/asp:Label&gt;
  </code></pre>
  
  <p>Now, the "parent" page registers the control like this:</p>
  
  <pre><code>&lt;%@ Register Src="~/controls/MyControl.ascx" TagName="MyControl" TagPrefix="MyTag" %&gt;
  </code></pre>
  
  <p>And in the body it has this:</p>
  
  <pre><code>&lt;asp:Button ID="MyButton1" runat="server" Text="Display" OnClientClick="javascript:MyControl1.Display('hello'); return false;" /&gt;
      &lt;MyTag:MyControl Id="MyControl1" runat="server"&gt;
      &lt;/MyTag:MyControl&gt;
  </code></pre>
  
  <p>The only problem is, obviously, that doesn't work - but that's what I am trying to get at. How do you make this work? I want to be able to allow the page that the user control is nested inside of (the parent page) to be able to call the Display function of that user control. I realize that you can just call Display because its just js (whether it's in the User Control or not), but if you had 2 of these controls on that page that wouldn't work, so how do you create javascript such that the parent page can differentiate which User Controls function it wants to call?</p>