DOJO Layout Inside ASP.NET Web Form

chuckfrank · ‎08-16-2012

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

chuckfrank · ‎08-17-2012

I noticed that if I load the jsapi first the elements load for the bookmark sample. Notice where the script was in the sample (commented) versus where it is now:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="bookmarks_example.aspx.vb"
    Inherits="bookmarks_example" %>

<!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 charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Bookmark Widget(Read-only Bookmarks)</title>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/bookmarks.css">
    <style type="text/css">
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      #header {
        padding-top: 4px;
        padding-left: 15px;
        background-color:#444; 
        color:#fff; 
        font-size:16pt; 
        text-align: left; 
        font-weight:bold;
        height:55px;
      }
      #subheader {
        font-size:small;
        color: #cfcfcf;
        text-align:left;
        padding-left:20px;
      }

      #bookmarks-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 30px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds-l div { height: 100%; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
        
    </style>
    <script>        var dojoConfig = { parseOnLoad: true };</script>
    <%--<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>--%>

chuckfrank · ‎08-17-2012

It's got something to do with the parseOnLoad: true. If I set it to false the layout displays, but the elements are not where they are supposed to display.

    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>

AndrewBrown1 · ‎09-07-2012

Did you ever find a solution to your problem? I'm trying to do the same thing.

chuckfrank · ‎09-10-2012

No, I didn't find a solution. The only thing I've seen that's similar is when using jQuery mobile this script serves a similar purpose of loading the layout properly. All I can guess is that it's some sort of ajax issue.

    <script type="text/javascript">
        $.mobile.ajaxEnabled = false;
        $.mobile.ajaxLinksEnabled = false;
        $.mobile.ajaxFormsEnabled = false;
    </script>

TomSchlarman · ‎04-02-2013

Old question, but since there does not appear to be an answer yet, here's my $0.02 worth.

I've had the same problem in the past. Since the map and main window is inside a FORM I've also had to add a style to the containing FORM to get it to work. Something along the lines of:

<body class="claro">
<form id="form1" runat="server" style="width: 100%; height: 100%;">
...

When I add this, the JS can walk up the DOM all the way to BODY and get the right height/width. Apparently, it walks up the DOM tree, runs into the FORM (which does not have a size) and sizes the height/width to 0 (since nothing inside it has been laid out yet to give it a size), so we see a brief flash and then a white screen.

I've had to do this to multiple containers that happened to surround a map (depending on how deeply things are nested).

Hope this helps...