javascript - 在 JavaScript 中使用 Razor

Question

当试图在 javascript 中获取 Razor 数据时，有人可以解释我可能的选择吗？我正在尝试向谷歌地图添加标记。

这似乎可行:

@model IEnumerable<ServicesPortal.Models.MapsPartialModel>
@{
    ViewBag.Title = "Home Page";
}

@if (Model != null)
{
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(46.119944, 14.815333),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        addmarker(46.119944, 14.815333);
        // and so on...

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }
    } google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map" style="width:auto; height:500px"></div>
}

虽然这不是:

@model IEnumerable<ServicesPortal.Models.MapsPartialModel>
@{
    ViewBag.Title = "Home Page";
}

@if (Model != null)
{
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(46.119944, 14.815333),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        @foreach (var item in Model)
        {
            <text>
                addMarker(@item.Profile.lat, @item.Profile.lng);
            </text>
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }
    } google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map" style="width:auto; height:500px"></div>
}

编辑:这也不起作用...

@model IEnumerable<ServicesPortal.Models.MapsPartialModel>
@{
    ViewBag.Title = "Home Page";
}

@if (Model != null)
{
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(46.119944, 14.815333),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        @foreach (var item in Model)
        {
            <text>
               addMarker(@Html.Raw(item.Profile.lat), @Html.Raw(item.Profile.lng));
            </text>
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }
    } google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map" style="width:auto; height:500px"></div>
}

编辑: 还尝试了一些变量......没有效果。

@model IEnumerable<ServicesPortal.Models.MapsPartialModel>
@{
    ViewBag.Title = "Home Page";
}

@if (Model != null)
{
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(46.119944, 14.815333),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        // test
        var lat = 46.119944;
        var lng = 14,815333;

        @foreach (var item in Model)
        {
           <text>
              addMarker(@lat, @lng);
           </text>
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }
    } google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map" style="width:auto; height:500px"></div>
}

我试图使用这个解决方案，但我遗漏了一些东西...... Using Razor within JavaScript

Answer 1

您的值包含一个点，Razor 在其亮度方面将其解释为 object.property。尝试使用 Html.Raw():

<text>addMarker(@Html.Raw(item.Profile.lat), @Html.Raw(item.Profile.lng));</text>