Ajax-Handle complex data type (e.g. Class)

Share |

Use of complex data types in Ajax programming is a tricky part. In normal scenario we need to communicate between client and server via string manipulation only. (Demo Code)
In this article we will discuss about, Microsoft Ajax and the way we can handle complex data types. We shall use web service for Ajax communication; web service will be exposed to client using Script Manager. Complex data types can be handled using JSON objects, in this article we will discuss only about how to handle complex data types. Script Manager internally uses JSON serialization class for handling complex data types; so will not care about the JSON about in this article.

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


<br /> public class Employee<br /> {<br /> public string name = string.Empty;<br /> public string Address = string.Empty;<br /> public string City = string.Empty;<br /> public string zip = string.Empty;<br /> public string [] phoneNumbers = null;<br /> <br /> public Employee()<br /> { <br /> <br /> }<br /> public Employee(string Name,string Address, string City, string zip, string [] phoneNumber)<br /> {<br /> this.Address = Address;<br /> this.City = City;<br /> this.name = Name;<br /> this.zip = zip;<br /> this.phoneNumbers = new string [phoneNumber.Length];<br /> this.phoneNumbers = phoneNumber;<br /> }<br /> public string setValues()<br /> { <br /> string _name = this.name;<br /> string _Address = this.Address;<br /> string _City = this.City;<br /> string _zip = this.zip;<br /> string[] _phoneNumbers = new string[this.phoneNumbers.Length];<br /> _phoneNumbers = this.phoneNumbers;<br /> return "SUCCESS";<br /> <br /> //Write your logic for setting values.<br /> }<br /> }<br />

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

Again we are going to expose a web service to Script Manager for this article. So we also have a web service in demo code it is “WebService.asmx”.
Following two namespaces are required to make a web service Ajax Enabled. We will not go into any details of these namespaces.
using System.Web.Script.Services;
using System.Web.Script.Serialization;
Our web service class is as below



<br /> [WebService(Namespace = "http://tempuri.org/")]<br /> [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]<br /> [GenerateScriptType(typeof(Employee))]<br /> [ScriptService]<br /> public class WebService : System.Web.Services.WebService<br /> {<br /> <br /> public WebService()<br /> {<br /> <br /> //Uncomment the following line if using designed components <br /> //InitializeComponent(); <br /> }<br /> <br /> [WebMethod]<br /> public string setValues(Employee emp)<br /> {<br /> return emp.setValues(); <br /> }<br /> <br /> [WebMethod]<br /> public Employee getDefaultData()<br /> {<br /> string[] PhnNum = { "123","222","234" };<br /> Employee Emp = new Employee("Default Name","Default Address","Default City","Default Zip",PhnNum);<br /> return Emp;<br /> }<br /> }<br />

Following are the two extra things we have added above the WebService class, this is to indicate that the web service will be called from JavaScript, and is enabled of Creating corrosponding script object of class Employee.



<br /> [GenerateScriptType(typeof(Employee))]<br /> [ScriptService]<br />

In the Demo, Employee and WebService both classes are 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


<br /> <form id="form1" runat="server"><br /> <asp:scriptmanager id="ScriptManager1" runat="server"><br /> <scripts><br /> <asp:scriptreference path="JScript.js"><br /> </scripts><br /> <services><br /> <asp:servicereference path="WebService.asmx"><br /> </services><br /> </asp:ScriptManager><br /> <br /> <br /> Deal with Complex Data Types<br /> <br /> <br /> <br /> <div><br /> <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"><br /> <input type="text" id="txtEmpName"><br /> </td> <td align="left"><br /> <input type="text" id="txtAddress"><br /> </td> <td align="left"><br /> <input type="text" id="txtCity"><br /> </td> <td align="left"><br /> <input type="text" id="txtZipCode"><br /> </td> <td align="left"><br /> <input type="text" id="txtPhnNumber"><br /> </td> </tr> </table><br /> </div><br /> <br /> <br /> <input type="button" id="btnDefaultData" value="Get Default Data" onclick="_getDefaultData()"><br /> <input type="button" id="btnCallServer" value="Call Server" onclick="_sendDataToServer();"><br /> </form><br />

In above code, we have used script manganer and registred our web service and JavaScript file.
Here onwards we are going to deveolp JavaScript
Calling of WebService methods using JavaScript and script manager is very simple, we just need to use the simple namaspace sequence.
e.g. If we want to call getDefaultData function of a webservice we simply needs
Demo.WebService.getDefaultData().
If we want to add a response handler we just need to specify the function name in bracess like Demo.WebService.getDefaultData(OnSucceeded)
For the demo purpose our JavaScript contains mainly three functions

_getDefaultData() – This JavaScript function is used to call a webmethod getDefaultData. This Web Method returns default data Set for the Employee class.
The JS function is as below



<br /> function _getDefaultData()<br /> {<br /> // This function gets default data from server.<br /> Demo.WebService.getDefaultData(OnSucceeded)<br /> }<br />

_sendDataToServer() – This JavaScript function is used to pass client side input to the server, or to the web method.
The JS function is as below



<br /> function _sendDataToServer() <br /> {<br /> <br /> // Create an instance of the Server side employee class.<br /> var obj = new Demo.Employee();<br /> obj.name = window.document.getElementById('txtEmpName').value;<br /> obj.Address = window.document.getElementById('txtAddress').value; <br /> obj.City = window.document.getElementById('txtCity').value;<br /> obj.zip = window.document.getElementById('txtZipCode').value;<br /> obj.phoneNumbers = window.document.getElementById('txtPhnNumber').value.split(',');<br /> <br /> // Call the Web service method to send Client side values.<br /> Demo.WebService.setValues(obj, OnSucceeded); <br /> }<br />

IN ABOVE FUNCTION CHECK THE WAY WE HAVE CREATED OBJECT OF AN EMPLOYEE CLASS. THIS EMPLOYEE CLASS EXISTS IN C# CODE, BUT USING AJAX.NET WE ARE ABLE TO CREATE INSTANCE ON CLIENT SIDE AS WELL.

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



<br /> // This is the callback function that <br /> // processes the complex type returned <br /> // by the Web service.<br /> function OnSucceeded(result,userContext, methodName)<br /> {<br /> if(methodName == "getDefaultData")<br /> {<br /> window.document.getElementById('txtEmpName').value = result.name;<br /> window.document.getElementById('txtAddress').value = result.Address; <br /> window.document.getElementById('txtCity').value = result.City;<br /> window.document.getElementById('txtZipCode').value = result.zip;<br /> var phnNum = null;<br /> for(var j = 0 ; j < j ="="" phnnum =" result.phoneNumbers[j];" phnnum =" phnNum" value =" phnNum;">

Download Demo Code here ---> DealingWith_ComplexTypes.zip