Access Model.LocationList in the Model.ForEach LoopRSS

• • Reply
  shijostephen

  Member

  40 Points

  155 Posts

  Access Model.LocationList in the Model.ForEach Loop

  Mar 05, 2020 04:32 AM|shijostephen|LINK

  Hi

  How to access Model.LocationList in the Model.ForEach Loop

  Model.forEach is not working here

          var itemlat=new Array();
          var itemlong=new Array();
          //add markers to map
          @if (Model.LocationList != null)
          {
              foreach (var item in Model.LocationList)
              {
                  @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', @item.LocationId);
  
                  
              }
          }
          
          Model.forEach(function(item) {
  
              itemlat.push(item.Latitude);
              itemlong.push(item.Longitude);
          });

  Thanks & Regards

  Shijo

• • Reply
  Rion William...

  All-Star

  114553 Points

  18503 Posts

  MVP

  Re: Access Model.LocationList in the Model.ForEach Loop

  Mar 05, 2020 05:47 AM|Rion Williams|LINK

  What does your Model look like? Additionally, it's a bit hard to tell if you want to actually access these model values within C# or within Javascript because Javascript isn't going to really be aware of what the model itself looks like unless you explicitly write some code to store it there (which I assume your `addMarker()` function calls do).

  Without knowing a bit more, it's difficult to tell, although it seems like since you have access to your latitude and longitude within your existing foreach call, you'd be able to handle this there.

  Blog | Twitter | Stack Overflow | LinkedIn
• • Reply
  shijostephen

  Member

  40 Points

  155 Posts

  Re: Access Model.LocationList in the Model.ForEach Loop

  Mar 05, 2020 05:56 AM|shijostephen|LINK

  Hi,

  This is the entire code of the index.chtml page

  I am trying to connect all the locations by line in the map, the locations are passed from the controller.

  @model Tasks.Models.LocationLists
  @{
      ViewBag.Title = "Home Page";
  }
  
  <script type='text/javascript'>
      function loadMapScenario() {
          var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
              credentials: 'AscWdC8f-KNLy5v-A0lqOw7xlOpNOCeJ2NqNdTTqT0A64JG7fKNmj8AfNllb8Mar',
              mapTypeId: Microsoft.Maps.MapTypeId.road,
              zoom: 5
          });
  
          // Create the infobox for the pushpin
          var infobox = null;
  
          //declare addMarker function
          function addMarker(latitude, longitude, title, description, pid)
          {
              var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: 'green' });
  
              infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
                  visible : false
              });
  
              marker.metadata = {
                  id: pid,
                  title: title,
                  description: description
              };
  
              Microsoft.Maps.Events.addHandler(marker, 'mouseout', hideInfobox);
              Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfoboxx);
  
              infobox.setMap(map);
              map.entities.push(marker);
              marker.setOptions({ enableHoverStyle: true });
          };
  
          function showInfoboxx(e) {
              if (e.target.metadata) {
                  infobox.setOptions({
                      location: e.target.getLocation(),
                      title: e.target.metadata.title,
                      description: e.target.metadata.description,
                      visible: true
                  });
              }
          }
  
          function hideInfobox(e) {
              infobox.setOptions({ visible: false });
          }
  
          var itemlat=new Array();
          var itemlong=new Array();
          //add markers to map
          @if (Model.LocationList != null)
          {
              foreach (var item in Model.LocationList)
              {
                  @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', @item.LocationId);
  
                  
              }
          }
          
          Model.forEach(function(item) {
  
              itemlat.push(item.Latitude);
              itemlong.push(item.Longitude);
          });
  
          for (i = 0; i < 5; i++) {
              var loc= new Microsoft.Maps.Location(itemlat[i], itemlong[i]);
          }
  
          var loc1 = new Microsoft.Maps.Location(Model.LocationList.ElementAtOrDefault(0).Latitude, Model.LocationList.ElementAtOrDefault(0).Longitude);
          var loc2 = new Microsoft.Maps.Location(Model.LocationList.ElementAtOrDefault(1).Latitude,  Model.LocationList.ElementAtOrDefault(1).Longitude);
          var loc3 = new Microsoft.Maps.Location(Model.LocationList.ElementAtOrDefault(2).Latitude,  Model.LocationList.ElementAtOrDefault(2).Longitude);
  
          // Add a pin to the map
          var pin1 = new Microsoft.Maps.Pushpin(loc1);
          var pin2 = new Microsoft.Maps.Pushpin(loc2);
          var pin3 = new Microsoft.Maps.Pushpin(loc3);
  
          // Create a polyline
          var lineVertices = new Array(loc1, loc2, loc3);
          var line = new Microsoft.Maps.Polyline(lineVertices);
  
          map.setView({center:loc2, zoom: 9} );
  
          map.entities.push(line);
          map.entities.push(pin1);
          map.entities.push(pin2);
          map.entities.push(pin3);
      }
  </script>
  <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
  
  <div class="row">
      <table >
          <tr >
              <td  width="100px" height="100px" ></td>
              <td>
  
              </td>
          </tr>
          <tr>
              <td>
  
              </td>
              <td>
                  <div class="col-md-12 map">
                      <div id="myMap" style="width:100%; width:500px;height:500px;"></div>
                  </div>
              </td>
          </tr>
      </table>
  
  
  </div>

  Thanks & Regards

  Shijo

• • Reply
  jiadongm

  Participant

  1170 Points

  442 Posts

  Re: Access Model.LocationList in the Model.ForEach Loop

  Mar 05, 2020 07:44 AM|jiadongm|LINK

  Hi shijostephen,

  @model Tasks.Models.LocationLists

  The Model in your page view is a single type, while the forEach() method calls a function once for each element in an array. So, maybe you can show us your model.

  Best Regards,

  Jiadong Meng

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com
• • Reply
  bruce (sqlwo...

  All-Star

  55564 Points

  14286 Posts

  Re: Access Model.LocationList in the Model.ForEach Loop

  Mar 05, 2020 04:09 PM|bruce (sqlwork.com)|LINK

  in the code:

       Model.forEach(function(item) {
  
              itemlat.push(item.Latitude);
              itemlong.push(item.Longitude);
          });

  you are referencing Model as a javascript variable, but it is never defined. Also you are mine C# and javascript. you shod just serialize the Model to javascript variable, and do the code in javascript instead of mixing:

       var model = @(JsonConvert.SerializeObject(Model)); // serialize MVC model to json string and assign to javascript variable

  bruce (sqlwork.com)