将 mvc model 属性传递给 javascript

Question

I am using a javascript based map for marine traffic and while it works great I need to be able to pass from .net the latitude and longitude of a ship which I get from their api. I will have the data in my model already.

Would it be better making this a view component. Or how would I achieve this.

<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>

My Model is just

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; }
}

Thanks in advance

Answer 1

In this example, we build a mvc project to pass the latitude and longitude of a ship from 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);
    }

Here's View . You can directly access by @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