AjaxPro.NET is a well-known open source framework, which is based on the server-side techniques in support of different versions of ASP.NET web applications. The framework can create proxy classes on client-side JavaScript to invoke methods on the web server with full data type support working on all common web browsers, including mobile devices. One of the most worthy features of this framework is that it supplies a developer with only one method for call and, therefore, dramatically increases the productivity effect.

Since the downloaded materials have been shipped with a guide and an excellent Visual Studio Add-in (named 'AjaxProVSTemplate.vsi'), we do not dwell on its details here, but make room for the following sample. For another basic usage of AjaxPro.NET, you can refer to my old article Building an AJAX Based Web Chatting Application using ASP.NET 2.0.

Sample 1

To achieve our goal in this article, you should keep to the following steps.

·         Add the reference to AjaxPro.2.dll (automatically done by the template).

·         Register the page for AjaxPro.2.dll using AjaxPro.Utility.RegisterTypeForAjax(typeof(Namespace.class)).

·         Create a web service to be called using the Ajax method.

·         Add the specific attribute to the method with [AjaxPro.AjaxMethod].

·         Add the JavaScript function to call the method.

·         Create the call back function to deal with the returned data.

1. Create an AjaxPro.NET-Enabled sample Web Site

Launch Visual Studio 2005 and then select menu "File | New Website…." In the subsequent "New Website" dialog select the template named "Ajax.NET Professional Web Site" and name the project AjaxPro2Service, as well as choose Visual C# as the built-in language.

Next, modify page Default.aspx as illustrated in Figure 3 (here we give the runtime snapshot).

Figure 3: Call Web Services via Ajaxpro.NET framework

When you enter the name of the car producer (and optional car model) and the year, you will see an alert box with the current price of the car.

2. Create a Web Service

Right click the project and choose "Add new item." In the "Add new item" dialog box select Web Service and name the service CarService.asmx.

Open file CarService.cs and add a WebMethod named getCarValue (see Listing 3).

Listing 3

public class CarService: System.Web.Services.WebService
{
  [WebMethod]
  public int getCarValue(string strCarMake, string strCarModel, int strCarYear)
  {
    int nReturn = 0;
    if (strCarMake == "Honda")
      nReturn = 30000;
    else
      nReturn = 20000;
    if (strCarModel == "Pilot")
      nReturn += 10000;
    int nDepreciation = (System.DateTime.Now.Year - strCarYear) * 2000;
    nReturn = nReturn - nDepreciation;
    return nReturn;
  }
}

Here, WebMethod getCarValue can figure out the price of the given type of car.

3. Create an Ajax method to call the Web Service

According to the analysis above, we can create an AjaxPro.NET-styled method to call the web service defined in step 2.

Listing 4

[AjaxPro.AjaxNamespace("AjaxExamples")]
public partial class _DefaultCS: System.Web.UI.Page
{
  [AjaxPro.AjaxMethod]
  public int getCarValue(string make, string model, int year)
  {
    ServiceSpace.CarService newCar = new ServiceSpace.CarService();
    int v = newCar.getCarValue(make, model, year);
    return v;
  }
  protected void Page_Load(object sender, EventArgs e)
  {
    // Register Ajax.NET methods from this class
    AjaxPro.Utility.RegisterTypeForAjax(typeof(_DefaultCS));
  }
}

There' is nothing special to be emphasized here except for the simple formula-like coding based on the framework.

4. Call Ajax methods from client side

Now comes the last step—calling the Ajax method defined above from the client side. When you click the button Get Value in Figure 2, the browser will invoke its event handler as in Listing 5.

Listing 5

function btnGetValue_onclick()
{
  AjaxExamples.getCarValue(document.getElementById("txtMake").value,
    document.getElementById("txtModel").value, document.getElementById(
    "txtYear").value, getCarValue_callback);
}
 
//callback we told AjaxPro.Net to pass the response to
function getCarValue_callback(response)
{
//if the server side code threw an exception
  if (response.error != null)
  {
    alert("The server side error! Maybe your input is out of scope." +
      response.error);
    return ;
  }
  var price = response.value;
// take the corresponding action
// according to the type of 'response'
  alert(price);
}

For now you are ready to run the sample. Press F5 and you will see the screen like Figure 2. As for the data you should enter, please refer to the definition of WebMethod getCarValue.