Get client in user control from external javascript file

Question

I am developing a user control (ascx) in ASP.NET that uses javascript to control the controls. Currently, javascript code is embedded and uses <%= somecontrol.ClientID %> to get the required control.

I want to put a javascript file in an external file, but from the external file I cannot use the above syntax to extract the controls. I read about possible solutions in this and this , but the problem is that the user control can be placed several times on the page. This means that the Controls array (mentioned in the answers) will be displayed several times with different elements. As a result, the script will not be able to get the required identifier. If I put <%= ClientId %> in the name of the array containing the elements, then I will have the same problem as I am trying to solve.

Any ideas?

Answer 1

Ok, another approach that I try to use is the style of the JavaScript class and then initialize it for each control.

In an 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, make such a call.

 <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 will help better now.

Answer 2

The way to solve this problem is to use CSS classes or place controls in containers with known identifiers, and then navigate in child containers to get the actual controls. For instance:

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

Access to it is possible through:

 jQuery('.mycontrol'); 

Or:

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

Access to it is possible through:

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

The only real problem with this approach is that you are binding your code to specific markup on the page, which can be a problem if the markup changes a lot.

Answer 3

How 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

If you want to find a special control when there can be several copies, this is not possible. How would external javascript know which of the n controls you want?

How can you bring behavior to a class and find elements relative to the position of the action control, for example:

UserControl:

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

If jQuery was written as relative:

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

In this case, it does not matter what the specific identifiers are if you can navigate the DOM relative to the controls you need. Even if it's more complicated, like .closest("div").next().find(".bob").prev() ... all you need to work there.