Utilisez le <text>
pseudo-élément, comme décrit ici , pour forcer le compilateur Razor à revenir en mode contenu:
<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>
Mise à jour:
Scott Guthrie a récemment publié un article sur la @:
syntaxe dans Razor, qui est légèrement moins maladroite que la <text>
balise si vous n'avez qu'une ou deux lignes de code JavaScript à ajouter. L'approche suivante serait probablement préférable, car elle réduit la taille du code HTML généré. (Vous pouvez même déplacer la fonction addMarker vers un fichier JavaScript statique et mis en cache pour réduire davantage la taille):
<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>
Mise à jour du code ci-dessus pour rendre l'appel addMarker
plus correct.
Pour clarifier, le @:
Razor force à revenir en mode texte, même si l' addMarker
appel ressemble beaucoup au code C #. Razor récupère ensuite la @item.Property
syntaxe pour dire qu'il doit sortir directement le contenu de ces propriétés.
Update 2
Il convient de noter que le code View n'est vraiment pas un bon endroit pour mettre du code JavaScript. Le code JavaScript doit être placé dans un .js
fichier statique , puis il doit obtenir les données dont il a besoin soit à partir d'un appel Ajax ou en scannant les data-
attributs à partir du HTML. En plus de permettre de mettre en cache votre code JavaScript, cela évite également les problèmes d'encodage, car Razor est conçu pour encoder en HTML, mais pas en JavaScript.
Afficher le code
@foreach(var item in Model)
{
<div data-marker="@Json.Encode(item)"></div>
}
Code JavaScript
$('[data-marker]').each(function() {
var markerData = $(this).data('marker');
addMarker(markerData.Latitude, markerData.Longitude,
markerData.Description, markerData.Title);
});
@:
syntaxe.