Issue on Using Dojo With ASP.Net MVC

[BruceGreen]

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?

[RobertScheitlin__GISP]

Try adding a require for esri/map to your mapservices.js

[BruceGreen]

Thanks Robert but this doesn't help either. besides In that case I need to create another map object that looks like it is unnecessary! am I correct?

[RobertScheitlin__GISP]

Nope, you do not create a new map, you just require the map class so the code knows about the map class.

[BruceGreen]

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

[LoriGonzalez]

I've had success defining my packages first.  Index.cshtml

<script type="text/javascript">
var locationPath = location.pathname;
var dojoConfig = {
packages: [{
name: "main",
location: locationPath + "/js"
}, {
name: "app",
location: locationPath + "/js/app"
}]
};
</script>
<script src="//js.arcgis.com/3.17"></script>
<script src="~/js/Controller.js"></script>

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

});

[JeffJacobson]

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.