Use o <text>
pseudo-elemento, conforme descrito aqui , para forçar o compilador Razor de volta ao modo de conteúdo:
<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>
Atualizar:
Scott Guthrie postou recentemente sobre a @:
sintaxe no Razor, que é um pouco menos desajeitada que a <text>
tag, se você tiver apenas uma ou duas linhas de código JavaScript para adicionar. A abordagem a seguir provavelmente seria preferível, porque reduz o tamanho do HTML gerado. (Você pode até mover a função addMarker para um arquivo JavaScript estático em cache para reduzir ainda mais o tamanho):
<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>
Atualizado o código acima para tornar a chamada addMarker
mais correta.
Para esclarecer, as @:
forças Razor voltam ao modo de texto, mesmo que a addMarker
chamada pareça muito com o código C #. O Razor pega a @item.Property
sintaxe para dizer que deve exibir diretamente o conteúdo dessas propriedades.
Atualização 2
Vale a pena notar que o código View realmente não é um bom lugar para colocar código JavaScript. O código JavaScript deve ser colocado em um .js
arquivo estático e, em seguida, ele deve obter os dados necessários a partir de uma chamada Ajax ou varrendo data-
atributos do HTML. Além de tornar possível o cache do seu código JavaScript, isso também evita problemas com a codificação, já que o Razor foi projetado para codificar para HTML, mas não para 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);
});
@:
sintaxe.