從剃刀視圖中的foreach循環獲取項目值到js數組

我試圖使用數據我從剃刀視圖中的模型中獲取到js中的數組以便在Google地圖上顯示多個標記。我迄今爲止傳遞的數據爲innerHtml，而地圖我無法顯示任何標記。從剃刀視圖中的foreach循環獲取項目值到js數組

@foreach (var item in Model.UpcomingLectureGigs) 
{ 
    <div class="well"> 
     <h1>blabla</h1> 
     @*Parm*@ 
     <span class="js-latmaps">@item.Latitude </span>@*DataOk*@ 
     <span class="js-lngmaps">@item.Longitude </span>@*DataOk*@ 
     <span class="js-name">@item.Venue</span>@*DataOk*@ 

    </div> 
} 

<hr /> 

<div class="well"> 
    <div id="dvMap" style="width: 500px; height: 500px"> 
    </div> 
</div> 
@section scripts { 

    <script type="text/javascript"> 
     var markers = [ 
        { 
         "lat": $(".js-latmaps"), 
         "lng": $('.js-lngmaps'), 
         "description": $('.js-name') 
         //"lat":37.777698,// Ok 
         // "lng":-100.0227294,//Ok 
         //"description":"myShop"//Ok 
        } 
     ]; 
     console.log(markers); 
     window.onload = function() { 
      var mapOptions = { 
       center: new window.google.maps.LatLng(markers[0].lat, markers[0].lng), 
       zoom: 10, 
       mapTypeId: window.google.maps.MapTypeId.ROADMAP 
      }; 
      var infoWindow = new window.google.maps.InfoWindow(); 
      var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions); 
      for (var i = 0; i < markers.length; i++) { 
       var data = markers[i]; 
       var myLatlng = new window.google.maps.LatLng(data.lat, data.lng); 
       var marker = new window.google.maps.Marker({ 
        position: myLatlng, 
        get map() { return map; } 
       }); 
       (function (marker, data) { 
        window.google.maps.event.addListener(marker, "click", function (e) { 
         infoWindow.setContent(data.description); 
         infoWindow.open(map, marker); 
        }); 
       })(marker, data); 
      } 
     }; 
    </script>

cotroller

public ActionResult Index(string query = null) 
    { 
     //ToDo refactor 
     int myDayOfWeek = 0; 
     DateTime dt = DateTime.Today; 
     myDayOfWeek = (int) dt.DayOfWeek; 


     var upCommingLecture = _context.LectureGigs 
      .Include(g => g.Artist).Include(g => g.Genre) 
      .Where(g => (g.DateTime < DateTime.Now && !g.IsCanceled 
         || (g.IsWeekLy == true 
          && (int) g.Days == (myDayOfWeek)))); 

     if (!string.IsNullOrWhiteSpace(query)) 
     { 
      upCommingLecture = upCommingLecture 
       .Where(g => 
        g.Artist.Name.Contains(query) || 
        g.Genre.Name.Contains(query) || 
        g.Venue.Contains(query) || 
        g.NewRabiName.Contains(query)); 
     } 
     var viewModel = new GigsViewModel 
     { 
      UpcomingLectureGigs = upCommingLecture, 
      //parm 
      SearchTerm = query, 
     }; 

     return View("index", viewModel); 
    }

來源

2016-11-06 Assaf Our

使用'VAR標記= @ Html.Raw（Json.Encode（Model.UpcomingLectureGigs））'（注意你的模特屬性需要命名爲您'UpcomingLectureGigs'財產轉換爲JavaScript數組''lat'，'lng'和'description'，如果你想以'var markers = ...'顯示的相同格式） –

@StephenMuecke原諒我的無知，但是我怎麼能在假設之後從var數據中提取屬性你的意思是在剃刀上這麼做？ –

與您現在所做的一樣 - 只是遍歷數組並訪問數組中每個對象的屬性 –

您的代碼拉緯度和經度正在推動jQuery對象，而不是我想你得可能做一些格式。

var arrLat = []; 

$(".j-latmaps").each(function() { 
    var lat = $(this).html(); 
    arrLat.push(lat); 
});

並對經度做同樣的處理，然後傳遞數組。該中心將是：

center: new window.google.maps.LatLng(arrLat[0], arrLng[0]),

來源

2016-11-06 11:44:01

使用此2在標記>處獲得錯誤：for（var i = 0; i

從剃刀視圖中的foreach循環獲取項目值到js數組

回答

相關問題