Oct 17 2006

Starting with Ajax.NET

Posted by admin under Ajax

My journey in Ajax land continues. As I have said here in by blog I am not sure Atlas is the way to go. In short - I have learned that the most complex (and bloated) ASP.NET server controls such as the datagrid - but also some design time controls such as the datasource controls etc are not very useful to me. I often need full control in how the HTML is generated so I kind of have a feeling Atlas is not my cup of tea.

I think the same can be applied to Ajax frameworks, cause when it comes to such for ASP.NET I have learned there are two types:

- the "all in one" - you typically (at design time) wrap the controls with some sort of UpdatePanel control - and from that the framework is able to hook everything u for you - even generate all Javascript needed at the client

- the "transport" helper type - which do indeed give you some help with the actual Javascript functions for calling  and handling errors etc, but pretty much leaves it up to you on how to interpret and handle the result on the client side (meaning you need to write javascript for that)

And as you might understand, I quite don't like the first approach. Sooner or later you will need much deeper control on the client side and personally (for now that is) all I want is some help on data transport, I don't mind (rather the opposite) to write some JS handling code myself.

So - here's my first look at Ajax.net

Ajax.net is developed by Michael Schwartz - it's free to use - and from what I understand it's very stable. Works with ASP.NET 2.0 as well as 1.1. I do not aim to write a fullblown tutorial on how to create your first Ajax.NET application, but instead just walk you through how I created mine - maybe it's too easy for you, maybe it's too hard for you, but hopefully it might be of help for someone:

1. Download the Dlls

2. Download the toolkit with lots of examples

Now, my basic needs was the following:

  • Present some data in a table
  • When clicking a button or something a new value should be fetched from server (using async calls - i.e Ajax)
  • During update it should display an image - loading
  • Display the value
  • If new value we want to blink the new value for 3 seconds or so

And when running it looks like this:

And when clicking on update it shows an update gif () and shows the result

If we wait for a minute and run again - it will show 32 and also the new value will blink 3 times.

So lets dive into the code - first the aspx file:



    <div>
    <br />
    <span onclick="MyUpdate();" style="background-color:DarkGray">Click me to update</span>
    
    </div>
    <table border="1">
    <tr>
    <td>Something</td>
    <td>Hello there bla bla</td>
    </tr>
    <tr>
    <td>Other important stuff</td>
    <td>Again more bla bla</td>
    </tr>
    <tr>
    <td>Current minute is<span id="loading2" style="visibility:hidden">hello</span></td>
    <td><img id="loading" src="images/ajax-loader.gif" style="visibility:hidden"/><asp:Label ID="lblMinute" runat="server"></asp:Label></td>
    </tr>
    <tr>
    <td>That was a stupid example</td>
    <td>However functionalitywise it's what I want to test</td>
    </tr>
    </table>

As you can see - when clicking on the Span we call a Javascript function called MyUpdate - we'll get to that in a minute, first we have a look at the codebehind (cs) code:



public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }

    [AjaxPro.AjaxMethod]
    public int GetCurrentMinute()
    {
        System.Threading.Thread.Sleep(2000);
        return DateTime.Now.Minute;
    }
}

As you can see I am faking a very long operation - GetCurrentMinute - by sleeping for 2 seconds before returning. However - that's the function we are gonna call from the JavaScript function MyUpdate. We therefore attribute the function - [AjaxPro.AjaxMethod] - and by that telling Ajax.NET to "please generate a wrapper in JavaScript to call this function from the client side".

Now back to the Javascript:



function MyUpdate()
{
    Hide();
    _Default.GetCurrentMinute(MyUpdate_Callback);
}
function MyUpdate_Callback(res)
{
    var lblMinute = document.getElementById("lblMinute"); 
    
    var newval = res.value;
    Show();
    if ( lblMinute.innerHTML != newval )
    {
        lblMinute.innerHTML = newval;
        blink_Blink3Seconds("lblMinute");
    }    
    
}

The function MyUpdate first calls a function called Hide (nothing special here, we hide the old value and show the "updating" image ). We can then start the call to the server - Ajax.NET has created wrappers for us, so _Default.GetCurrentMinute ius available (_Default is because the class (page) is called that).

We also specify a callback function - MyUpdate_Callback. Which will be called once the new data has arrived. And we can then just set the new value :

lblMinute.innerHTML = res.value

is actually all that's needed but we do some extra stuff, hiding the updating image, showing the result, and also blinking for three seconds.

All in all, so far I have found Ajax.NET to be the best framework for  Ajax programming with ASP.NET - please download the attached solution and try it out yourself. And you can bet there will be more examples published - I have more types of problem needed to be solved.

 


Attachments