Question

I include a JS file in a user control. The host page has multiple instances of the user control.

The JS file has a global variable that is used as a flag for a JS function. I need the scope of this variable be restricted to the user control. Unfortunately, when I have multiple instances of the control, the variable value is overwritten.

What’s the recommended approach in a situation like this?

Answer 1

I would recommend refactoring your code such that all the common JS logic is stored in one place, not in every UserControl. This will reduce the size of your page by a good margin.

You can pass in the id of the UserControl to the common JS method(s) to differentiate between the UserControls.

For the issue of limiting the scope of your ‘UserControl’ variable, you could store some sort of a Key/Value structure to keep your UserControl-specific value – the Key would be the UserControl clientID, and the value would be the variable that you’re interested in.

For example:

var UCFlags = new Object(); //set the flag for UserControl1: UCFlags['UC1'] = true; //set the flag for UserControl2: UCFlags['UC2'] = false; 

To access them, you simply pass the ClientID of the UserControl in to the UCFlags array:

myFlag = UCFlags['UC1']; 

On the server-side, you can replace the constant strings ‘UC1’ or ‘UC2’ with

<%= this.ClientID %> 

like this:

myFlag = UCFlags['<%= this.ClientID %>']; 

You can still use the <%= this.ClientID %> syntax here even though the bulk of the JS is in a separate file; simply set

UCFlags['<%= this.ClientID %>'] = value; 

before the call to embed the JS file.