Mehrere Benutzersteuerelemente und JavaScript

Question

Ich schließe eine JS-Datei in einem Benutzersteuerelement ein. Die Hostseite verfügt über mehrere Instanzen des Benutzersteuerelements.

Die JS-Datei hat eine globale Variable, die als Flag für eine JS-Funktion verwendet wird. Ich brauche den Umfang dieser Variable auf die Benutzerkontrolle beschränkt sein. Wenn ich mehrere Instanzen des Steuerelements habe, wird der Variablenwert leider überschrieben.

Was ist der empfohlene Ansatz in einer solchen Situation?

Answer 1

Ich würde empfehlen, Ihren Code so zu refactoring, dass alle gängigen JS-Logik an einem Ort, nicht in jedem UserControl gespeichert ist. Dies wird die Größe Ihrer Seite um eine gute Marge reduzieren.

Sie können die ID des UserControl an die gemeinsame JS-Methode (s) übergeben, um zwischen den UserControls zu unterscheiden.

Für das Problem der Begrenzung des Bereichs Ihrer "UserControl" Variable könnten Sie eine Art von Schlüssel/Wert-Struktur speichern, um Ihre UserControl-spezifischen Wert zu halten - der Schlüssel wäre die UserControl ClientID, und der Wert wäre die Variable, an der Sie interessiert sind.

Zum Beispiel:

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

auf sie zuzugreifen, geben Sie einfach die ClientID des Usercontrol übergeben in der UCFlags Array:

myFlag = UCFlags["UC1"]; 

Auf der Server-Seite, die Konstante ersetzen strings "UC1" oder "UC2" mit

<%= this.ClientID %> 

wie folgt aus:

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

Sie können immer noch die <% = this.ClientID%> Syntax verwenden, obwohl sich der Großteil der JS in einer separaten Datei befindet; einfach setzen

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

vor dem Aufruf, die JS-Datei einzubetten.

Answer 2

Einige Optionen bestehen darin, das Javascript basierend auf der ClientId des Benutzersteuerelements dynamisch zu generieren. Sie könnten beispielsweise die globale Variable dynamisch generieren. Eine andere Option und eine, die ich empfehlen würde, ist die Kapselung der globalen Variablen und Funktion innerhalb eines Objekts, dann kann Ihr Benutzersteuerelement die JS ausgeben, um eine Instanz dieses Objekts zu erstellen (die dynamisch benannt werden kann, so dass Sie das Objekt definieren können) wie du es für richtig hältst).

bearbeiten

ich aber keine funktionierende Codebeispiel, die ich teilen kann, habe ich dies in ein paar verschiedene Arten erfolgen. Die einfachste Methode besteht darin, dies im Markup Ihres Benutzersteuerelements zu tun.

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

Ihrer Kontrolle Angenommen hat eine clientId von myControl dieser wird eine Variable myControlmyObject erstellen.

Eine andere Möglichkeit, dies zu tun, wäre, das Skript im Code zu generieren, hinter dem Sie es registrieren könnten: Page.ClientScript.RegisterStartupScript().

Answer 3

Nun, wenn Sie mit der aktuellen Lösung zu halten, könnten Sie Ihre globale Variable zu so etwas wie dem folgenden Code umbenennen, die für das Steuerelement in der ASCX-Datei sein sollte:

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

Wo? " das "ist die asp.net Kontrolle. Auf diese Weise hat jedes Steuerelement einen eindeutigen Variablennamen, der auf der Client-ID basiert. Stellen Sie sicher, dass Sie den Rest Ihres Javascript aktualisieren, um diese neue Namenskonvention zu verwenden. Das Problem, es sieht chaotisch aus, und die Variablennamen werden sehr lang, abhängig davon, wo das Steuerelement in der Seite eingebettet ist.

Macht das Sinn? Es sollte minimale Javascript-Änderung benötigen, damit es funktioniert.

Answer 4

Ich lief in das gleiche Problem und unten Blogpost löste es. Die Lösung ist für JavaScript Object orientiert nehmen

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