Korzystanie z Razor w JavaScript

Czy jest to możliwe, czy istnieje obejście polegające na korzystaniu ze składni Razor w JavaScript, który jest w view ( cshtml)?

Próbuję dodać znaczniki do mapy Google ... Na przykład próbowałem tego, ale otrzymuję mnóstwo błędów kompilacji:

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

Użyj <text>pseudoelementu, jak opisano tutaj , aby zmusić kompilator Razor z powrotem do trybu zawartości:

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

Aktualizacja:

Scott Guthrie niedawno napisał o @:składni w Razor, która jest nieco mniej niezręczna niż <text>tag, jeśli masz tylko jeden lub dwa wiersze kodu JavaScript do dodania. Preferowane byłoby prawdopodobnie następujące podejście, ponieważ zmniejsza ono rozmiar generowanego HTML. (Możesz nawet przenieść funkcję addMarker do statycznego, buforowanego pliku JavaScript, aby dodatkowo zmniejszyć rozmiar):

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

Zaktualizowałem powyższy kod, aby poprawić addMarkerpoprawność połączenia.

Aby to wyjaśnić, @:zmusza Razor z powrotem do trybu tekstowego, mimo że addMarkerwywołanie przypomina kod C #. Razor pobiera następnie @item.Propertyskładnię, aby powiedzieć, że powinna bezpośrednio wypisywać zawartość tych właściwości.

Aktualizacja 2

Warto zauważyć, że kod View naprawdę nie jest dobrym miejscem do umieszczenia kodu JavaScript. Kod JavaScript powinien zostać umieszczony w .jspliku statycznym , a następnie powinien uzyskać potrzebne dane albo z wywołania Ajax, albo poprzez skanowanie data-atrybutów z HTML. Oprócz umożliwienia buforowania kodu JavaScript, pozwala to również uniknąć problemów z kodowaniem, ponieważ Razor został zaprojektowany do kodowania HTML, ale nie JavaScript.

Wyświetl kod

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

Kod JavaScript

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

Właśnie napisałem tę funkcję pomocnika. Wstaw to App_Code/JS.cshtml:

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

Następnie w swoim przykładzie możesz zrobić coś takiego:

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

Zauważ, że nie umieszczam wokół niego cudzysłowów. Jeśli tytuł zawiera już cytaty, nie wybuchnie. Wydaje się też ładnie obsługiwać słowniki i anonimowe obiekty!

Próbujesz wbić kwadratowy kołek w okrągły otwór.

Razor został zaprojektowany jako język szablonów do generowania HTML. Możesz bardzo dobrze wygenerować kod JavaScript, ale nie został do tego przeznaczony.

Na przykład: co jeśli Model.Titlezawiera apostrof? Spowodowałoby to uszkodzenie twojego kodu JavaScript, a Razor domyślnie nie uniknie go poprawnie.

Prawdopodobnie bardziej odpowiednie byłoby użycie generatora String w funkcji pomocniczej. Prawdopodobnie będzie mniej niezamierzonych konsekwencji takiego podejścia.

Jakie konkretne błędy widzisz?

Coś takiego może działać lepiej:

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

Zauważ, że potrzebujesz magicznego <text>znacznika po, foreachaby wskazać, że Razor powinien przełączyć się w tryb znaczników.

Będzie to działać dobrze, o ile znajduje się na stronie CSHTML, a nie w zewnętrznym pliku JavaScript.

Silnik szablonów Razor nie dba o to, co wyprowadza i nie rozróżnia między <script>innymi tagami.

Musisz jednak zakodować swoje łańcuchy, aby zapobiec atakom XSS .

Wolę „<! -” ”->” jak „tekst>”

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

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

</script>

Jedną rzecz do dodania - odkryłem, że hilighter składni Razor (i prawdopodobnie kompilator) interpretuje położenie nawiasu otwierającego inaczej:

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

Prosty i dobry prosty przykład:

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

Spowoduje to utworzenie skryptu na stronie w miejscu, w którym umieścisz kod, który wygląda następująco:

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

Teraz masz globalną zmienną JavaScript o nazwie, do razorUserNamektórej możesz uzyskać dostęp i używać na kliencie. Silnik Razor oczywiście wyodrębnił wartość @User.Identity.Name(zmienna po stronie serwera) i umieścił ją w kodzie, który zapisuje w skrypcie.

Poniższe rozwiązanie wydaje mi się bardziej dokładne niż połączenie JavaScript z Razor. Sprawdź to: https://github.com/brooklynDev/NGon

Możesz dodać prawie wszystkie złożone dane do ViewBag.Ngon i uzyskać do nich dostęp w JavaScript

W kontrolerze:

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

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

Umożliwia dowolne stare zwykłe obiekty CLR (POCO), które mogą być serializowane przy użyciu domyślnych JavascriptSerializer.

Jest też jeszcze jedna opcja niż @: i <text></text>.

Używanie <script>samego bloku.

Jeśli potrzebujesz zrobić dużą część kodu JavaScript w zależności od kodu Razor, możesz to zrobić w następujący sposób:

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

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

Zaletą tego sposobu jest to, że nie miesza zbyt mocno JavaScript i Razor, ponieważ ich mieszanie spowoduje problemy z czytelnością. Również duże bloki tekstowe nie są zbyt czytelne.

Żadne z poprzednich rozwiązań nie działa poprawnie ... Próbowałem wszystkich sposobów, ale nie dało to oczekiwanego rezultatu ... W końcu odkryłem, że są pewne błędy w kodzie ... I podano pełny kod poniżej.

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

W końcu znalazłem rozwiązanie (* .vbhtml):

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

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