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

Question

这是我的完整视图：

@{
    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，如果我 select 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>

Answer 1

出现您的问题是因为在完整的生成代码中您有 HTML5 文档类型，而在您的工作演示中您没有文档类型。浏览器以不同方式呈现 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();

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

Why isn't inline JavaScript code being executed in ASP.NET MVC?

asp.net-mvc

openlayers