Comment intégrer de manière transparente le code Razor et JavaScript pour une fonctionnalité dynamique ?

Mélanger Razor et le code JavaScript

Lorsque vous travaillez avec des vues Razor, il est souvent nécessaire d'intégrer du code JavaScript pour une fonctionnalité dynamique. Cependant, un défi courant consiste à mélanger efficacement le code Razor et JavaScript.

Exemple de code

Considérez l'extrait de code suivant :

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

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

Dans cet exemple, l'objectif est de générer dynamiquement des données JavaScript à partir du modèle C#. Cependant, ce code peut ne pas fonctionner comme prévu en raison de la façon dont Razor interprète les blocs de code.

Solution : Utiliser

Pour y parvenir, nous pouvons utiliser l'option élément dans les blocs de code Razor :

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

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

L'élément L'élément nous permet d'inclure du code JavaScript littéral dans un bloc Razor. De cette façon, le code JavaScript est traité comme du texte et n'est pas exécuté par Razor.

Lorsque ce code est rendu, il générera le JavaScript suivant :

<code class="javascript">var data = [];

data.push([ @r.UnixTime * 1000, @r.Value ]);
data.push([ @r.UnixTime * 1000, @r.Value ]);
...</code>

Cette solution mélange efficacement Razor et Code JavaScript, vous permettant de générer des données JavaScript dynamiques à partir de votre modèle C#.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!