Understanding AjaxEvents in Coolite ASP .NET

In the first tutorial in this series we created a very basic Hello form that relied on JavaScript for its core.  We also saw how easy it was to build a very clean and modern looking form using Coolite.  But what are there things called AjaxEvents.

Going to the Coolite website we find that, as with most of Coolite, there is a total lack of documentation as to what AjaxEvents are, although there are samples showing how to use them.  Based on these examples I would say they are simple postback requests that can be used to post data to the server.

They are able to “target” a specific form (they default to the form they are in) and send the current state of the items in that form to the ASP .NET code behind where they can be operated on as desired.  These requests are then able to fire the events of other controls that have events defined (ex Grid, Store). In addition, you are able to configure an event mask for while the request is in process. This helps the user know that “something is happening”.

So to begin here is a screenshot of code from the first tutorial, but I have cut the JavaScript out and removed the Listeners node from the Button
image

The first step is to update the Button markup as such:

<Buttons>
  <ext:Button ID="btnSubmit" runat="server"
   Text="Submit" Icon="Accept">
    <AjaxEvents>
      <Click OnEvent="btnSubmit_Click">
      </Click>
    </AjaxEvents>
  </ext:Button>
</Buttons>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Very similar to the node (and in fact these can be combined with a listener, return false, will stop the request), we are saying that “when the Click event occurs, create an AjaxEvent which is handled by the handler btnSubmit_Click in the code behind”.  This what our handler could look like:

protected void btnSubmit_Click(object sender,
     AjaxEventArgs ev)
{
     Ext.Msg.Alert("Alert",
         string.Format("Hello {0}", txtName.Text)
     ).Show();
}

Notice that we are using the AjaxEventArgs type for the EventArgs type. This is a special event args that contains a few extra properties that can be of use. Most notably the ExtraParam and ExtraParamnsResponse properties. The former allows you to send this via the Ajax call that may not be contained in controls you can access.

The final piece of this application is the event mask. This is a very simple operation so we dont really need a mask. Masks are very useful to for stopping the user from interacting with the page or parts of the page while an action is in progress. With Coolite these are easily definable and fit well with the application.

First add a call to “Thread.Sleep(1000);” to you handler function so that you will get a chance to see the mask we are doing to define. Return to the Button code and update it as such:

<ext:Button ID="btnSubmit" runat="server"
    Text="Submit" Icon="Accept">
    <AjaxEvents>
        <Click OnEvent="btnSubmit_Click">
            <EventMask Msg="Generating Message" ShowMask="true"
                Target="CustomTarget" CustomTarget="fp1" />
        </Click>
    </AjaxEvents>
</ext:Button>

The two key properties in the tag are ShowMask and Msg.  The former states that when this event is active we do want to show the mask.  The later defines what message the user will see while the event is in progress.  In addition, I have defined the Target as CustomTarget which allows me to specify which section will be grayed out, by default it is the entire page.  In this case I am specifying the control with the ID of “fp1” which is the FormPanel all of this is sitting inside of.  The end result is when you are waiting for the name to come back, your form should look like this:

image

To conclude, this article focused on using AjaxEvents with Buttons and how to control the EventMask.  Remember that you can do a lot more with AjaxEvents as they can be applied to most any control.  You just need to tweak things sometimes and always check your pages that the calls are getting the right state data from the controls.  Most of my testing has been with FormPanels and I have found that things not inside FormLayouts are often not submitted for whatever reason.

AjaxEvents are a big reason why I enjoy using Coolite with webforms over MVC; because I can take advantage of events are server side code in C# as opposed to writing more JavaScript.  But using these two posts you should understand that your code will not be that different in most cases, regardless of which approach you use.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Advertisements

One thought on “Understanding AjaxEvents in Coolite ASP .NET

  1. Good one. Hats Off! You saved me countless hours of trying to make sense out of the chaos called “coolite documentation”

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s