Ajax with Ext.Net using DirectEvent, DirectMethod, Listeners

This Blog moved to http://webapps-in-action.com/

In Ext.Net there are currently three main kinds for ajax interactions from client/browser to server/backend: DirectEvent, DirectMethod and Listeners.
This post will show you the simple usage and gives you an idea of the round trip from C# Codebehind (Objects/Parameters) via JSON to ExtJS running in Browser and back.

Let's start with the definitions from Ext.Net:

DirectMethod: A DirectMethod provides the ability to call server-side .NET Methods from client-side JavaScript code.

Sample for DirectMethod (recognized by the [DirectMethod] Annotation)

<script runat="server">
    [DirectMethod]
    public void LogCompanyInfo(string name, int count)
    {
        string template = string.Concat("{0} has approximately {1} employees.");
        string[] employees = new string[4] { "1-5", "6-25", "26-100", "100+" };        
        this.lblAjax.Text = string.Format(template, name, employees[count]);
    }
</script>

<ext:Label ID="lblAjax" runat="server" Text="AJAX ME" />
<ext:Button runat="server" Text="Submit">
    <Listeners>
        <Click Handler="Ext.net.DirectMethods.LogCompanyInfo('Ext.NET, Inc.', 0);" />
    </Listeners>
</ext:Button>

DirectEvent: A action will trigger a Ajax request to the server and return it to the browser.

Sample for DirectEvent (recognized by the DirectEventArgs in signature)

<script runat="server">
 protected void UpdateMsg(object sender, DirectEventArgs e)
 {
    X.Msg.Notify("Current Server Time: ", DateTime.Now.ToLongTimeString()).Show();
 }
</script>

<ext:Button ID="btnDirectEvent" runat="server" Text="Click Me">
<DirectEvents>
 <Click OnEvent="UpdateMsg">
  <Confirmation ConfirmRequest="true" Title="Confirm Box" Message="Want to see the server time?" />
 </Click>
</DirectEvents>
</ext:Button>  

Listeners: A "Listener" is a client-side event Handler. The event handler will call a client-side JavaScript function if the Listener has been configured.

Sample for a Listener

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.btnListener.Listeners.Click.Handler = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";
    }
</script>

<ext:Button ID="btnListener" runat="server" Text="Execute Hanlder set by CodeBehind" />

Let's see with Firebug, what's happening on HTTP:

coming soon...