Verhindern mehrere JavaScript-Skripten in Asp.Net Kern ViewComponents

Question

Zum Beispiel Laden, ich habe diese PrimitiveViewComponent:

<button type="button" onClick="sayHello"></button> 
<script> 
    function sayHello() { 
     console.log("Hello") 
    } 
</script> 

Wenn ich sie mehr als einmal aufrufen, wie folgt aus:

<div>@await Component.InvokeAsync("Primitive")</div> 
<div>@await Component.InvokeAsync("Primitive")</div> 
<div>@await Component.InvokeAsync("Primitive")</div> 

es wäre eine Mehrdeutigkeit, weil die Funktion sayHello dreimal enthalten wäre, was nicht notwendig ist.

Wie sollte ich JavaScript-Funktionen für ViewComponents definieren, wie kann ich verhindern, dass sie mehr als einmal enthalten sind und wo sie gespeichert werden?

Answer 1

Ich glaube nicht, dass es auf der Serverseite eine Möglichkeit gibt, dieses Problem zu beheben. Aber mit Javascript und JQuery können Sie dieses Problem beheben.

In diesem Code habe ich das Skript in eine Datei scripts.js unter js-Ordner in wwwroot verschoben. Beim Laden der Seite überprüfe ich, ob das SayHello eine Funktion oder nicht definiert ist, wenn es eine Funktion ist, bedeutet es, dass es auf die Seite geladen wird, wenn es nicht definiert ist, lade ich das Skript mit der JQuery-Methode getscript.

Hier ist der Code der View-Komponente.

<button type="button" onClick="sayHello()">Hello</button> 
<script> 
    if (typeof sayHello !== 'function') { 
     $.getScript("/js/scripts.js").done(function(script, textStatus) { 
      console.log(textStatus); 
     }); 
    } 
</script> 

Hoffe, dass es

Answer 2

Ich denke, hilft Ihnen, eine Eigenschaft definieren sollte wie ScriptIncluded, ob das Skript in das Modell aufgenommen, um anzugeben, und in Server-Seite die Eigenschaft Status aufrecht zu erhalten; Überprüfen Sie die ScriptIncluded Eigenschaft, ob wahr jedes Mal, wenn invoke die Komponente wie folgt aus:

<button type="button" onClick="sayHello"></button> 
@if(model.ScriptIncluded){ 
    <script> 
     function sayHello(){ 
     } 
    </script> 
} 

In Ihrer Komponente Klassendefinition, sollten Sie die model.ScriptIncluded = True; gesetzt, wenn die Komponente nicht zum ersten Mal aufgerufen wird. Sie können einen Bool-Wert in HttpContext.Items behalten.