How do you create a client-side API for an ASP.NET User Control?

Question

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();"

Obviously there could be multiple controls on the page, so if you had dropped 2 controls on page:

   <MyTag:MyControl ID="MyControl1" runat="server" />
   <MyTag:MyControl ID="MyControl2" runat="server" />

It would be nice to be able to do something like:

   function ParentPageJavascriptFunction(){
      MyControl1.Show();
      MyControl2.Hide();
   }

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.

Edit: This doesn't seem to be coming across correctly, how about this...

This is what my hypothetical control looks like:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="controls_MyControl" %>

<script type="text/javascript">
    function Display(msg) {
        var Label1ClientID = '<%= Label1.ClientID %>';
        document.getElementById(Label1ClientID)... (display the message)
    } 
</script>

<asp:Label ID="Label1" runat="server"> </asp:Label>

Now, the "parent" page registers the control like this:

<%@ Register Src="~/controls/MyControl.ascx" TagName="MyControl" TagPrefix="MyTag" %>

And in the body it has this:

<asp:Button ID="MyButton1" runat="server" Text="Display" OnClientClick="javascript:MyControl1.Display('hello'); return false;" />
    <MyTag:MyControl Id="MyControl1" runat="server">
    </MyTag:MyControl>

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?

Answer 1

What your trying to do is pretty straightforward. The asp.net controls are a bulky way of wrapping pure html into controls on a page. In order to be able to call a javascript event on a control you have to know the ID of the result of the control rendering to the page.

NOTE: all .net controls have a member called .ClientID and this represents what the runtime will generate as the ID of the HTML it is designed to encapsulate/render.

In order to get the ID of the control on the page when it renders you need to do something like this:

var dotNetHtmlClientID = '<%= txtMessage.ClientID %>';
$('#' + dotNetHtmlClientID).bind('onclick', function(){

    //dostuff

});

The first line is c# inline code to get the ClientID from the runtime.

Update **

If you want to get the clientID of the user control from the page that it is located on you need to do this:

//on the dot net page server side

protected string controlClientId;

void Page_Load(object sender, Eventargs e)
{

     controlClientId = Page.FindControl("MyControlThatImBindingEventToDotNetId").ClientID;

}

//on the page client side

var dotNetHtmlClientID = '<%= controlClientId %>';
$('#' + dotNetHtmlClientID).bind('onclick', function(){

    //dostuff

});