In JSON, passing objects from javascript to .net web services is a cinch. In fact, it's easier by far than doing it in the old Xml notation.
In my last post I spoke about how you can reduce the bloat of your apps by not being so reliant on the ASP.NET AJAX implementation, and going with lightweight JSON calls. In the example, I was passing string values around as parameters and return values which worked quite well.
However oftentimes you'll want to be moving around your own objects and other complex types, and converting these objects back to their primitive types on each method is something that would drive you nuts.
Fortunately both the javascript and .net frameworks provide a way of doing these things for us, without us having to write even a single line of code.
First, let's create a web service that returns us a fictional instance of a Person class called 'Gary':
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script;
using System.Web.Script.Services;
namespace MyAjax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public Person GetPerson()
{
Person gary = new Person();
gary.Firstname = "Gary";
gary.Lastname = "Familyman";
gary.Age = 42;
Person wife = new Person();
wife.Firstname = "Betty";
wife.Lastname = "Familyman";
wife.Age = 40;
Person daughter = new Person();
daughter.Firstname = "Sabrina";
daughter.Lastname = "Familyman";
daughter.Age = 10;
Person son = new Person();
son.Firstname = "Mike";
son.Lastname = "Familyman";
son.Age = 12;
gary.Relatives.Add("wife", wife);
gary.Relatives.Add("daughter", daughter);
gary.Relatives.Add("son", son);
return gary;
}
}
public class Person
{
private string firstname;
private string lastname;
private int age;
private Dictionary <string, Person> relatives;
public Person()
{
relatives = new Dictionary<string, Person>();
}
public string Firstname
{
get { return firstname; }
set { firstname = value; }
}
public string Lastname
{
get { return lastname; }
set { lastname = value; }
}
public int Age
{
get { return age; }
set { age = value; }
}
public Dictionary<string, Person> Relatives
{
get { return relatives; }
}
}
}
Essentially we create Gary, and a few of his family members. The purpose here is to create a complex type - you wouldn't actually want to create people in this way!
We create the service as a script service so it's accessible via the javascript in our page. Calling the web service method then becomes a breeze:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function GetGary()
{
MyAjax.WebService.GetPerson(
function(result)
{
var setBreakpoint;
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<a href="javascript:GetGary();">Tell me about Gary</a>
</div>
</form>
</body>
</html>
I'm using Firefox with the Firebug plugin installed. I've found this to be one of the best javascript debuggers out there, and it's not as fiddly to use as the one built into visual studio. I simply set a breakpoint on the var setBreakpoint; line, click the link in the browser, and my result value looks like this:
How easy is that? This means that to get attributes associated with "Gary" in the javascript, I just need to write code like:
result.Firstname //"Gary";
result.Age // 42
result.Relatives.daughter.Firstname // "Sabrina"
and so on!
Oh, and the other thing is too, don't worry about the bloat on the wire. Because this doesn't use server controls, the only data being set back and forth is going to be related soley to your objects. To illustrate the point, "Gary" the Person object comes back as:
Response
{"__type":"MyAjax.Person","Firstname":"Gary","Lastname":"Familyman","Age":42,"Relatives":{"wife":{"__type":"MyAjax.Person","Firstname":"Betty","Lastname":"Familyman","Age":40,"Relatives":{}},"daughter":{"__type":"MyAjax.Person","Firstname":"Sabrina","Lastname":"Familyman","Age":10,"Relatives":{}},"son":{"__type":"MyAjax.Person","Firstname":"Mike","Lastname":"Familyman","Age":12,"Relatives":{}}}}
Which really is as terse and succinct as you can get.
Passing objects around in JSON / ASP.NET AJAX is just as easy as passing primitive types. The advantage is that you don't need to send the viewstate or any other information, hence can achieve far superior speed and efficiency gains in your web application.