ESRI Javascript API: Integration with ASP.NET

Update: May 5th, 2012: The CodePlex code I posted was not working because ESRI had changed the example it was based on. A new version has been updated on CodePlex.

 

Esri have great examples about how to write map based applications with their Javascript API.

The examples are easy when you are adept at:

  • JQuery
  • Dojo JavaScript library

As far as I can tell, there are not too many resources that tell you (for example) how to integrate with an ASP.NET page.

Therefore I have created a project to show how to do this.

http://esrijsexamples.codeplex.com

My first project extends an Esri Javascript example and places the search results in an ASP.NET DataView.

In order to achieve this, I created a Visual Studio 2010 project that:

  1. Placed example into an ASP.NET page
  2. Parsed the ESRI map search result set
  3. Created a JSON data object with JQuery
  4. Passed the object back to the code behind after the search was completed
  5. Deserialized the JSON object into C# classes
  6. Bound the classes to the DataView

The code to get the results was simple enough. I just modified the ‘showResults’ function to build a JSON object, set the value to an input field and click a hidden button for a postback.

        function showResults(results) {

            //This function works with an array of FindResult that the task returns
            map.graphics.clear();
            var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0]), 2), new dojo.Color([0, 0, 0, 0]));

            var myString = "[";

            //Create items array to be added to store's data
            var items = []; //all items to be stored in data store
            for (var i = 0, il = results.length; i < il; i++) {
                myString += "{\"ID\":\"";
                myString += results[i].feature.attributes.TLID;
                myString += "\",\"OWNER1\":\"";
                myString += results[i].feature.attributes.OWNER1.replace(/,/g, '');
                myString += "\",\"OWNER2\":\"";
                myString += results[i].feature.attributes.OWNER2.replace(/,/g, '');
                myString += "\",\"OWNER3\":\"";
                myString += results[i].feature.attributes.OWNER3.replace(/,/g, '');
                myString += "\",\"VAL\":";
                myString += results[i].feature.attributes.TOTALVAL;
                myString += "},";

                var graphic = results[i].feature;
                graphic.setSymbol(symbol);
                map.graphics.add(graphic);
            }

            myString = myString.slice(0, -1);
            myString += "]";

            // Find the text box
            var test = dojo.byId("textbox1");

            // Set the input value to the JSON string
            test.value = myString;

            //Zoom back to the initial map extent
            map.setExtent(startExtent);

            // Click the button
            __doPostBack('Button1', '');
        }

On the server side, I deserialize the JSON string with the following:

    private List<CityProperty> GetProperties(string jsonString)
    {
        List<CityProperty> properties = new List<CityProperty>();

        JavaScriptSerializer ser = new JavaScriptSerializer();

        object o = ser.DeserializeObject(jsonString);

        object[] oList = o as object[];

        for (int i = 0; i < oList.Length; i++)
        {
            CityProperty cityProp = new CityProperty();

            Dictionary<string, object> foo = oList[i] as Dictionary<string, object>;

            cityProp.Id = foo["ID"] as string;
            cityProp.Owner1 = foo["OWNER1"] as string;
            cityProp.Owner2 = foo["OWNER2"] as string;
            cityProp.Owner3 = foo["OWNER3"] as string;

            object value = foo["VAL"];

            if( value != null)
            {
                cityProp.TotalValue = (int)value;
            }

            properties.Add(cityProp);
        }

        return properties;
    }

I have a feeling the deserialization process could be easier. There is a library that seems highly recommended called JSON.NET, but since I was only using simple types I didn’t want to add too much complexity with another library.

Advertisements

12 thoughts on “ESRI Javascript API: Integration with ASP.NET

  1. Can you provide the entire solution? You’re just supplying the files, and I’m having a hard time getting your code to compile properly…

  2. Actually, I have the site compiling, but for some reason, I can’t get my project to run the ‘showResults’ javascript function. So I’m unsure what’s going on…

    1. I just checked, and yes the solution/project file is missing. I’ll try and update when I get some time.

  3. Hi Beau, ‘Cybercop’,

    I found some time (finally) and as I suspected the code was fine but the example service provided by ESRI had changed.

    I have uploaded a new working version to CodePlex. I hope that helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s