chuckf74

DOJO Layout Inside ASP.NET Web Form

Discussion created by chuckf74 on Aug 16, 2012
Latest reply on Apr 2, 2013 by tschlarm
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

Outcomes