Issue on Using Dojo With ASP.Net MVC

Question

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?

JeffJacobson · Answer

lg21155 is correct. The package definitions need to come before you load the ArcGIS API URL. Lines 6 and 7 in your CSHTML need to be swapped. Also, the package definitions should be assigned to a variable called dojoConfig rather than being inside of a call to require.

LoriGonzalez · Answer

I've had success defining my packages first. Index.cshtml Controller.js $(document).ready(function () { require(["main/plugins/bootstrapmap.min"], function (BootstrapMap) { var map = BootstrapMap.create("mapDiv", { sliderStyle: "small", logo: false, autoResize: false, scrollWheelZoom: true, showLabels: true, basemap: "cosastreets", zoom: 2 }); });

BruceGreen · Answer

well I did what you said but still getting same error!