将 mvc 模型属性传递给 javascript答案

【问题标题】：Passing mvc model attributes to javascript将 mvc 模型属性传递给 javascript
【发布时间】：2020-11-02 23:25:58
【问题描述】：

我正在使用基于 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; }
}

提前致谢

【问题讨论】：

var model = @Html.Raw(Json.Encode(Model));
Sweet 就在 javascript 中，我将可以访问它，我将如何调整 javasript 以从属性中工作，然后扩展答案会很棒@LDS
var jmodel = JSON.parse(model); // 将给出 json

标签： javascript c# asp.net-core

【解决方案1】：

在本例中，我们构建了一个mvc 项目来传递来自controller 的船的latitude 和longitude。

    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>

测试

【讨论】：

谢谢，至少我不能在一个很棒的视图组件中做到这一点。