將數據從 Controller 傳遞到 JavaScript function

Question

我在 controller 中有這個代碼

public async Task<IActionResult> Index()
    {
        HttpResponseMessage responseMessage = await _httpClient.GetAsync(_getDataControlerApiUrl + "/getUserData");
        string stringData = await responseMessage.Content.ReadAsStringAsync();

        var options = new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true
        };

        List<UserNeighborhoodData> data = System.Text.Json.JsonSerializer.Deserialize<List<UserNeighborhoodData>>(stringData, options);

        string aor = data.Where( x => x.Username == User.Identity.Name).FirstOrDefault().AOR;

        ViewBag.UsersData = JsonSerializer.Serialize(data.Where(x => x.AOR == aor).ToList());
        return View();
    }

我想將該列表傳遞給 View 以便在加載時我可以將標記添加到 map

@{
var userData = (List<UserNeighborhoodData>)ViewBag.UsersData;
 }

<div id="map" style="margin:10px; width:70%; height:770px;"></div>

<script>
mapboxgl.accessToken ='MY-KEY';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/outdoors-v11',
    center: [19.6860534, 45.1163156],
    zoom: 7.2
});
map.addControl(new mapboxgl.NavigationControl());

window.onload = function () {
    data = @userData
    var i;
    for (i = 0; i < data.Count; i++)
    {
        var popup = new mapboxgl.Popup({ offset: 25 }).setText(
            "Username:" + data[i].Username + "Energy to grid in this month: " +  data[i].CurrentSoldEnergyInAMonth
        );

        var el = document.createElement('div');
        el.id = 'marker' + i;

        new mapboxgl.Marker(el)
            .setLngLat([data[i].Longitude, data[i].Latitude])
            .setPopup(popup) // sets a popup on this marker
            .addTo(map);
    }
}

但它不起作用，因為我了解到以這種方式傳遞數據是不可能的。 所以我現在是堆棧，不知道如何將數據從 controller 傳遞到 JavaScript 代碼，所以我可以創建標記。

Answer 1

改變你的行動：

public async Task<IActionResult> Index()
    {
           ......
        var model = JsonSerializer.Serialize(data.Where(x => x.AOR == aor).ToList());
        return View(model);
    }

和你的看法：

@model List<UserNeighborhoodData>
....

window.onload = function () {
    
 var data= @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)) };

..... your code