Verwenden von Razor in JavaScript

Ist es möglich oder gibt es eine Problemumgehung, um die Razor-Syntax in JavaScript zu verwenden, das sich in einer Ansicht befindet (cshtml )?

Ich versuche, einer Google-Karte Markierungen hinzuzufügen ... Ich habe dies beispielsweise versucht, erhalte jedoch eine Menge Kompilierungsfehler:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>

Verwenden Sie das hier<text> beschriebene Pseudoelement , um den Razor-Compiler wieder in den Inhaltsmodus zu versetzen:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

Aktualisieren:

Scott Guthrie hat kürzlich über die @:Syntax in Razor geschrieben, die etwas weniger klobig ist als das <text>Tag, wenn Sie nur ein oder zwei Zeilen JavaScript-Code hinzufügen müssen. Der folgende Ansatz wäre wahrscheinlich vorzuziehen, da er die Größe des generierten HTML-Codes verringert. (Sie können die Funktion addMarker sogar in eine statische, zwischengespeicherte JavaScript-Datei verschieben, um die Größe weiter zu verringern.)

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

Der obige Code wurde aktualisiert, um den Aufruf addMarkerkorrekter zu gestalten.

Zur Verdeutlichung @:zwingt Razor den Textmodus zurück, obwohl der addMarkerAufruf dem C # -Code sehr ähnlich sieht. Razor greift dann auf die @item.PropertySyntax zurück, um zu sagen, dass der Inhalt dieser Eigenschaften direkt ausgegeben werden soll.

Update 2

Es ist erwähnenswert, dass View-Code wirklich kein guter Ort ist, um JavaScript-Code einzufügen. JavaScript-Code sollte in eine statische .jsDatei eingefügt werden und dann die benötigten Daten entweder aus einem Ajax-Aufruf oder durch Scannen abrufendata- Attributen aus dem HTML- . Dies ermöglicht nicht nur das Zwischenspeichern Ihres JavaScript-Codes, sondern vermeidet auch Probleme mit der Codierung, da Razor für die Codierung von HTML, nicht jedoch von JavaScript ausgelegt ist.

Code anzeigen

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

JavaScript-Code

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Ich habe gerade diese Hilfsfunktion geschrieben. Setzen Sie es ein App_Code/JS.cshtml:

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

In Ihrem Beispiel können Sie dann Folgendes tun:

var title = @JS.Encode(Model.Title);

Beachten Sie, dass ich keine Anführungszeichen darum setze. Wenn der Titel bereits Anführungszeichen enthält, wird er nicht explodieren. Scheint auch gut mit Wörterbüchern und anonymen Objekten umzugehen!

Sie versuchen, einen quadratischen Stift in ein rundes Loch zu stecken.

Razor war als HTML-generierende Vorlagensprache gedacht. Sie können es sehr gut dazu bringen, JavaScript-Code zu generieren, aber es wurde nicht dafür entwickelt.

Zum Beispiel: Was wäre wenn Model.Title ein Apostroph enthalten ist? Das würde Ihren JavaScript-Code beschädigen und Razor wird ihn standardmäßig nicht korrekt umgehen.

Es wäre wahrscheinlich besser, einen String-Generator in einer Hilfsfunktion zu verwenden. Dieser Ansatz wird wahrscheinlich weniger unbeabsichtigte Folgen haben.

Welche spezifischen Fehler sehen Sie?

So etwas könnte besser funktionieren:

<script type="text/javascript">

//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
    </text>
}
</script>

Beachten Sie, dass Sie das magische <text>Tag nach dem benötigen, foreachum anzuzeigen, dass Razor in den Markup-Modus wechseln soll.

Das wird gut funktionieren, solange es sich auf einer CSHTML-Seite und nicht in einer externen JavaScript-Datei befindet.

Die Razor Template Engine kümmert sich nicht um die Ausgabe und unterscheidet nicht zwischen <script> oder anderen Tags.

Sie müssen jedoch Ihre Zeichenfolgen codieren, um XSS- Angriffe zu verhindern .

Ich bevorzuge "<! -" "->" wie ein "Text>"

<script type="text/javascript">
//some javascript here     

@foreach (var item in itens)
{                 
<!--  
   var title = @(item.name)
    ...
-->

</script>

Eine Sache hinzuzufügen - ich fand, dass Razor Syntax Hilighter (und wahrscheinlich der Compiler) die Position der öffnenden Klammer unterschiedlich interpretieren:

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

Ein einfaches und gutes Beispiel:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from the
    // client side.
    //
    // It's an odd workaraound, but it works.
    @{
        var outScript = "var razorUserName = " + "\"" + @User.Identity.Name + "\"";
    }
    @MvcHtmlString.Create(outScript);
</script>

Dadurch wird ein Skript auf Ihrer Seite an der Stelle erstellt, an der Sie den Code platzieren, der wie folgt aussieht:

<script>
    // This gets the username from the Razor engine and puts it
    // in JavaScript to create a variable I can access from
    // client side.
    //
    // It's an odd workaraound, but it works.

    var razorUserName = "daylight";
</script>

Jetzt haben Sie eine globale JavaScript-Variable mit dem Namen, auf razorUserNamedie Sie zugreifen und die Sie auf dem Client verwenden können. Die Razor-Engine hat den Wert offensichtlich aus @User.Identity.Name(serverseitige Variable) extrahiert und in den Code eingefügt, den sie in Ihr Skript-Tag schreibt.

Die folgende Lösung scheint mir genauer zu sein, als JavaScript mit Razor zu kombinieren. Überprüfen Sie dies: https://github.com/brooklynDev/NGon

Sie können ViewBag.Ngon fast alle komplexen Daten hinzufügen und in JavaScript darauf zugreifen

In der Steuerung:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

In JavaScript:

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            var person = ngon.Person;
            var div = $("#output");
            div.html('');
            div.append("FirstName: " + person.FirstName);
            div.append(", LastName: " + person.LastName);
            div.append(", Age: " + person.Age);
        });
    });
</script>

Es erlaubt alle einfachen alten CLR-Objekte (POCOs), die mit der Standardeinstellung serialisiert werden können JavascriptSerializer.

Es gibt auch eine Option mehr als @: und <text></text>.

Mit <script>Block selbst.

Wenn Sie abhängig vom Razor-Code große Teile von JavaScript ausführen müssen, können Sie dies folgendermaßen tun:

@if(Utils.FeatureEnabled("Feature")) {
    <script>
        // If this feature is enabled
    </script>
}

<script>
    // Other JavaScript code
</script>

Vorteile dieser Art sind, dass JavaScript und Razor nicht zu stark gemischt werden, da ein häufiges Mischen letztendlich zu Problemen mit der Lesbarkeit führt. Auch große Textblöcke sind nicht sehr gut lesbar.

Keine der vorherigen Lösungen funktioniert korrekt ... Ich habe alle Möglichkeiten ausprobiert, aber es hat mir nicht das erwartete Ergebnis gebracht ... Endlich habe ich festgestellt, dass der Code einige Fehler enthält ... Und der vollständige Code ist angegeben unten.

<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(23.00, 90.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    @foreach (var item in Model)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

            var infowindow = new google.maps.InfoWindow({
                // content: contentString
            });

            var marker = new google.maps.Marker({
                position: markerlatLng,
                title: title,
                map: map,
                draggable: false,
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(marker.content);
                    infowindow.open(map, marker);
                }
            })(marker));
        </text>
    }
</script>

Ich habe endlich die Lösung gefunden (* .vbhtml):

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}