Setting Up ASP.Net 3.5 and Sproutcore

NOTE: This is just a quick overview of what I’ve done so far in my quest to get Sproutcore and ASP.Net speaking with each other. I’m not taking advantage of the collections, datasources, and records in Sproutcore, but this may get someone started in the right direction. When I learn more about Sproutcore I will make a tutorial explaining how to fully utilize Sproutcore and ASP.Net.

ASP.Net 3.5 allows you to setup Web Services to send and receive JSON formatted objects. What I will outline here is a way to use this for communication between a Sproutcore Controller and an ASP.Net Web Service.

This simple example will just send an email address and password to the server that will then return a user object containing the parameters passed in. I’ll assume that you have created your Sproutcore application named ASPExample, a controller named loginController, and a model named User. The controller is an ObjectController with it’s content property bound to an instance of an User class.

Setting Up the Web Service

On the ASP.Net side just create a standard Web Application and add a new Web Service. For this example I’ll call the Web Service SproutcoreExample.UserService that exists in the root Web Application directory. The method that we want to call from our Sproutcore application will be called Login. Here is how the Web Service might look.

<pre>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Services;

The Web Service is quite standard. The important things to note are some of the attributes given to the Class and Method. [WebServiceBinding(ConformsTo = WsiProfiles.None)] is used to suppress any XML from being returned by the method when the the objects are serialized. The [ScriptService()] attribute allows the Web Service to participate in the new AJAX Scripting APIs that come with .Net 3.5. On the method the [ScriptMethod(ResponseFormat = ResponseFormat.Json)] tells the Web Services system to serialize objects using the JSON format when requested.

NOTE: One thing to be aware of when trying to get an ASP.Net Web Service to return objects serialized as a JSON string is the content type for the request must be set to application/json. If the request is not set to this then the Web Service will return XML instead of a JSON string. Also, Firebug is your friend when trying to debug the communication between the client and server. I also found Fiddler to be helpful in Windows.

The User class should be [Serializable] and could look something like the following.

<pre>using System; using System.Collections.Generic; using System.Linq;

}


The Request From Sproutcore

In this example I use the Prototype AJAX.Request function to communicate with the server. The Prototype Javascript file should already be included in your application so there shouldn’t be anything for your to do when using this functionality. Here is an example controller using the AJAX.Request function.

<pre>// ========================================================================== // ASPExample.LoginController // ==========================================================================

var req = new Ajax.Request(‘/UserService.asmx/Login’, {
method: ‘post’,
contentType: ‘application/json; charset=utf-8’,
postBody: params,
onSuccess: function(transport){
var obj = eval(‘(’transport.responseText‘)’);
ASPExample.loginController.set(‘content’, ASPExample.User.create(obj.d));
}
});
}
}) ;


The function parameters for the remote method should be formated as a JSON string and set to the postBody option of the request. In this case the HTTP request method is a post operation and set in the method option. It’s very import that the contentType be set to application/json. If this is not set the Web Service will return the result as a SOAP formatted object. In the onSuccess event we are simply evaluating the response text into a Javascript object. Then the loginController’s content is set to a new User object initialized with the result of our remote method call. Anything bound to the User is updated at this point.

NOTE For some reason, unknown to me, the Web Service always returns the User record as a hash within a hash named ‘d’. (Sorry if my terminology is not correct, I’m somewhat new to Javascript.) If I ever figure out why this happens I will update the Wiki or if someone else knows then please enlighten us.

That’s about it. Obviously you should also handle failures in the onFailure event of the AJAX.Request function. I’ve not tried collections or nested objects yet, so I’m not sure how those turnout. As I experiment more I will update this Wiki.

A Little Information About My Environment

This is not really part of the example, but I thought it might be nice to mention something about the development environment I am using. I use a Mac Book Pro with Windows running in Parallels. My Sproutcore development is done from OS X while my ASP.Net development is in Windows. I am using Apache as a reverse proxy (I think that’s what it’s called) to serve the Sproutcore and ASP.Net pages which makes it seem as though they are coming from the same place. This setup works quite well for me so far. Take a look at the About the SproutCore Build Tools section on the Wiki for some information about setting up Apache. My httpd.conf file looks something like this for the proxy section:

<pre>ProxyPass /ASPExample http://localhost:4020/user_area ProxyPassReverse /ASPExample http://localhost:4020/user_area ProxyPass /static http://localhost:4020/static ProxyPassReverse /static http://localhost:4020/static ProxyPass / http://192.168.3.3/SproutCoreExample/ ProxyPassReverse / http://192.168.3.3/SproutCoreExample/ </pre>

Apache will pass all traffic related to Sproutcore to the sc-server and everything else to IIS on my virtual machine. If you’re afraid of exposing your Windows environment to the world you can use “Host Only” networking to prevent Windows from being exposed to the Internet. One thing of interest when setting this up is the order of the Proxy settings. You must put the sub-directory configurations before their parents. So “/static” and “/ASPExample” must go before the “/” setting. If you put the root setting first then Apache doesn’t look any further and passes the request to your IIS server.

Other Links Of Interest

I’d like to give credit to Josh from 64bytes, his article got me going in the right direction when trying to get this working.

Information on Prototype can be found here.

Notes

I’m fairly new to Javascript so there might be better ways to do what is given in this example, please update where appropriate. I’m very new to Sproutcore and will update this as I learn more.