SORU
4 Ocak 2011, Salı


javascript içinde kullanarak jilet

mümkün ya da görünümde olduğunu javacript içinde razor sözdizimini kullanmak için bir çözüm var mı?( * ) bir google işaretçileri eklemek için çalışıyorum.. göster...e.g bu ama ben derleme hataları: bir ton almaya çalıştım

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

CEVAP
4 Ocak 2011, Salı


here, jilet derleyici içerik moduna geri zorlamak için açıklandığı gibi <text> pseudo-element, kullanın

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

Güncelleme:

@: hakkında Scott Guthrie recently posted eğer sadece eklemek için javascript kodu bir veya iki satır <text> etikete göre biraz daha az hantal olan Razor sözdizimi,. Aşağıdaki yaklaşım muhtemelen oluşturulan HTML boyutunu azaltır, çünkü daha iyi olur. (Daha da küçültmek) için statik, önbelleğe alınmış bir javascript dosyası addMarker işlevi taşınabilirsin:

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

Yukarıdaki kod addMarker çağrı daha doğru yapmak için güncellendi.

addMarker Ara C çok benziyor olsa da, @: kuvvetler Jilet geri metin moduna açıklamak# kodu. Razor daha sonra bu özellikleri içeriğini çıkışı gerektiğini doğrudan söylemek @item.Property sözdizimi alır.

Güncelleme 2

Görünüm kodu gerçekten çok iyi bir yer olmadığını belirtmekte fayda JavaScript koymak için. JavaScript ** 15 statik bir dosya içinde yer almalı ve sonra da HTML data- öznitelikleri tarayarak bir AJAX çağrısından veya gerekli veri almak gerekir. Senin javascript önbelleğe mümkün kılmanın yanında, bu da Razor HTML, ama JavaScript için kodlamak için tasarlanmıştır beri kodlama ile ilgili sorunları önler.

Görünüm Kodu

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

Javascript kodu

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Autodesk 3ds Max Learning Channel

    Autodesk 3ds

    23 HAZİRAN 2010
  • Hot For Nutrition

    Hot For Nutr

    26 ŞUBAT 2007
  • K-391

    K-391

    23 EKİM 2012