как передать список объектов из контроллера для просмотра и использования в JavaScript

Question

Вот мой контроллер:

public ActionResult Index()
{
    // marker list is a list of marrker class
    ViewBag.MarkerList = Utility.markerList;
    return View();
}

и вот мой JavaScript:

<script>

        var mymap = L.map('mapid', { doubleClickZoom: false }).setView([35.701060, 51.378075], 11.5);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoiYXJtNG44IiwiYSI6ImNqbml0cnY5dzBtbncza280ZGNlNjZ6b2wifQ.ZZBr5TriuKvyev4Dh8bUpg'
        }).addTo(mymap);

        function myFunction(item) {

            var marker = L.marker([item.lat, item.lng], { riseOnHover: true }).addTo(mymap);
            marker.bindPopup("I am a popup.<br>"+ item.lat + "," + item.lng);
        }

        var array = @ViewBag.MarkerList;

        array.foreach(myFunction);

    </script>

Я хочу использовать foreach в списке в JavaScript, чтобы вызвать в нем мою функцию. Я хочу запустить этот код при загрузке страницы.