如何在c#代码中使用javaScript库

本文关键字：javaScript 代码 | 更新日期: 2023-09-27 18:25:51

我正在使用MVC 4 进行我的web项目

我正在尝试访问我的供应商数据，以便在谷歌地图中标记位置。

public ActionResult GoogleMaps()
{
    var dbContext = new VicoProject___NewVersion.DAL.MakeUpContext();
    ViewBag.supliersContext = dbContext.Supplier.ToArray();
    eturn View();
}

上面的代码在我的HomeController 中

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-key">
</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: { lat: 32.071953, lng: 34.787868 },
            zoom: 8
            };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        @Html.Raw(ViewBag.HTTML)
        @foreach (var c in ViewBag.supliersContext)
        {
            var supplierAddress = c.SupplierAddress;
            var suplierName = c.SupplierName;
            var supplierLat = c.SupplierLatitude;
            var supplierLng = c.SupplierLongitude;
            // cant use the google.maps :(:(
            var marker = new google.maps.Marker({
                position: google.maps.LatLng(supplierLat,supplierLng);
                map: map,
                title: suplierName
            });
        }
     }
    window.onload = initialize;
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

上面的代码在我的谷歌地图视图中

我需要一些我的循环如何识别谷歌。maps

感谢

编辑

好的，所以我已经将我的循环更改为JavaScript循环

for (var i = 0 ; i < ViewBag.supliersContext.length ; i++) {
    var supplierAddress = c.SupplierAddress;
    var suplierName = c.SupplierName;
    var supplierLat = c.SupplierLatitude;
    var supplierLng = c.SupplierLongitude;
    var marker = new google.maps.Marker({
        position: google.maps.LatLng(supplierLat, supplierLng),
        map: map,
        title: suplierName,
    })
 }

但仍然没有标记：（

如何在c#代码中使用javaScript库

JavaScript不是服务器端语言，因此您不能在C#上下文中使用它的对象。

根据你的代码，你可以用JavaScript生成字符串，并用从控制器中检索到的值来填充它，就像在@foreach循环中一样：

@(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: {2}    }});", supplierLat, supplierLng, suplierName))

因此，基本上，它将在每次迭代中输出google.maps.Marker个实例，您可以根据使用方式对其进行格式化。

更新：

这是一个有效的例子。

服务器端：

public class Supplier
{
    public string SupplierName { get; set; }
    public decimal SupplierLatitude { get; set; }
    public decimal SupplierLongitude { get; set; }
}
[HttpGet]
public ActionResult Index()
{
    ViewBag.supliersContext = new List<Supplier>()
    {
        new Supplier() { SupplierName = "Test1", SupplierLatitude = 32.071953M, SupplierLongitude = 34.787868M },
        new Supplier() { SupplierName = "Test2", SupplierLatitude = 31.571953M, SupplierLongitude = 34.787868M },
        new Supplier() { SupplierName = "Test3", SupplierLatitude = 31.071953M, SupplierLongitude = 34.787868M },
    };
    return View();
}

客户端：

<html lang="en">        
    <body>
        <div id="map-canvas" style="height: 400px;"></div>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: { lat: 32.071953, lng: 34.787868 },
                    zoom: 8
                };
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                @foreach (var c in ViewBag.supliersContext)
                {
                    var suplierName = c.SupplierName;
                    var supplierLat = c.SupplierLatitude;
                    var supplierLng = c.SupplierLongitude;
                    @Html.Raw(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: '{2}'}});", supplierLat, supplierLng, suplierName))
                }
            }
            window.onload = initialize;
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </body>
</html>

这只是一个测试示例，您不应该立即使用它，因为@Html.Raw在该上下文中揭示了XSS漏洞。

相关文章：