This project is read-only.

First read Setup.

Creating a Server Side AJAX method (in the .aspx.cs file)

  1. In the code behind for your .aspx page, change your page to inherit from Web.Ajax.Page
  2. Add a static Method to your page class and annotate with the Ajax attribute
using Web.Ajax;

public partial class Default : Web.Ajax.Page
{
    [Ajax(Name="Ajax.SampleMethod")]    //The Name identifies the method on the client
    public static int SampleMethod(int a, int b)
    {
        return a*b;
    }
}

Calling the AJAX method from the client (in the .aspx file)

  1. Add a button with the onclick event="ClickMe();"
<input type="button" onclick="ClickMe();" value="Call Ajax Method" />
  1. Add the following Javascript:
<script type="text/javascript">
    function onAjaxComplete(r)
    {
         alert('Data from the server: ' + r);
    }

    function ClickMe()
    {
          //An extra parameter is available on the client providing a javascript method
          //to call once the ajax request has completed.
          Ajax.SampleMethod(5, 10, onAjaxComplete);
    }
</script>


Error Handling Design Pattern

Using the library an AJAX method can return any complex type. Whatever object is returned by the server side AJAX method gets passed to the oncomplete method on the client.

However for error handling design consistency, there is a class supplied in the library called SimpleResonse that you can use.

On the Server side
//Sample Server Error A
[Ajax(Name="Ajax.SampleMethod")]    
public static SimpleResponse SampleMethod(int a, int b)
{
    var res = new SimpleResponse();
    try
    {
        //uncomment the following line to see how an exception is handled
        //throw new Exception("Oops an error occurred on the server!");
        res.Data = a * b;
    }
    catch (Exception e)
    {
        res.Success = false;
        res.Message = e.Message;
    }
    return res;
}
On the Client side
<script type="text/javascript">
   function onAjaxComplete(r) 
   {
        if (!r.Success) 
        {
	    alert(r.Message);
	    return;
	}
	alert('Data from the server:' + r.Data);
    }

    function ClickMe()
    {
          //An extra parameter is available on the client providing a javascript method
          //to call once the ajax request has completed.
          Ajax.SampleMethod(5, 10, onAjaxComplete);
    }
</script>


If you want to use this pattern for error handling there is a static method on the SimpleResponse class which takes a delegate. Using this can save a lot of time and code typing try catch blocks. Whatever is returned by the delegate is set on the Data property of the SimpleResponse.
//Sample Server Error B, functionallly equilavent to 'Sample Server Error A' above
//but uses a shorter syntax
[Ajax(Name="Ajax.SampleMethod")]    
public static SimpleResponse SampleMethod(int a, int b)
{
    return SimpleResponse.Get(() => {
        //uncomment the following line to see how an exception is handled
        //throw new Exception("Oops an error occurred on the server!");
        return a * b;
    });
}

Calling AJAX methods in another class

This sample shows how to register AJAX methods from another class on the page. (useful if you want to put your AJAX methods in another dll)
  1. Your page class must inherit from Web.Ajax.Page
  2. Call Ajax.RegisterAjaxMethods in the Page_Load method to register all AJAX methods on the type.
Note: The AJAX method name must be unique on the class (i.e. operator overloading is not supported for AJAX methods)
using Web.Ajax;

public class AjaxMethods
{
    [Ajax(Name = "Ajax.SampleMethod")]    
    public static SimpleResponse SampleMethod(int a, int b)
    {
        return SimpleResponse.Get(() => {
	    return a * b;
	});
    }
}

public partial class Default : Web.Ajax.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Ajax.RegisterAjaxMethods(this, typeof(AjaxMethods));
    }
}



Last edited Dec 13, 2012 at 11:02 AM by dpembroke, version 8

Comments

No comments yet.