Preview of AjaxMethods
Thursday, November 27, 2008 posted by geoffrey.mcgill | 0 Comments
A huge new feature to be introduced with the next release (v0.7) of the Coolite Toolkit is the [AjaxMethod] Attribute.Converting a standard server-side Method into an "AjaxMethod" enables the Method to be called directly from your client-side JavaScript. No PostBack, no page flicker and all communication is performed through lightweight AJAX + JSON.
The [AjaxMethod] Attribute can be applied to any
public or public static .NET server-side Method (C#, VB, etc.).An [AjaxMethod] is similar in functionaltiy to the ASP.NET [WebMethod] Attribute except an AjaxMethod is optimized to serialize and return data in an easily consumed JSON response.
Getting Started Basic Example
The following code sample demonstrates a simple AjaxMethod returning a string to the client.
Example
[AjaxMethod]Once the "SayHello" Method has been tagged with the [AjaxMethod] Attribute, the Method is now available to be called directly from JavaScript. The following sample demonstrates calling "SayHello" by clicking a hyperlink.
public string SayHello(string text)
{
return "Hello " + text;
}
Example
<a href="#" onclick="Coolite.AjaxMethods.SayHello('World')">Click Me</a>Once clicked, the SayHello JavaScript function will make an Ajax request back to the server and invoke the server-side SayHello Method. The string "Hello World" would be sent back to the browser packaged in a lightweight JSON object.Example
{result:"Hello World"}Calling SayHello returns a total response size of less than 25 characters... that's tight.Success Handling
If the server-side AjaxMethod returns an object, we need to provide a way of handling that response. As the last parameter of the JavaScript function you can pass in an optional config object with a
success handler.Lets elaborate on our example by adding a <Click> Listener to an <ext:Button> Control and include the optional config object with a
success function defined to alert the result.Example
<ext:Button ID="Button1" runat="server" Text="Say Hello">
<Listeners>
<Click Handler="
Coolite.AjaxMethods.SayHello('World', {
success: doAlert
});" />
</Listeners>
</ext:Button>
<script type="text/javascript">
var doAlert = function (result) {
alert(result);
}
</script>
Details
So, lets break this down a bit. First off, the argument signature for the
SayHello JavaScript function would be described as follows:Example
SayHello(string text, object config)The
text argument is pretty simple, as it's the string sent into the server-side SayHello C# Method.The
config argument is a JavaScript object literal made up of a collection of name:value pairs. The JavaScript object literal is similar in concept to .NET Anonymous types. It's a "thing" (ie. object) with some properties.In the example above, the
success property is set with the name of a JavaScript function to call upon a successful response from the server.Whatever object is returned from the server-side AjaxMethod is serialized into JSON, and passed as the return
result into the success JavaScript function. Using our SayHello example, the result is passed to the doAlert JavaScript function.The
success function can also be coded inline within the config object.Example
<ext:Button ID="Button1" runat="server" Text="Say Hello">
<Listeners>
<Click Handler="
Coolite.AjaxMethods.SayHello('World', {
success: function (result) {
alert(result);
}
});" />
</Listeners>
</ext:Button>
Summary
Adding the [AjaxMethod] Attribute to your server-side Method enables the Method to be called from client-side JavaScript running in a browser, without having to perform a PostBack. The request from the client to the web server is made using Ajax and the response from the server back to the client is packaged as a JSON object.
We're just scratching the surface here, so in future posts we'll dive deeper into performance tuning and advanced AjaxMethod configuration options.
More information and code samples demonstrating AjaxMethods are available in the recently updated Examples Explorer.
The Coolite Toolkit is a suite of powerful Ajax enabled ASP.NET Web Controls which simplify the development of Web Applications. The Coolite Toolkit includes the Ext JS JavaScript Framework and together are dual licensed with an open-source "Community" option or closed-source "Professional" version.
