Problème lors de l'utilisation de Dojo avec ASP.Net MVC

Question

J'essaie d'utiliser et d'utiliser Dojo sur une plate-forme ASP.Net MVC. en vue Index() je

@{ 
    ViewBag.Title = "Home Page"; 
} 
<link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/nihilo/nihilo.css"> 
<link rel='stylesheet' href='http://js.arcgis.com/3.18/esri/css/esri.css' /> 
<script src="http://js.arcgis.com/3.18"></script> 
<script src="~/Map/config.js"></script> 
<div class="container"> 
    <a role="button" id="lib" class="btn btn-default">Add Libraries</a> 
    <a role="button" id="sch" class="btn btn-default">Add Schools</a> 
    <div class="col-md-12" id="map-div"></div> 
</div> 

dans les config.js je

(function() { 
'use strict'; 
var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, ''); 
require({ 
    async: true, 
    aliases: [ ['text', 'dojo/text']], 
    packages: [{ 
     name: 'MapCoctent', 
     location: locationPath + '../Map/MapCoctent' 
    }, { 
     name: 'MapServices', 
     location: locationPath + '../Map/MapServices' 
    }, { 
     name: 'Map', 
     location: locationPath + '../Map', 
     main: 'map' 
    }] 
}, ['Map']); 
})(); 

et dans le map.js je

require([ 
'MapCoctent/appcontroller', 
'MapServices/mapservices', 
'dojo/domReady!' 
], function (AppCtrl, mapServices) { 
    'use strict'; 
    var appCtrl = new AppCtrl({ 
    elem: 'map-div', 
    mapOptions: { 
    basemap: 'streets', 
    center: [-123.141608, 49.245291], 
    zoom: 12, 
    autoResize: false 
} 
}); 
    appCtrl.load(); 
}); 

et enfin dans mapservices.js je

define(["esri/geometry/Geometry", 
    "esri/geometry/Point", 
    "esri/graphic", 
    "esri/symbols/SimpleMarkerSymbol", 
    "esri/symbols/SimpleFillSymbol", 
    "esri/Color", 
    "dojo/on", 
    "dojo/dom" 
], function (Geometry, Point, Graphic, SimpleMarkerSymbol, SimpleFillSymbol, Color, on, dom) { 
     on(dom.byId("sch"), "click", function() { 
     var point = new Point(-123.141608, 49.245291); 
     var markerSymbol = new SimpleMarkerSymbol(); 
     markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); 
     markerSymbol.setSize(12); 
     markerSymbol.setColor(new Color([255, 0, 0])); 
     var pointGraphic = new Graphic(point, markerSymbol); 
     map.graphics.add(pointGraphic); 
    }); 
}); 

dans appcontroller.js Je

define([ 
'dojo/_base/declare', 
'esri/map' 
], function (declare, Map) { 
return declare(null, { 
    map: null, 
    options: {}, 
    constructor: function (options) { 
     this.options = options; 
    }, 
    load: function() { 
     this.map = new Map(this.options.elem, this.options.mapOptions); 
    } 
}); 
}); 

mais quand je clique sur le bouton Ajouter écoles Je reçois cette erreur

Erreur

TypeError: map.graphics is undefined

pouvez-vous s'il vous plaît laissez-moi savoir ce que je fais mal et pourquoi la carte est encore indéfini alors qu'il est déjà instancié sur la page?

Answer 1

Votre objet carte n'est pas une variable globale, il est donc pas accessible depuis l'autre module (accessible uniquement à partir appcontroller.js)

Essayez de faire une variable golbal, il serait alors accessible sur l'autre modules (fichier js)

var map ; // declare global var here 
define([ 
'dojo/_base/declare', 
'esri/map' 
], function (declare, Map) { 
return declare(null, { 
    //map: null, useless ! 
    options: {}, 
    constructor: function (options) { 
     this.options = options; 
    }, 
    load: function() { 
     map = new Map(this.options.elem, this.options.mapOptions); 
    } 
}); 
});