In this article we discuss how ASP.NET AJAX handles complex data types. We wil use a web service for Ajax communication which will be exposed to client using Script Manager. Although complex data types can be handled using JSON objects, Script Manager internally JSON serialization for handling complex data types; so will we will not concern ourselves with JSON inthis article.

Let’s assume we have a Public class Employee as below.

public class Employee

{

public string name = string.Empty;

public string Address = string.Empty;

public string City = string.Empty;

public string zip = string.Empty;

public string [] phoneNumbers = null;

publicEmployee()

{

}

publicEmployee(string Name,stringAddress, string City, stringzip, string [] phoneNumber)

{

this.Address= Address;

this.City= City;

this.name= Name;

this.zip= zip;

this.phoneNumbers= new string[phoneNumber.Length];

this.phoneNumbers= phoneNumber;

}

public string setValues()

{

string_name = this.name;

string_Address = this.Address;

string_City = this.City;

string_zip = this.zip;

string[]_phoneNumbers = new string[this.phoneNumbers.Length];

_phoneNumbers = this.phoneNumbers;

return“SUCCESS”;

//Writeyour logic for setting values.

}

}

pan>

In above class the elements which  need to be accessed in JavaScript are public – note we are not considering any function in a class.

We are going to expose a webservice to Script Manager for this article. So we also have a web service indemo code called “WebService.asmx”.

Following two namespaces arerequired to make a web service Ajax Enabled:

usingSystem.Web.Script.Services;

using System.Web.Script.Serialization;

Our web service class is as below:

[WebService(Namespace= "http://tempuri.org/")]

[WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)]

[GenerateScriptType(typeof(Employee))]

[ScriptService]

public class WebService :System.Web.Services.WebService

{

public WebService()

{

//Uncommentthe following line if using designed components

//InitializeComponent();

}

[WebMethod]

public string setValues(Employeeemp)

{

returnemp.setValues();

}

[WebMethod]

public Employee getDefaultData()

{

string[]PhnNum = { “123″,“222″,“234″};

&n
bsp; EmployeeEmp = new Employee(“Default Name”,“DefaultAddress”,“Default City”,“Default Zip”,PhnNum);

returnEmp;

}

}

Below are the two extra lines we have added above the WebService class, this is to indicate that the web service will be called from JavaScript, and creates the corresponding script object of class Employee.

[GenerateScriptType(typeof(Employee))]

[ScriptService]

In the Demo, Employee and WebService classesare added under namespace Demo and are in the same file “webservice.asmx”.

Our server side code ends here. Now we shall develop only client side code.

Our form tag is as follow

<form id=”form1″runat=”server”>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

<Scripts>

<asp:ScriptReference Path=”JScript.js” />

</Scripts>

<Services>

<asp:ServiceReference Path=”WebService.asmx” />

</Services>

</asp:ScriptManager>

<br />

Deal with&nbsp;ComplexData Types<br/>

<br />

<div>

<table border=”1″ cellpadding=”0″ cellspacing=”0″ style=”width: 730px; height: 74px” >

<tr>

<th align=”left”>Employee Name</th>

<th align=”left”>Address1</th>

<th align=”left”>City</th>

<th align=”left”>Pin Code</th>

<th align=”left”>Phone Number (seperate by ‘,’)</th>

</tr>

<tr>

<td align=”left” >

<input type=”text” id=”txtEmpName”/>

</td>

<td align=”left”>

<input type=”text” id=”txtAddress” />

</td>

<td align=”left”>

<input type=”text” id=”txtCity” />

</td>

<td align=”left”>

<input type=”text” id=”txtZipCode” />

</td>

<td align=”left”>

<input type=”text” id=”txtPhnNumber” />

</td>

</tr>

</table>

</div>

<br />

<input type=”button” id=”btnDefaultData” value=”Get Default Data” onclick=”_getDefaultData()”/>

<input type=”button” id=”btnCallServer” value=”Call Server” onclick=”_sendDataToServer();” />

</form>

In above code, we have used script manganer and registered our web service and JavaScript file.From here onwards we are goingto develop JavaScript

Calling of WebService methods using JavaScriptand script manager is very simple, we just need to use the simple namespace sequence.

e.g. If we want to call getDefaultData function of a webservice we simply need:

Demo.WebService.getDefaultData().

If we want to add a response handler we justneed to specify the function name in bracess like
> Demo.WebService.getDefaultData(OnSucceeded)

For the demo purpose our JavaScript contains threemain functions

· _getDefaultData() – This JavaScript function is used to call the web method get DefaultData. This Web Method returns default DataSet for the Employee class.

The JS function is as below

function_getDefaultData()

{

// This function gets default data from server.

Demo.WebService.getDefaultData(OnSucceeded)

}

· _sendDataToServer() – This JavaScript function is used to pass the clientside input to the server, or to the web method.

The JS function is as below

function_sendDataToServer()

{

// Create aninstance of the Server side employee class.

var obj = new Demo.Employee();

obj.name = window.document.getElementById(‘txtEmpName’).value;

obj.Address =window.document.getElementById(‘txtAddress’).value;

obj.City = window.document.getElementById(‘txtCity’).value;

obj.zip = window.document.getElementById(‘txtZipCode’).value;

obj.phoneNumbers =window.document.getElementById(‘txtPhnNumber’).value.split(‘,’);

// Call the Webservice method to send Client side values.

Demo.WebService.setValues(obj,OnSucceeded);

}

IN ABOVE FUNCTION CHECK THEWAY WE HAVE CREATED OBJECT OF AN EMPLOYEE CLASS. THIS EMPLOYEE CLASS EXISTS INC# CODE, BUT USING ASP.NET AJAX WE ARE ABLE TO CREATE AN INSTANCE ON CLIENTSIDE AS WELL.

· OnSucceeded(result,userContext,methodName) – This JavaScript function is used to handle the response from the server. The function is as below

// This is thecallback function that

// processes thecomplex type returned

// by the Webservice.

functionOnSucceeded(result,userContext, methodName)

{

if(methodName== “getDefaultData”)

{

window.document.getElementById(‘txtEmpName’).value = result.name;

window.document.getElementById(‘txtAddress’).value= result.Address;

window.document.getElementById(‘txtCity’).value = result.City;

window.document.getElementById(‘txtZipCode’).value = result.zip;

varphnNum = null;

for(var j = 0 ; j < result.phoneNumbers.length; j++)

{

if(j== 0) phnNum = result.phoneNumbers[j];

elsephnNum = phnNum + “,” +result.phoneNumbers[j]

}

window.document.getElementById(‘txtPhnNumber’).value = phnNum;

}

elsealert(result);

}

Refer the Demo code for better understanding of this code.