AnsweredAssumed Answered

Issue on Using Dojo With ASP.Net MVC

Question asked by BEHSEINI on Nov 8, 2016
Latest reply on Nov 21, 2016 by jacobsj

I am trying to utilize and use Dojo on an ASP.Net MVC platform.  in Index() view I have

@{
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>

 

in the `config.js`  I have

 

(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']);
})();

 

and in the `map.js` I have

 

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();
});

 

and finally in `mapservices.js` I have

 

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);
});
});

 

in `appcontroller.js` I have

 

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);
}
});
});

 

 

but when I click on Add Schools button I am getting this error

 

Error

TypeError: map.graphics is undefined

 

can you please let me know what I am doing wrong and why the map still is undefined while is already instantiated on the page?

Outcomes