爲什麼不在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代碼？

回答

相關問題