Передача атрибутов модели mvc в javascript

Question

Я использую карту на основе javascript для морских перевозок c, и хотя она отлично работает, мне нужно иметь возможность переходить от net широты и долготы корабля, которые я получаю из их api. У меня уже будут данные в моей модели.

Было бы лучше сделать это компонентом представления. Или как мне этого добиться.

<div class="tab-pane fade" id="custom-tabs-one-map" role="tabpanel" aria-labelledby="custom-tabs-one-map-tab">
<script type="text/javascript">
    width = '100%';     // the width of the embedded map in pixels or percentage
    height = '600';     // the height of the embedded map in pixels or percentage
    border = '1';       // the width of the border around the map (zero means no border)
    shownames = 'false';    // to display ship names on the map (true or false)
    latitude = '37.4460';   // the latitude of the center of the map, in decimal degrees
    longitude = '24.9467';  // the longitude of the center of the map, in decimal degrees
    zoom = '9';     // the zoom level of the map (values between 2 and 17)
    maptype = '1';      // use 0 for Normal Map, 1 for Satellite
    trackvessel = '0';  // MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option
    fleet = '';     // the registered email address of a user-defined fleet (user's default fleet is used)
</script>
<script type="text/javascript" src="//www.marinetraffic.com/js/embed.js"></script>

Моя модель просто

public  class Vessels {

    public int Id { get; set; }
    public string Name { get; set; }
    public string Flag { get; set; }
    public decimal Lat { get; set; }
    public decimal Long { get; set; }
}

Заранее спасибо

Answer 1

В этом примере мы создаем проект mvc для передачи latitude и longitude корабля из controller.

    public IActionResult Index()
    {
        //get values from api, here we just use new Vessel instead
        Vessel vessle = new Vessel {
            Id = 1001,
            Name = "Hope",
            Flag = "",
            Lat = (decimal)37.4460,
            Long = (decimal)24.9467
        };

        return View(vessle);
    }

Вот View. Вы можете получить прямой доступ по адресу @Mode.

@model Vessel

<div class="tab-pane fade" id="custom-tabs-one-map" role="tabpanel" aria-labelledby="custom-tabs-one-map-tab">
    <script type="text/javascript">
    width = '100%';     // the width of the embedded map in pixels or percentage
    height = '600';     // the height of the embedded map in pixels or percentage
    border = '1';       // the width of the border around the map (zero means no border)
    shownames = 'false';    // to display ship names on the map (true or false)
    latitude = @Model.Lat;   // the latitude of the center of the map, in decimal degrees
    longitude = @Model.Long;  // the longitude of the center of the map, in decimal degrees
    zoom = '9';     // the zoom level of the map (values between 2 and 17)
    maptype = '1';      // use 0 for Normal Map, 1 for Satellite
    trackvessel = '0';  // MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option
    fleet = '';     // the registered email address of a user-defined fleet (user's default fleet is used)
    </script>
<script type="text/javascript" src="//www.marinetraffic.com/js/embed.js"></script>

Test

введите описание изображения здесь