utiliser le rasoir dans javascript

Question

est-il possible ou existe-t-il une solution pour utiliser la syntaxe de rasoir dans javacript qui est dans une vue? (chtml) .. J'essaye d'ajouter des marqueurs à une carte de google ... par exemple j'ai essayé ceci mais j'obtiens une tonne d'erreurs de compilation :

 <script type="text/javascript">

//some javascrpt 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

Utiliser l' <text> pseudo-élément, comme décrit ici, à force de le rasoir compilateur de retour en mode de contenu:

<script type="text/javascript">

//some javascrpt 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 posté sur @: de la syntaxe de Rasoir, ce qui est un peu moins maladroit que l' <text> tag si vous avez juste une ou deux lignes de code javascript à ajouter. L'approche suivante serait probablement préférable, car elle réduit la taille du fichier HTML généré. (Vous pouvez même déplacer le addMarker fonction statique, la mise en cache des fichiers javascript 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>

Mis à jour le code ci-dessus pour faire l'appel à l' addMarker plus correct.

Pour clarifier, l' @: des forces de Rasoir de retour en mode texte, même si addMarker appel ressemble beaucoup à du code C#. Rasoir ramasse alors la @item.Property de la syntaxe-à-dire qu'il devrait directement en sortie le contenu de ces propriétés.

Answer 2

Je viens d'écrire cette fonction d'aide. Mettez-le en App_Code/JS.cshtml :

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

Ensuite, dans votre exemple, vous pouvez faire quelque chose comme ceci:

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

Remarquez comment je ne mets pas de guillemets autour d'elle. Si le titre contient déjà des guillemets, il n'explosera pas. Semble gérer gentiment les dictionnaires et les objets anonymes aussi!

Answer 3

Vous essayez de confiture d'une cheville carrée dans un trou rond.

Rasoir a été conçu comme une génération de Html langage de template. Vous pouvez très bien avoir à générer du Javascript, mais il n'a pas été conçu pour cela.

Par exemple: si Model.Title contient une apostrophe? Que serait briser votre code Javascript, et le Rasoir ne pourrons pas échapper correctement par défaut.

Il serait probablement plus approprié d'utiliser une Chaîne de générateur dans une fonction d'assistance. Il y aura probablement moins de conséquences inattendues de cette approche.

Answer 4

Quelles erreurs spécifiques voyez-vous?

Quelque chose comme ça pourrait mieux fonctionner:

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

Notez que vous avez besoin de la balise magique <text> après le foreach pour indiquer que Razor doit passer en mode markup.

Answer 5

Cela fonctionnera bien, tant que c'est dans une page CSHTML et pas un fichier Javascript externe.

Le moteur de template Razor ne se soucie pas de ce qu'il produit et ne fait pas la différence entre <script> ou d'autres tags.

Cependant, vous devez encoder vos chaînes pour empêcher les attaques XSS.