Múltiples controles de usuario y javascript

Question

Incluyo un archivo JS en un control de usuario. La página de host tiene múltiples instancias del control de usuario.

El archivo JS tiene una variable global que se utiliza como indicador para una función JS. Necesito que el alcance de esta variable esté restringido al control del usuario. Lamentablemente, cuando tengo varias instancias del control, el valor de la variable se sobrescribe.

¿Cuál es el enfoque recomendado en una situación como esta?

Answer 1

Recomendaría la refacturación de su código para que toda la lógica JS común se almacene en un solo lugar, no en cada UserControl. Esto reducirá el tamaño de su página por un buen margen.

Puede pasar la identificación de UserControl a los métodos comunes de JS para diferenciar entre UserControls.

Por la cuestión de limitar el alcance de su variable 'UserControl', podría almacenar algún tipo de estructura clave/valor para mantener su valor específico de UserControl - la clave sería la ID del cliente UserControl, y el valor sería la variable que te interesa

Por ejemplo:

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

Para acceder a ellos, sólo tiene que pasar el ClientID del control de usuario en el que la matriz UCFlags:

myFlag = UCFlags["UC1"]; 

En el lado del servidor, puede reemplazar la constante cuerdas "UC1" o "UC2" con

<%= this.ClientID %> 

así:

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

Puede seguir utilizando la sintaxis <% = this.ClientID%> aquí aunque la mayor parte de JS se encuentre en un archivo separado; simplemente configure

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

antes de la llamada para incrustar el archivo JS.

Answer 2

Algunas opciones son para generar dinámicamente el javascript basado en el ClientId del Control de usuario. Podría generar dinámicamente la variable global, por ejemplo.

Otra opción y una que recomendaría es encapsular la variable global y la función dentro de un objeto, su control de usuario puede emitir el JS para crear una instancia de ese objeto (que se puede nombrar dinámicamente permitiendo que alcance el objeto como veas conveniente).

Editar

no tengo un ejemplo de código de trabajo que puedo compartir, pero, he hecho esto en un par de maneras diferentes. el método más fácil es hacer esto en el marcado de su control de usuario.

<script language='javascript'> 
    var <%=this.ClientID%>myObject=new myObject(); 
</script> 

Asumiendo que su control tiene un clientId de myControl Esto creará un myControlmyObject variable.

Otra forma de hacer esto sería generar la secuencia de comandos en el código que se encuentra detrás, puede registrarlo usando: Page.ClientScript.RegisterStartupScript().

Answer 3

Bueno, si usted tiene que mantener con la solución actual, se podría cambiar el nombre de variable global a algo como el siguiente código, que debe estar en el archivo .ascx de su mando:

<script type='text/javascript'> 
var <%= this.ClientID %>_name_of_global_variable; 
</script> 

Donde " este "es el control asp.net. De esta forma, cada control tiene un nombre de variable único, basado en la identificación del cliente. Asegúrese de actualizar el resto de su javascript para usar esta nueva convención de nomenclatura. El problema parece desordenado y los nombres de las variables serán muy largos dependiendo de dónde esté incrustado el control en la página.

¿Tiene sentido? Debería tomar una modificación mínima de JavaScript para que funcione.

Answer 4

Me encontré con el mismo problema y debajo de la publicación del blog lo resolvió. Solución es tomar forma orientada a objetos JavaScript

Adding multiple .NET User Controls that use JavaScript to the same page