Razor-Syntax und Javascript

Question

Als Test Ich bin ein Proof-of-Concept-App konvertieren wir von Web Forms zu Razor geschrieben haben, einfach so können wir es bewerten.

Ich habe bisher in ein Problem laufen, dass die Herstellung von meinem Kopf hurt..generating clientseitige Javascript ...

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 Syntax

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

Der Compiler gibt mir die folgende Fehlermeldung auf dem 'availableIds.push' Zeile:

Compiler-Fehlermeldung: CS1525: Ungültige Ausdruck Begriff '{'

Es ist offensichtlich versucht, es als C # zu kompilieren ... aber wie ich sie stoppen?

Danke,
Kieron

Answer 1

Sie müssen es in dem Pseudo-Elemente <text> wickeln. Dadurch wird der Parser zurück zu HTML-Modus wechseln, und es wird die JavaScript als Teil des HTML und nicht c # dann analysieren. Der Grund ist es passiert, ist die @for() ein c # Block ist und alles behandelt innerhalb ist auch c # betrachtet, bis sie von einem HTML-Tag entkommen ist. Da Sie wahrscheinlich zu Schaltermodi nicht ein HTML-Tag Rasierer wollen bietet den <text>-Tag.

Wenn Sie den Unterschied in Ihrem asp.net Webforms bemerkt beenden Sie die <% for Linie mit einem %>, die es braucht, von c # Modus aus. Wenn Sie den Rasierer Highlighter Erweiterung für Visual Studio 2010 Download wird es Ihnen helfen zu sehen, wenn der Code als Code behandelt und HTML als HTML behandelt.

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

Update für neueste Version

Sie können nun die @: Syntax für noch mehr Lesbarkeit verwenden

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