dfresh22

Web App Builder Implementation to MVC

Blog Post created by dfresh22 on Oct 14, 2015

Hi Everybody,

 

I figured this had to be done, hopefully I can save you all lots of headaches in the future,

 

Objective: Learn how to implement Esri Web App Builder into MVC File. At the end of this technical tutorial, you will be able to incorporate a web app into whatever MVC you decide to build.

 

This post, assumes you already know how to build a web app and create a basic ASP.NET Web Application with MVC 4,

 

Steps

  1. Create Basic Web App... etc...
  2. Download web app (download as Zipfile)

  • Extract Zip File to temp location and copy over into the MVC project folder
    • The web.config file will want to overwrite, do not allow this instead open the web.config with notepad ++ and copy the <staticContent> and place in the existing <system.webServer> tag

  • Now that everything is copied into the folder, click show all files (screenshot below) and include all of the Web App Folders and files (this will take some time ~30 seconds

  • please move the following Javascript files into the ~/Scripts/ Folder
    • env,js
    • init.js
    • simpleLoader.js

 

The Fun Part ( yippy Kai-eh ESRI)

  • Create a simple view, or take an existing one (in this case I took the About.cshtml View)
  • Go to the Bundle Config in App_Start and add the "~/jimu.js/css/jimu-ie.css" script to an existing Css bundle
  • in the newly created view, add the following at the top

@{

    ViewBag.Title = "ArcGIS Web Application";

    @Styles.Render("~/Content/css") //this is the bundle config I added the jimu-je.css to

    Layout = null; // set layout to null if you just want the pure web app, regardless of layout.cshtml view

}

  • Copy the following code from the index.html file in web app to here, please remove the css tags, as we have handled this in the bundle config above, and take note of how the javascript files are rendered.

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

    <title>ArcGIS Web Application</title>

    <link rel="shortcut icon" href="images/shortcut.png">

</head>

<body class="claro jimu-main-font">

    <div id="main-loading">

        <!-- This is section you can modify to customize the loading page -->

        <div id="app-loading"></div>

        <div id="loading-gif"></div>

        <!-- //////////////////    END    ////////////////////////////// -->

        <div id="ie-note" style="display:none;">

            <div class="hint-title">Error</div>

            <div class="hint-img">Your browser is currently not supported.</div>

            <p class="hint-text">

                <span>

                    Please note that creating presentations is not supported in Internet Explorer versions 6, 7.

                </span>

                <br>

                <span>

                    We recommend upgrading to the latest Internet Explorer, Google Chrome, or Firefox.

                </span>

                <br>

                <span>

                    If you are using IE 8 or later, make sure you turn off "Compatibility View".

                </span>

            </p>

        </div>

    </div>

    <div id="main-page">

        <div id="jimu-layout-manager"></div>

    </div>

    @Scripts.Render("~/Scripts/env.js");

    @Scripts.Render("~/Scripts/simpleLoader.js");

    @Scripts.Render("~/Scripts/init.js");

</body>

</html>

  • note that I rendered the scripts individually at the bottom of the page- this is done on purpose

 

next step is to edit the env.js file and config it to be dynamic

  • you need to set your apiURL variable to something either hosted on your server (download ArcGIS_JS libary) or set the url, something like this apiUrl = "https://myserver/arcgis_js_api/library/3.14/3.14";
  • next go to the getPath() function and update it to be dynamic, see screenshot below

 

  • Next we are going to edit the init.js file

  • update the code below - see screenshot - do a control+f if you cant find the section I am referring to

  • Update the last function to the localHostMVC variable you created previously

  • run the application and it should render perfectly now (see screenshot below)
  • you will notice the widget icons are not rendered, this is because the paths need to be updated
  • I will update the post another day, and show you how to update the icon paths in the css file

 

 

Thanks,

Outcomes