Tutorial: Passing objects from Flex 3 to ASP.NET Web Services and back

To complete this tutorial you will need a copy of Flex Builder 3 (there is a free trial version available) and Visual Studio 2008 (I used the “Professional” edition) with the .NET Framework 3.5 and IIS 6 or 7. Also you need to have the JSON AS3CoreLib.

First, you need to create a new Flex project in Flex Builder. Give it a project name of “PassingObjects”. Once the Flex Builder designer is loaded you can drag an MX:Panel onto the design surface. Put the Panel somewhere in the middle. Drag a MX:Button onto the Panel and set the label property to “Run” and the ID property to “run_btn”. Finally drag a MX:TextArea onto the Panel above the button. Set it’s VerticalScrollPolicy to “true” and it’s “ID” to “output_txt”.

You should have something like this:

Time to setup AS3CoreLib. Make sure you’ve extracted the as3corelib into your “src” working folder for the Flex project, here are the files and directory structure we want to have:

Lets move over to Visual Studio 2008 now. Open up Visual Studio (make sure if you are using Vista that you right-click on the Visual Studio icon and use the “Run as administrator” option so Visual Studio has privileges to create a new website in IIS 7. I’m going to assume you have IIS installed and working with ASP.NET 3.5, in my case I’m using Windows Vista with IIS 7 and the .NET Framework 3.5 as my default. Once your Visual Studio is up and running create a new website. Then pick the “ASP.NET Website” option and set the “Location” to “HTTP” with a value of “http://localhost/PassingObjects”.

(Click to enlarge)

Once the wizard has finished it’s magic go ahead and remove the Default.aspx webpage (right-click on the file in the Solution Explorer and select “Delete”). Now right-click on the “http://localhost/PassingObjects” in the Solution Explorer and select “Add new item”. From that dialog choose “WebService”.

(Click to enlarge)

Time to modify the web service generated code. Make your code look like this:

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
// Make sure to add this next line!
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
[GenerateScriptType(typeof(MyObject))]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public MyObject DoSomethingWithMyObject(MyObject obj)
{
}
}

Ok, the code is not done yet but lets explain what we did so far. First, we uncommented the line that lets ScriptService do it’s magic -which is essentially making it so scripts like AJAX calls (JavaScript) can talk to this method. In our case it will be Flex instead of a JavaScript AJAX call. After the ScriptService we add GenerateScriptType and tell it to generate a scriptable type of MyObject. Basically we will have a class called MyObject and our web service will do it’s best to turn that class into JSON, hence why we added the ScriptMethod(ResponseFormat = ResponseFormat.Json) over the DoSomethingWithMyObject method call. We want that call to take and argument of the MyObject and pass back that object except we will modify it’s contents.

Obviously now we need to actually create the “MyObject” class. So right-click on the “http://localhost/PassingObjects” in the Solution Explorer and select “Add new item” and pick “Class”. Change the name of the file to “MyObject.cs”. If you get a dialog saying you should place the new class in an “App_Code” folder go ahead and say “Yes”. You should now be in the new empty MyObject class. Here we need to add the following code:

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
[Serializable]
public class MyObject
{
public String name { get; set; }
public String favoriteGame { get; set; }
public String favoriteRockGroup { get; set; }
}

Pretty easy stuff. We just defined three string properties.

Lets finish off that method in the web service. Here is the final code:

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
// Make sure to add this next line!
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
[GenerateScriptType(typeof(MyObject))]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public MyObject DoSomethingWithMyObject(MyObject obj)
{
obj.favoriteGame = "Dungeons and Dragons";
obj.favoriteRockGroup += " and AC/DC";
obj.name += "!";
return obj;
}
}

We are just going to modify the object a bit and return it to Flex.

Compile this to make sure it works. If it doesn’t work double check the steps and code above.

Now, lets move back to our Flex Builder 3 project.

We need to create a similar MyObject class in ActionScript 3. From the Flex Builder menu select “File -> New -> ActionScript Class”. Give it a name of “MyObject”.

We are now ready to add the final bits of code. Go back to the “PassingObjects.mxml” page in Flex Builder and click on the “Source” button. Lets go ahead and add the code to call the web service.

Lots going on here. I know I could probably have used the MX:WebService call here, but I think doing it the way I did above makes it easier to see whats going on.

The URLLoader class is one of my favorites. It is available in both Flash CS3 and Flex 2/3 (possibly also in prior releases of each product too). The important things in the code is that we hook up the “Run” button to call out to the web service. At that point we pass in two headers, the real important one here is the “application/json” one. Without that header set the ASP.NET Web Service would return XML even though we told it JSON. Then we setup some listeners so when our call returns we can handle any problems or the returning JSON on a successful call. We make use of the POST method and encode our MyObject into JSON:

request.data = '{"obj":' + JSON.encode(obj) + '}';

Since our Web Service takes an agrument of MyObject obj, we need to tell it that the JSON is indeed the argument it’s looking for. Now the Web Service will mess with that object and send it back to us which we catch in the “completeHandler” method. At that point we can decode the incoming JSON and print the objects contents and you should see this:

(Click to enlarge)

You can now see the JSON returned as well as our modified object we passed into the Web Service.

ASP.NET does something unusual with JSON it returns in wrapping our object in “d”. This is done because for compatibility with their ASP.NET AJAX extensions I’m told. So keep that in mind when digging your objects out.

Great example. Very difficult to source simple .net webservices interaction examples like this one. One thing I am having trouble with is the JSON sent back from my .net2 application is not being decoded correctly.
Hence,

var obj:Object = JSON.decode(loader.data); is not working.

I am wondering whether the decode method looks for a matching class name in the Flex app?

I have called my object class “SimpleTest”. The JSON that is sent back refers to a class call MyFlexWS.SimpleTest
(Note the additional namespace)

So I am assuming that the decode method is searching for a class definition that corresponds to SimpleTest and cannot find it because of the namespace.

Is this a assumption or does the decode method not care about class names?

Look, thanks. This has been the most effective first stop I have seen explaining a simple interaction between iis and flex, in fact its a great deal easier to understand than the tutorials I have been depressing myself with from weborb, the annoying thing is that weborb looks seriously seriously good, and now hopefully ill have a better chance of getting to grips with it, thanks again.

I am wondering how to debug the web service. I have a much more complicated object that I am attempting to send to the web service and do some manipulation of the object when it gets there. The problem is, that I don’t know how to debug the service.