为什么不在ASP.NET MVC中执行内嵌JavaScript代码？

这是我的完整视图：为什么不在ASP.NET MVC中执行内嵌JavaScript代码？

@{ 
    ViewBag.Title = "Home"; 
} 

<div style="width:100%; height:100%" id="map"></div> 
<script defer="defer" type="text/javascript"> 
    var map = new OpenLayers.Map('map'); 
    var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); 
    map.addLayer(wms); 
    map.zoomToMaxExtent(); 

</script>

但是当我运行它，我没什么不能看地图。

我做了一个记事本的HTML页面，看起来像这样：

<html> 
<head> 
    <title>OpenLayers Example</title> 
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 
    </head> 
    <body> 
     <div style="width:100%; height:100%" id="map"></div> 
     <script defer="defer" type="text/javascript"> 
     var map = new OpenLayers.Map('map'); 
     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     map.addLayer(wms); 
     map.zoomToMaxExtent(); 
     </script> 

</body> 
</html>

和它的作品。

为什么不是在ASP.NET中执行代码？

我从NuGet安装了OpenLayers，如果我选择OpenLayers并按F12（'Go To Definition'，它会打开OpenLayers.js，因此它似乎已被正确下载）。

编辑：完整的生成代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>FIKA - Home</title> 

    <script src="http://openlayers.org/api/OpenLayers.js"></script> 

    <link href="/Content/css?v=bxomq82-FU9mU3eDX6m-kca-a2PFEz0RK2Z7mS-QmnY1" rel="stylesheet"/> 

    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script> 


</head> 
<body> 

    <div class="container body-content"> 



<div style="width:100%; height:100%" id="map"></div> 
<script src="http://openlayers.org/api/OpenLayers.js"></script> 
<script defer="defer" type="text/javascript"> 
    var map = new OpenLayers.Map('map'); 
    var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); 
    map.addLayer(wms); 
    map.zoomToMaxExtent(); 

</script> 
     <hr /> 
    </div> 

    <script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script> 

    <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script> 



<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"Chrome","requestId":"0ea737fab0f240fab62a7978c5db4fa7"} 
</script> 
<script type="text/javascript" src="http://localhost:60314/4457514eae394a96a55c4c6c386b7942/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html>

来源

2015-09-05 Jefecito

在完整生成的代码中，您包含两次“http：// openlayers.org/api/OpenLayers.js”脚本。也许这就是导致你的问题的原因。 –

嗨，还有一个人建议（现在删除），我添加了该脚本标签到视图中，但我试图将其添加到视图（仅），布局中的标题（仅），也没有这些更改工作。 – Jefecito

你有没有JS错误？ –

出现你的问题，因为在完全生成的代码，你有HTML5的doctype凡在你的工作演示中，你没有一个DOCTYPE。这种差异会导致浏览器呈现与height:100%;不同的属性。

您需要在执行代码之前设置高度像素。

function setMapHeight() { 
    var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0]; 

    document.getElementById('map').style.height = (w.innerHeight || e.clientHeight || g.clientHeight) + 'px'; 
} 

setMapHeight(); 
window.onresize = setMapHeight; // Add this code to fix height if window resizes 

var map = new OpenLayers.Map('map'); 
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); 
map.addLayer(wms); 
map.zoomToMaxExtent();

来源

2015-09-05 15:00:48

谢谢Tasos，它的效果很好。我想到这是这样的事情，但无法弄清楚它是什么，再次感谢！ – Jefecito

为什么不在ASP.NET MVC中执行内嵌JavaScript代码？

回答

相关问题