Write JavaScript code in MVC Razor foreach loop

Question

I would like to embed javascript code in razor code. I've tried the following-

   <tbody>
        @foreach (var row in ViewBag.Retailers.Rows) //Retailers is a datatable
        {
            <tr>
                <td>@row["RegionName"].ToString()</td>
            </tr>
            <script>
                  var marker=new Object();
                  marker.lat=@row["Latitude"].ToString();
                  marker.lon=@row["Longitude"].ToString();
                  markersArray.push(marker);
           </script>
        }

   </tbody>

But, it's not working. Any help?

I know this might be silly, but have you tried to remove the ; from the lat and long props? — Rui Silva
– Rui Silva, Commented Dec 15, 2014 at 9:09
Add the values as data-* attributes to the table row in the loop, then use one script at the end to build the array and avoid duplicating this script and rendering unnecessary html. — user3559349
– user3559349, Commented Dec 15, 2014 at 9:22

Vsevolod Goloviznin · Accepted Answer · 2014-12-15 09:09:28Z

3

To mix razor with JavaScript, you need to include razor code in single quotes ' like this:

        <script>
              var marker=new Object();
              marker.lat='@row["Latitude"].ToString()';
              marker.lon='@row["Longitude"].ToString()';
              markersArray.push(marker);
       </script>

answered Dec 15, 2014 at 9:09

Vsevolod Goloviznin

12.4k1 gold badge53 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3559349 · Accepted Answer · 2014-12-15 09:51:05Z

3

I would recommend you avoid generating all these inline scripts and instead add the values as data attributes of the row

<tbody id="retailers">
  @foreach (var row in ViewBag.Retailers.Rows) //Retailers is a datatable
  {
    <tr data-latitude="@row["Latitude"]" data-longitude="@row["Longitude"]">
      <td>@row["RegionName"].ToString()</td>
    </tr>
  }
</tbody>

then have a single script to build your array

var markersArray = [];
$('#retailers tr').each(function() {
  markersArray.push({ lat: $(this).data('latitude'), lon: $(this).data('longitude') });
});

answered Dec 15, 2014 at 9:51

user3559349

Collectives™ on Stack Overflow

Write JavaScript code in MVC Razor foreach loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related