Comment combiner de manière transparente le code Razor et le code JavaScript dans une page Web ?

Combiner Razor et JavaScript dans une page Web

Incorporer à la fois le code Razor et JavaScript dans la même page Web peut être un peu délicat. Considérez l'exemple de code suivant :

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

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

Ce code tente de créer un tableau JavaScript appelé data et de le remplir à l'aide d'une boucle Razor foreach. Cependant, cela ne fait pas tout à fait ce que nous souhaitions.

La solution idéale :

Le résultat souhaité est d'être capable d'écrire du code qui ressemble à ceci :

<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>

Ce code mélange parfaitement le code Razor et le code JS, nous permettant de parcourir facilement une collection C# et de remplir notre tableau JavaScript.

La solution :

Pour y parvenir, nous pouvons utiliser des sections texte brut. Remplacez le et balises avec et balises, comme ceci :

<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>

L'utilisation de sections de texte brut nous permet d'inclure du code JS arbitraire dans notre bloc de script, tout en utilisant la syntaxe de Razor pour accéder aux données du serveur. Maintenant, notre code devrait se comporter comme prévu, en remplissant le tableau de données avec les valeurs de notre collection 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!