AJAX-enable your existing Asp.net application in under 30 seconds.

Hi Joel,


I've been playing around with MagicAjax from http:www.magicajax.net-it's only drawback is that until the latest 0.3.0 version (not tried this yet) asp.net client side validators did not work with this framework.


How about Anthem's? Any validation control issues/other drawbacks?


Thanks again for your post!

 

Lately I've been playing with this neat little AJAX library for Asp.net - Anthem.net. I was amazed at how quick and easy it was to AJAX-enable my existing Asp.net applications using Anthem.net. Anthem.net requries absolutely zero JavaScript knowledge.

Anthem.net works in both 1.1 and 2.0, giving you a hands off aproach to AJAX. It mimics the functionality of standard server side Asp.net. Anthem.net does allow you full access and control via JavaScript if you need.

Ok, well talk is cheap, so let me show you just how easy it is...

Asp.net Example Code
<%@ Page Language="C#" AutoEventWireup="true" %>

<script runat="server">
protected void SubmitButton_Click(object sender, EventArgs e) {
lblFullName.Text = (FullName.Text != "") ? FullName.Text : "n/a";
lblEmailAddress.Text = (EmailAddress.Text != "") ? EmailAddress.Text : "n/a";
lblMessage.Text = (Message.Text != "") ? Message.Text : "n/a";

pnlDone.Visible = true;
}
</script>

<form id="form1" runat="server">

Full Name: <asp:textbox runat="server" id="FullName" />
Email Address: <asp:textbox runat="server" id="EmailAddress" />
Message: <asp:textbox runat="server" id="Message" />
<asp:button runat="server" id="SubmitButton" text="submit" onclick="SubmitButton_Click" />



<aspanel id="pnlDone" runat="server" visible="false">
<h3>Thank You!</h3>
Full Name: <asp:label runat="server" id="lblFullName" font-bold="true" />
Email Address: <asp:label runat="server" id="lblEmailAddress" font-bold="true" />
Message: <asp:label runat="server" id="lblMessage" font-bold="true" />
</aspanel>

</form>


Anthem.net Example Code
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>

<script runat="server">
protected void SubmitButton_Click(object sender, EventArgs e) {
lblFullName.Text = (FullName.Text != "") ? FullName.Text : "n/a";
lblEmailAddress.Text = (EmailAddress.Text != "") ? EmailAddress.Text : "n/a";
lblMessage.Text = (Message.Text != "") ? Message.Text : "n/a";

pnlDone.Visible = true;
pnlDone.UpdateAfterCallBack = true;
}
</script>

<form id="form1" runat="server">

Full Name: <asp:textbox runat="server" id="FullName" />
Email Address: <asp:textbox runat="server" id="EmailAddress" />
Message: <asp:textbox runat="server" id="Message" />
<anthem:button runat="server" id="SubmitButton" text="submit" onclick="SubmitButton_Click" /><br /> </div>



<anthemanel id="pnlDone" runat="server" visible="false">
<h3>Thank You!</h3>
Full Name: <asp:label runat="server" id="lblFullName" font-bold="true" />
Email Address: <asp:label runat="server" id="lblEmailAddress" font-bold="true" />
Message: <asp:label runat="server" id="lblMessage" font-bold="true" />
</anthemanel>

</form>

Can you spot the difference? All I had to do was register the anthem assembly at the top of the page, change the button and panel to anthem button and panels and add one piece of code "pnlDone.UpdateAfterCallBack = true;" to tell the client to update this panel.

Anthem.net allows you to do other neat stuff, there's <STRIKE>little no documentation so you have to dig through their examples (download the package from sourceforge). Here's a neat little example of how easy it is to push a simple alert box to the client.

Anthem.Manager.AddScriptForClientSideEval("alert('done.')");



original article: http://joel.net/me/weblog.aspx?weblogs_show=4595ab29-ae3a-4ef9-a846-a33d057bbf0d
anthem.net: http://anthem-dot-net.sourceforge.net/



Joel Thoms

DiscountASP.NET
http://www.DiscountASP.NET

 

The test's I've done with it seem to work nicely with the validation controls. I need to play a little more with it though.

I previously was playing with 'atlas', but had to dump it because they don't have a live license. I saw Anthem.net supports the 'viewstate' modification and that interested me.

You also couldn't call atlas methods from inside a UserControl, you can with Anthem.net. I was really amazed with the ease of use.

Do you have any example code you could post for magicajax.net? I'm sure everyone here would love to see it also.


Joel Thoms

DiscountASP.NET
http://www.DiscountASP.NET

 

Hi Joel!

Thanks for the thoughtful post. It's always nice to hear about cool technologies that others are using. I've been holding off on diving into AJAX on the concern that it would be more trouble than it's worth, but with your tip I think I will get started! Thanks again!

Jeremy

 

Hi Joel - no problem - here's a code example for MagicAjax.net in vb.net.
To setup the library for use first review theinstructions &amp; documenation at MagicAjax.net- there isn't a lot but it's worth reading first.

You can check out this demo workinghere.

Here'sthe aspx file (which has both normal ASP.Net postback functionality and MagicAjax functionality):
First register the ajax assembly:
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>


Regular ASP.Net
<table>
<tr>
<td valign="top">
Enter Some Text:</td>
<td><asp:TextBox id="txtInput" runat="server" TextMode="MultiLine" Height="150px" Width="400px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="right"><asp:Button id="btnSubmit" runat="server" Text="Submit"></asp:Button></td>
</tr>
<TR>
<TD>You Entered:</TD>
<TD>
<asp:label id="lblResult" runat="server" font-bold="true"></asp:label></TD>
</TR>
</table>

In the codebehind file for the btnSubmit click event:
Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If txtInput.Text <> "" Then
lblResult.Text = txtInput.Text
Else
lblResult.Text = "n/a"
End If
End Sub

That's the regular ASP side by side example set up, now for it's Ajax equivalent in the aspx file:

MagicAjax
<ajax:ajaxpanel id="AjaxDemoPanel" runat="server">
<TABLE>
<TR>
<TD vAlign="top">Enter Some Text:</TD>
<TD>
<asp:TextBox id="txtInputAjax" runat="server" TextMode="MultiLine" Height="150px" Width="400px"></asp:TextBox></TD>
</TR>
<TR>
<TD align="right" colSpan="2">
<asp:Button id="btnSubmitAjax" runat="server" Text="Submit"></asp:Button></TD>
</TR>
<TR>
<TD>You Entered:</TD>
<TD>
<asp:label id="lblResultAjax" runat="server" font-bold="true"></asp:label></TD>
</TR>
</TABLE>
</ajax:ajaxpanel>

Then in the codebehind file for the btnSubmitAjax click event:

Private Sub btnSubmitAjax_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmitAjax.Click
If txtInputAjax.Text <> "" Then
lblResultAjax.Text = txtInputAjax.Text
Else
lblResultAjax.Text = "n/a"
End If
End Sub

And that's pretty much it! You just surround your asp.net controls with an ajaxpanel &amp; consume the controlevents as you would normally.

I haven't done much more than this &amp; a chat page (using MagicAjax's MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval function to refresh the page), but I know you can also manipulate javascript programatically in the codebehind file from MagicAjax thus:

MagicAjax.AjaxCallHelper.Write("yourJSFunction();")
MagicAjax.AjaxCallHelper.WriteAlert("Hello!") etc etc!

Hopefully this has whetted the appetite - I'm off now to try Anthem!

Ken Tilley

 

Hrm. those controls definately seem interesting. They seem to operate in a similar way to the Anthem.net controls. I definately like the way both of these libraries function.

Thanks for the example!


Joel Thoms

DiscountASP.NET
http://www.DiscountASP.NET