Hello,I'd like to use the left panel sample from layout section http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm inside of an ASP.NET Web Form. When I run the application, it flashes briefly and then turns white. Are there extra steps I need to take to get the DOJO Layouts to run in a web form? Should web forms be avoided, as a general rule, when working with the JSAPI?Here is the code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default2.aspx.vb" Inherits="default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<style type="text/css">
html, body {
height: 100%; width: 100%; margin: 0;
}
body{
background-color:white; overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-image: url(images/banner.jpg); background-repeat: repeat-x;
margin: 2px;
border: solid 4px #224a54;
color:white; font-size:18pt;
text-align:left; font-weight:bold; height:70px;
}
#subheader {
font-size:small;
color:white;
padding-left:20px;
}
#rightPane{
background-color:white;
color:#3f3f3f;
border: solid 2px #224a54;
width:20%;
}
#leftPane{
margin: 5px;
padding:2px;
background-color:white;
color:#3f3f3f;
border: solid 2px #224a54;
width:20%;
}
#map {
margin: 5px;
border:solid 4px #224a54;
-moz-border-radius: 4px;
}
#footer {
margin: 2px;
border: solid 2px #224a54;
background-color:#ecefe4;color:#3f3f3f;
font-size:10pt; text-align:center; height:40px;
}
.dijitTabInnerDiv{
background-color:#ecefe4;
}
#tabs{
padding:5px;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.dijit.Legend");
var map;
function init() {
var initialExtent = new esri.geometry.Extent({ "xmin": -9594311.29, "ymin": 4594549.09, "xmax": -9476292.52, "ymax": 4639188.31, "spatialReference": { "wkid": 102100} });
map = new esri.Map("map", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function (map) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
var dynamicUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyHazardsandRisks/MapServer";
var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl, { opacity: 0.45 });
var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);
dojo.connect(map, 'onLayersAddResult', function (results) {
//add the legend
var legend = new esri.dijit.Legend({
map: map,
layerInfos: [{ layer: dynamicLayer, title: "Public Safety"}],
arrangement: esri.dijit.Legend.ALIGN_RIGHT
}, "legendDiv");
legend.startup();
});
map.addLayer(basemap);
map.addLayers([dynamicLayer, referenceLayer]);
}
//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<form id="form1" runat="server">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
gutters="false" style="width:100%; height:100%;">
<div id="header" dojotype="dijit.layout.ContentPane" region="top">
This is the header section
<div id="subheader">subheader</div>
</div>
<div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
<div dojotype="dijit.layout.TabContainer" >
<div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
<div id="legendDiv"></div>
</div>
<div dojotype="dijit.layout.ContentPane" title="Tab 2" >
Content for the second tab
</div>
</div>
</div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center">
</div>
<div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
this is the footer section
</div>
</div>
</form>
</body>
</html>
Thanks,Chuck
