Get clientid in user control from external javascript file

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.ClientID %> to get the control it needs.

I want to put the javascript file in external file but from external file I cannot use the above syntax for retrieving controls. I have read about possible solutions in this and this answers but the problem is that the user control can be placed multiple times on page. This means that the Controls array (mentioned in the answers) will be rendered several times with different items. As a result the script will not be able to retrieve the id it needs. If I put <%= ClientId %> in the name of array that holds items then I will have the same problem as I am trying to solve.

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

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

Method 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())

Method 4

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0