Verwendung von Razor in JavaScript

Question

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

Ich versuche, Marker zu einer Google-Karte hinzuzufügen... Zum Beispiel habe ich dies versucht, aber ich bekomme 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>

Answer 1

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

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

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

</script>

Answer 2

Ich habe festgestellt, dass Razor Syntax Hilighter (und wahrscheinlich auch 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>

Answer 3

Ein einfaches und gutes, geradliniges 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 auf Ihrer Seite an der Stelle, an der Sie den obigen Code platzieren, ein Skript erstellt, das wie das folgende 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 namens razorUserName auf die Sie auf dem Client zugreifen und sie verwenden können. Die Razor-Engine hat offensichtlich den Wert von @User.Identity.Name (Server-seitige Variable) und fügen Sie sie in den Code ein, den es in Ihr Skript-Tag schreibt.

Answer 4

Die folgende Lösung scheint mir präziser zu sein als die Kombination von JavaScript mit Razor. Schauen Sie sich das an: https://github.com/brooklynDev/NGon

Sie können fast alle komplexen Daten in ViewBag.Ngon und greifen Sie auf sie zu in ジャバスクリプト

Im Controller:

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 jedem einfache alte CLR-Objekte (POCOs), die mit dem Standardprogramm JavascriptSerializer .

Answer 5

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

Verwendung von <script> Block selbst.

Wenn Sie große Mengen an JavaScript-Code benötigen, der von Razor-Code abhängt, können Sie dies wie folgt tun:

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

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

Der Vorteil dieser Methode besteht darin, dass JavaScript und Razor nicht zu sehr vermischt werden, da eine zu starke Vermischung zu Problemen mit der Lesbarkeit führt. Außerdem sind große Textblöcke auch nicht sehr lesbar.