Implementing AJAX in ASP.NET

Dealing with Types

Returning complex types

The Ajax wrapper is capable of handling more than just the integer our ServerSideAdd function returned. It currently supports integers, strings, double, booleans, DateTime, DataSets and DataTables, as well as the primitive types of custom classes and arrays. All other types have their ToString values returned.

Returned DataSets work much like real .NET DataSet. Given a server side function which returns a DataSet, we could display the contents client side via:

<script language="JavaScript">
//Asynchronous call to the mythical "GetDataSet" server-side function
function getDataSet(){
  AjaxFunctions.GetDataSet(GetDataSet_callback);   
}
function GetDataSet_callback(response){
  var ds = response.value;
  if(ds != null && typeof(ds) == "object" && ds.Tables != null){
    var s = new Array();
    s[s.length] = "<table border=1>";
    for(var i=0; i<ds.Tables[0].Rows.length; i++){
      s[s.length] = "<tr>";
      s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>";
      s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";
      s[s.length] = "</tr>";
    }
    s[s.length] = "</table>";
    tableDisplay.innerHTML = s.join("");
  }
  else {
    alert("Error. [3001] " + response.request.responseText);
  }
}
</script>

Ajax can also return custom classes. All that is required is that the class be marked with the Serializable attribute. Given the following class:

[Serializable()]
public class User{
  private int _userId;
  private string _firstName;
  private string _lastName;

  public int userId{
    get { return _userId; }
  }
  public string FirstName{
    get { return _firstName; }
  }
  public string LastName{
    get { return _lastName; }
  }
  public User(int _userId, string _firstName, string _lastName){
    this._userId = _userId;
    this._firstName = _firstName;
    this._lastName = _lastName;
  }
  public User(){}
  [AjaxMethod()]
  public static User GetUser(int userId){
    //Replace this with a DB hit or something :)
    return new User(userId,"Michael", "Schwarz");
  }
}

We would register the GetUser proxy via a call to the RegisterTypeForAjax:

private void Page_Load(object sender, EventArgs e){
  Utility.RegisterTypeForAjax(typeof(User));
}

Allowing us to asynchronously call the GetUser in client-side code with code such as:

<script language="javascript">
function getUser(userId){
  User.GetUser(GetUser_callback);
}
function GetUser_callback(response){
  if (response != null && response.value != null){
    var user = response.value;
    if (typeof(user) == "object"){         
      alert(user.FirstName + " " + user.LastName);
    }
  }
}
getUser(1);
</script>

The value returned in the response is actually an object which exposes the same properties as a server-side object (FirstName, LastName and UserId).

Custom Converters

As we’ve seen, the Ajax .NET wrapper is able to deal with many different .NET types. However, aside from a handful of .NET classes and the built-in types, the wrapper simply calls ToString() on anything it can’t properly return. To get around this, the Ajax .NET wrapper allows developers to create object converters which can be used to smoothly communicate complex objects between the server and the client.

This guide will be updated with additional information on custom converters shortly (sorry).

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Perl - The only language that looks the same before and after RSA encryption.” - Keith Bostic