javascript - 将 mvc 模型属性传递给 javascript

Question

我正在使用基于 javascript 的海上交通地图，虽然效果很好，但我需要能够从 .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; }
}

提前致谢

标签： javascriptc#asp.net-core

Answer 1

在这个例子中，我们构建了一个mvc项目来传递来自.latitudelongitudecontroller

    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>

测试