Usando Razor dentro de JavaScript

Utilice el <text>pseudoelemento, como se describe aquí , para forzar que el compilador Razor vuelva al modo de contenido:

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

Actualizar:

Scott Guthrie publicó recientemente sobre @:la sintaxis en Razor, que es un poco menos complicada que la <text>etiqueta si solo tiene una o dos líneas de código JavaScript para agregar. Probablemente sería preferible el siguiente enfoque, porque reduce el tamaño del HTML generado. (Incluso podría mover la función addMarker a un archivo JavaScript estático en caché para reducir aún más el tamaño):

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

Se actualizó el código anterior para que la llamada sea addMarkermás correcta.

Para aclarar, @:obliga a Razor a volver al modo de texto, aunque addMarkerla llamada se parece mucho al código C#. Luego, Razor retoma la @item.Propertysintaxis para decir que debería generar directamente el contenido de esas propiedades.

Actualización 2

Vale la pena señalar que Ver código realmente no es un buen lugar para colocar código JavaScript. El código JavaScript debe colocarse en un .jsarchivo estático y luego debe obtener los datos que necesita, ya sea a partir de una llamada Ajax o escaneando data-atributos del HTML. Además de permitir almacenar en caché su código JavaScript, esto también evita problemas con la codificación, ya que Razor está diseñado para codificar HTML, pero no JavaScript.

Ver código

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

código javascript

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

Jan 04 '2011 23:01 StriplingWarrior