Using Ajax Professional.NET

Authored By: Joseph Guadagno


Questions or Comments, please send them to

Enabling the Website


Add into the web config the required httpHandlers within the <system.web> section



<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>




Add a reference to the AjaxPro library

Enabling the Page

CS File


Register the page for use with the AjaxPro library. This creates the JavaScript files on the server for the class and methods.  The syntax is AjaxPro.Utility.RegisterTypeForAjax(GetType(Namespace.ClassName)) (VB)


AjaxPro.Utility.RegisterTypeForAjax(typeof(Namespace.ClassName)) (C#)


C# Sample

private void Page_Load(object sender, System.EventArgs e)


// Put user code to initialize the page here




Visual Basic Sample.

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        'Put user code to initialize the page here


    End Sub

Enabling a Method

Once you have Ajax-enabled the page and website, Ajax-enabling a method is quite simple.  The only item that is required is to add the AjaxMethod attribute to the class.

CS File


public string GetServerTime()


return DateTime.Now.ToString();


VB File

<AjaxPro.AjaxMethod()> _

Public Function GetServerTime() As String

    Return DateTime.Now.ToString()

End Function



Within the HTML designer, add the following line to include the JavaScript library to the page.  It is recommended to name the JavaScript file, the same as the web page name.

<script language="javascript" src="WebForm1.js"></script>

JS File

The JavaScript file contains the calls to the server.  In order to call the ASP.NET method, you follow the following syntax:

namespace.classname.methodname (params, callback_function)


The params can be any number of parameters but should match the signature of the ASP.NET method.  Please note the current version of AjaxPro.Net library does not support overloaded methods.

The callback_function is optional but stronger recommended.


function GetServerTime()




function GetServerTime_Callback(response)


Label1.innerHTML = response.value;



When a callback function is used, which is strongly recommended, a response object will be passed as the only parameter.  The response object contained two (2) objects



The returned value from the ASP.NET method


If not null, an object containing error information


Error Object


The message text, Err.ToString()


The type of Exception


A full stack trace


The page source that generated the error.



Use a JavaScript file.  This will enable you to Debug any problems within the Visual Studio IDE.


Use the callback function

function GetServerTime_Callback(response)



if (response.error != null)


            // Display the error




      var saveResults = response.value;

      if (saveResults != "")


            // Nothing was return



      // Work with the response

Label1.innerHTML = saveResults;



Populating a Drop Down List, SELECT element

function GetTeamList(response)



var teamsList = document.getElementById("ctrlContent__ctl0_ucProfile_dropTeam");


      //if the server side code threw an exception

      if (response.error != null)


            alert("A problem occurred in Profile:LoadTeams\n" + response.error.Message); //we should probably do better than this




      var teams = response.value; 

      //if the response wasn't what we expected 

      if (teams == null || typeof(teams) != "object")


            alert('A problem occurred in Profile:LoadTeams');




      teamsList.options.length = 0; //reset the teams dropdown    


      //note that this is JavaScript casing and the L in length is lowercase for arrays

      teamsList.options[teamsList.options.length] = new Option("", "");

      for (var i = 0; i < teams.Rows.length; ++i)


          teamsList.options[teamsList.options.length] = new Option(teams.Rows[i].team_name, teams.Rows[i].team);      

            //teamsList.options[teamsList.options.length] = new Option(teams[i].team_name, teams[i].team);      




The example above assumes that the ASP.NET method returns a DataTable. If a DataSet  is returned, preface the .Rows with .Tables[0].

Sending a DataSet to the Server


// Create the DataSet

var ds = new Ajax.Web.DataSet();


// Create a DataTable

Var dt = new Ajax.Web.DataTable();


// Add the columns

      dt.addColumn("NodeId", "System.Int");

      dt.addColumn("ParentId", "System.Int");

      dt.addColumn("MenuText", "System.String");

      dt.addColumn("StatusText", "System.String");

      dt.addColumn("NavigateUrl", "System.String");

      dt.addColumn("LookId", "System.String");

      dt.addColumn("LeftImage", "System.String");

      dt.addColumn("LeftHoverImage", "System.String");

      dt.addColumn("RightImage", "System.String");

      dt.addColumn("RightHoverImage", "System.String");


      // Create an populate the row

      var drToAdd = new Object();

      drToAdd.NodeId = document.getElementById("txtNodeId").value;

      drToAdd.ParentId = document.getElementById("txtParentId").value;

      drToAdd.MenuText = document.getElementById("txtMenuText").value;

      drToAdd.StatusText = document.getElementById("txtStatusText").value;

      drToAdd.NavigateUrl = document.getElementById("txtNavigateUrl").value;

      drToAdd.LookId = document.getElementById("txtLookId").value;

      drToAdd.LeftImage = document.getElementById("txtLeftImage").value;

      drToAdd.LeftHoverImage = document.getElementById("txtLeftHoverImage").value;

      drToAdd.RightImage = document.getElementById("txtRightImage").value;

      drToAdd.RightHoverImage = document.getElementById("txtRightHoverImage").value;


      // Add the rows



      // Add the table to the DataTable