Wie kombiniere ich Razor- und JavaScript-Code nahtlos innerhalb einer Webseite?

Razor und JavaScript in einer Webseite kombinieren

Die Integration von Razor- und JavaScript-Code in dieselbe Webseite kann etwas schwierig sein. Betrachten Sie den folgenden Beispielcode:

<code class="html"><script type="text/javascript">
        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }
</script></code>

Dieser Code versucht, ein JavaScript-Array namens „data“ zu erstellen und es mithilfe einer Razor-foreach-Schleife zu füllen. Es macht jedoch nicht ganz das, was wir beabsichtigt hatten.

Die ideale Lösung:

Unser gewünschtes Ergebnis ist, Code schreiben zu können, der etwa so aussieht:

<code class="html"><script type="text/javascript">
        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>
</script></code>

Dieser Code mischt Razor- und JS-Code nahtlos und ermöglicht es uns, problemlos eine C#-Sammlung zu durchlaufen und unser JavaScript-Array zu füllen.

Die Lösung:

Um dies zu erreichen, können wir einfache Textabschnitte verwenden. Ersetzen Sie das und Tags mit und Tags, etwa so:

<code class="html"><script type="text/javascript">
        var data = [];

        @foreach (var r in Model.rows)
        {
                <text>
                        data.push([ @r.UnixTime * 1000, @r.Value ]);
                </text>
        }
</script></code>

Durch die Verwendung von Nur-Text-Abschnitten können wir beliebigen JS-Code in unseren Skriptblock einbinden und gleichzeitig die Razor-Syntax verwenden, um auf Daten vom Server zuzugreifen. Jetzt sollte sich unser Code wie vorgesehen verhalten und das Datenarray mit Werten aus unserer C#-Sammlung füllen.

Das obige ist der detaillierte Inhalt vonWie kombiniere ich Razor- und JavaScript-Code nahtlos innerhalb einer Webseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!