ItProjects For You

Handling Complex DataTypes using ASP.NET AJAX

Use of complex data types in Ajax programming is a tricky issue.In many scenarios we need to communicate between the client and server via strings only.In this tutorial 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 in this tutorial.
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;
   public Employee()
   {
   }
   public Employee(string Name,string Address, string City, string zip,
   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";
      }
}

In above class the elements which we need to be accessed in JavaScript are public – note we are not considering any function in a class.We are going to expose a web service to Script Manager for this tutorial.So we also have a web service in demo code called "WebService.asmx".Following two namespaces are required to make a web service Ajax Enabled:

using System.Web.Script.Services;
using System.Web.Script.Serialization;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[GenerateScriptType(typeof(Employee))]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
   public WebService()
   {
   }
   [WebMethod]
   public string setValues(Employee emp)
   {
      return emp.setValues();
   }
   [WebMethod]
   public Employee getDefaultData()
   {
      string[] PhnNum = { "123","222","234" };
      Employee Emp = new Employee("Default Name","Default
      Address","Default City","Default Zip",PhnNum);
      return Emp;
   }
}

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]

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

function _sendDataToServer()
{
   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(',');
   Demo.WebService.setValues(obj, OnSucceeded);
}

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

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

Download sourcecode