Get clientid in user control from external javascript file

Question

I am developing a user control (ascx) in ASP.NET which uses javascript for manipulating controls. Currently the javascript code is inlined and uses <%= somecontrol.

Answer 1

If you want to find a specific control when there could be multiple copies, this can't be done. How would the external javascript know which of the n controls you wanted?

How can rig the behavior up to a class and find the elements relative to the position of the action control, like this:

UserControl:

<div class="myControl">
  <asp:Button id="MyButton" runat="server" Text="Click Me" />
  <div style="display:none;">Show me!</div>
</div>

If you jQuery was written to be relative like this:

$(".myControl input").click(function() {
  $(this).next().slideDown();
});

In this case, it doesn't matter what the specific IDs are, as long as you can navigate the DOM relatively to the controls you need. Even if it's more complex like .closest("div").next().find(".bob").prev()...whatever you need to get there works.

Answer 2

The way I solve this problem is to use CSS classes or place the controls within containers with known IDs and then traverse into the container's children to get the actual controls. For example:

<asp:TextBox ID="Something" runat="server" CssClass="mycontrol" ... />

Could be accessed via:

jQuery('.mycontrol');

Or:

<div id="ControlContainer">
    <asp:TextBox ID="Something" runat="server" ... />
</div>

Could be accessed via:

jQuery("#ControlContainer input[type='text']");

The only real problem with this approach is you're tying your code to specific markup on the page, which can be a hassle if the markup changes a lot.

Answer 3

What about a hidden variable:

<input type="hidden" id="ClientId" value="<%=ClientId %>">

Then from your js:

$("#" + $("#ClientID").val())

Or, put the hash in:

<input type="hidden" id="ClientId" value="#<%=ClientId %>">

...

$($("#ClientID").val())

Answer 4

Ok, a different approach, that I try to use a JavaScript-class style, and then initialize it for each control.

In the external javascript file, write your code as:

function oNameCls(ControlId1) {

    this.ControlId1 = ControlId1;

    this.DoYourWork1 = function() {
        // use the control id.
        // this.ControlId1
    }    
    this.DoYourWork2 = function() {
        // use the control id.
        // this.ControlId1
    }    

}

And on the control do the call like that.

<script language="Javascript" type="text/javascript">
    // init - create
    var <%=this.ClientID%>MyCls = new oNameCls(<%=Control1.ClientID%>);
    // do your work
    <%=this.ClientID%>MyCls.DoYourWork1();
</script>

Hope now help better.