Mélanger le code Razor et Javascript

172

Je suis assez confus avec comment mélanger le rasoir et js. C'est la fonction actuelle avec laquelle je suis coincé:

<script type="text/javascript">

        var data = [];

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

Si je pouvais déclarer du code c # avec <c#></c#>et que tout le reste était du code JS - ce serait ce que je veux:

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

Quelle est la meilleure méthode pour y parvenir?

c# javascript razor

— Kyle Brandt
source

2

Apparemment, la coloration syntaxique est agréable et confondue avec mes <c#>balises également :-P

— Kyle Brandt

1

Avez-vous vérifié la sortie HTML de cette vue? À quoi cela ressemble-t-il et en quoi voulez-vous qu'il diffère?

— sukru

Lance une erreur à propos de Conditional Compilation je ne peux pas voir le HTML - donc je pense que cela fait partie du code C #.

— Kyle Brandt

1

Cela ressemble à une erreur JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Quel est le message d'erreur exact et où l'obtenir?

— sukru

2

Je pense que c'est un cas où essayer de mélanger JS et C # si étroitement serait une douleur à lire / maintenir. Je suis content que le compilateur vous ait interdit d'accéder à ce code. :)

— Jim Bolla

333

Utilisez <text>:

<script type="text/javascript">

   var data = [];

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

— Max Toro
source

27

Razor fonctionne bien dans les blocs Javascript lorsqu'il est exécuté, mais je déteste la façon dont la coloration syntaxique devient confuse. Il met en évidence tout le code Razor en tant que syntaxe invalide car il est bloqué en mode Javascript, je crois.

— Chev

2

et si ce code est dans un bundle ?? puis-je écrire du code dans un fichier javascript ??

— ncubica

2

Fonctionne parfaitement jusqu'à ce que vous vouliez vérifier si une variable est inférieure à une autre et le rasoir devient psychopathe!

— cbp

1

@ncubica si vous voulez un rasoir en paquet, que quelque chose ne va pas dans votre concept. Razor est pour les vues, pas javascript.

— 100r

1

@ncubica Ce message est ancien, mais la solution à votre question est: Ecrire une fonction dans un fichier JS, la rendre avec Scripts.Render, puis appeler la fonction dans une <script>balise. Pas vraiment gracieux, mais cela fonctionne pour la plupart des cas d'utilisation (lire: simples).

— Sinjai

81

À l'intérieur d'un bloc de code (par exemple @foreach), vous devez marquer le balisage (ou, dans ce cas, Javascript) avec @:ou la <text>balise .

Dans les contextes de balisage, vous devez entourer le code avec des blocs de code (@{ ... } ou @if, ...)

— SLaks
source

Pourquoi dites-vous "marquer le balisage", ce ne serait pas un problème si le contenu était, en fait, du balisage.

— Max Toro

1

@Max: Même si cela ne ressemble pas à du balisage, c'est du balisage. (Par opposition au code côté serveur)

— SLaks

@:c'est ce que je cherchais, super!

— Muflix

54

vous pouvez également utiliser simplement

<script type="text/javascript">

   var data = [];

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

note @:

— Medet Tleukabiluly
source

12

Ne mélangez jamais plus de langues.

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

En cas de problème, vous pouvez également essayer

@Html.Raw(Json.Encode(Model));

— Mertuarez
source

C'est formidable, mais il existe également des cas légitimes où nous devons nous mélanger. Mais c'est la solution que j'ai utilisée car elle s'adapte parfaitement.

— frostymarvelous

3

Notez que c'est un mélange de langues. Vous avez une instruction moitié-JavaScript ("var data =") et moitié-Razor / C # ("@ Json.Encode (Model)"). C'est juste un mixage moins invasif, mais ce n'est pas moins un mixage que d'avoir un Razor / C # "foreach" dont le corps émet du JavaScript généré. :-)

— Jonathan Gilbert

3

Il revient Uncaught SyntaxError: Unexpected token &parce que le modèle devient quelque chose comme ça[{"Id":1,"Name":"Name}]

— Weihui Guo

1

Une méthode non conventionnelle pour séparer javascript de la vue, tout en utilisant un rasoir, consiste à créer un Scripts.cshtml fichier et à y placer votre javascript / rasoir mixte.

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>

— Joël Wiklund
source

0

vous pouvez utiliser la <text>balise pour le code cshtml avec javascript

— Surendra Kumar Laggisetty
source

La balise "<text>" ne

— contient pas

utilisez des backticks ou ctrl + k après avoir sélectionné le code pour le formater

— Suraj Rao

-1

Enveloppez votre code Razor dans @ {} lorsque vous êtes dans le script JS et soyez conscient de n'utiliser que @ Parfois, cela ne fonctionne pas:

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

Cela produira

function hideSurveyReminder() {
       False = true;
    }

dans le navigateur = (

— spine4iller
source