Razor Syntaxe et Javascript

Question

Comme un test je convertir une application preuve de concept que nous avons écrit de Web Forms à Razor, tout simplement pour que nous puissions l'évaluer.

J'ai rencontré un problème à ce jour que de faire ma tête hurt..generating Javascript côté client ...

Web-Forms

<script type="text/javascript">
    var jqGridIdList = "<%: Url.Action ("getidlist", "office", new { area = "reports" }) %>";

    var availableIds = [];
    <% for (var i = 0; i < Model.Data.Count (); i++) { %>
    availableIds.push({ value : "<%: Model.Data.ElementAt (i).Text %>", label : "<%: Model.Data.ElementAt (i).Text %>" });
    <% } %>
</script>

Razor Syntaxe

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
    availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });
    }
</script>

Le compilateur me donne l'erreur suivante sur la ligne 'availableIds.push':

Compiler Message d'erreur: CS1525: terme d'expression non valide '{'

Il est évidemment d'essayer de le compiler comme C # ... mais comment puis-je arrêter?

Merci,
Kieron

Answer 1

Vous devez envelopper dans l'élément pseudo <text>. Cela passe à l'arrière de l'analyseur en mode HTML et il sera alors analyser le javascript dans le cadre du html et non c #. La raison pour laquelle il se trouve est le @for() est un c # bloc et quoi que ce soit traité à l'intérieur est également considéré c # jusqu'à ce qu'il soit échappé par une balise html. Puisque vous ne voulez probablement pas un rasoir de balise html fournit la balise <text> aux modes de commutation.

Si vous remarquez la différence dans votre asp.net webforms vous finissez la ligne <% for avec un %> dont il faut sortir du mode c #. Si vous téléchargez l'extension surligneur de rasoir pour le studio visuel 2010, il vous aidera à voir si le code est traité comme code et html est traité comme html.

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
        <text>availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });</text>
    }
</script>

Mise à jour pour la version plus récente

Vous pouvez maintenant utiliser la syntaxe @: pour une meilleure lisibilité encore plus

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
        @:availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });
    }
</script>