Introduction
AJAX is something lots of ASP.NET developers are interested in, but there are a number of AJAX libraries and solutions out there - so which one do you go for?
When looking myself, the criteria I used were:
- support ASP.NET 2.0 as that's what I'm using,
- soak as seamlessly as possible with VS2005, ideally without having to hand-code client-side JavaScript, and
- support ASP.NET functionality as closely as possible.
Having looked at the various AJAX libraries out there (including Atlas), I noticed that the ASP.NET forums were using a library I hadn't seen before (and it's not Atlas!). Web searches led me to Jason Diamond's MyAjax.net which has recently been redesigned and launched on SourceForge.Net as Anthem.NET, so it's now an official OpenSource project. There are also some discussion forums.
Note: It was pointed out in the comments that I had not addressed the issue of cross-browser compatibility, which is obviously quite important! I'm glad to report that Anthem.NET works on IE, FireFox, and Safari (reportedly much better than Atlas, as I write). The developer has even put work into making sure it runs under Mono as well.
Just Another AJAX Library?
So, is Anthem just another AJAX library? No, and I'd even venture [tin helmet on] it's the best one I've seen for ASP.NET. Anthem is so easy to use, it's almost a crime. It ticked all my criteria (it supports both .NET 1.1 and .NET 2.0), and has a number of built-in AJAX-enabled controls. It supports viewstate, so you can get control states and page info back in callbacks. It works seamlessly with web usercontrols, and master pages; and having used it on a live application, I can say it's reasonably stable. Best of all, you won't need to write any JavaScript (or XMLscript).
Getting Athem.Net
First, you need to download Anthem.NET 1.0, which you will find from the links on the main page here. Unfortunately, the DLL is not precompiled in the snapshots, so you will need to extract the projects and compile them to get the DLL.
There are two versions of Anthem, one each for VS2003, and one for VS2005. You'll also find that the Anthem snapshot has a demonstration website included in the file, that demos the various controls and how to use them.
Using Anthem in VS2005
Assuming you've done this and have created the DLL, all you need to do to install Anthem.NET in a web application is add the DLL as a reference to your web application. You can then make the Anthem controls available by creating a new tab in the Toolbox, and use the right-click menu "Choose Items" - click Browse and locate the Anthem DLL.
All the Anthem controls are essentially subclassed ASP.NET controls, so you can use them on a web page just as you would a normal ASP control. In general, if you don't need AJAX functionality, it's better to use the normal ASP.NET controls, as these won't have the HTML overhead.
A Simple First Test
In our first demo page, we are going to use Default.aspx which should have been created for you when you created the website. Let's say, we want to have a "login" button on this page, but we don't want to redirect to another page which shows the login control, we want to unhide a login control so that the response is faster. If we use a traditional ASP.NET postback, the whole page has to be reloaded to make this visible.
To do this with Anthem, we need two Anthem controls: a LinkButton and a Panel. Drag these from your *Anthem* toolbox. Set the 'Text' property of LinkButton1 to "Login". Now, drag an ASP.NET login control from the ASP.NET 'Login' tab, and place it inside Panel1. Using an Anthem Panel control is the simplest way of providing AJAX updates to non-Anthem controls, if needed. Set Panel1's property Visible to false, so that it isn't visible by default.
Now the magic! Double-click the LinkButton on the designer. You should now be in the code editor, with a template LinkButton1_Click function. This is not a postback but a callback function.
Anthem will:
- create the necessary JavaScript on the client,
- bind it to the control's
OnClick event,
- receive the
XMLhttprequest on the server, and
- call the
LinkButton1_Click in your server-side code.
Not only this but you have full viewstate, page and control states loaded. Indeed, you can treat Anthem callbacks exactly like a postback, with only one exception: the only client controls updated are those you specify. To do this, you have to set the Anthem controls' UpdateAfterCallBack property to 'true'. If the control contains other non-Anthem controls (as our Panel1 does), then this will be updated. You can also pre-specify a control as UpdateAfterCallback=true in the designer, if you always want it to update.
Back to our demo - we add the following code to make the Panel1 visible and also update this back in the callback result:
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Panel1.Visible = ! this.Panel1.Visible;
this.Panel1.UpdateAfterCallBack = true;
}
Now, try running this. The page comes up with just the login link. Click the login link, and the callback is sent to the server, which makes Panel1 visible, and returns the updated Panel1 control. Presto, the login control appears without a postback. Look ma, no JavaScript!
To show we have control states passed back, let's try another test. Back in the designer, drag a normal ASP.NET TextBox control onto the web page (below the Panel1 is fine). We will copy the value of this control into the UserName field of the login control when we make it visible, so amend the LinkButton code as follows:
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Login1.UserName = this.TextBox1.Text;
this.Panel1.Visible = ! this.Panel1.Visible;
this.Panel1.UpdateAfterCallBack = true;
}
When you run the code this time, enter some text in the textbox before you click Login. Note, this is passed back in the viewstate, and is available to our callback code.
Another refinement: what if we have a slow connection? the user might click Login to get the page, but a second or two's delay might make them think nothing has happened (especially if the server is loaded). They might click it again, and cause the login control to flick on/off. It's similar to the Order Submit problem where you only want the user to click the Submit button once. Anthem controls like LinkButton and Button have two useful properties: TextDuringCallBack and EnabledDuringCallBack. If we set EnabledDuringCallback to false, the button is disabled during the callback processing time. To give the user some feedback, you can also set TextDuringCallBack=Wait so they know something's happening. If you run this on a local IIS, it's so quick you won't see it, so let's add a delay so it's easier to see:
protected void LinkButton1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
this.Login1.UserName = this.TextBox1.Text;
this.Panel1.Visible = ! this.Panel1.Visible;
this.Panel1.UpdateAfterCallBack = true;
}
Conclusion
I hope this article has whetted your appetite. Anthem.NET is the library that Microsoft should have written, and having looked at Atlas, I found it too complex. It's such an easy way to add AJAX functionality to an ASP.NET website that I'm sure you'll find it as useful as I am already doing!
|
|
 |
 | You are the bomb
layinka | 4:43 21 Mar '09 |
|
|
Thanks for that, i really needed it.
|
|
|
|
|
| multiple anthem.gridview, updateaftercallback not working
Raj Kumar Mittal | 23:38 22 Dec '08 |
|
|
hi, have a page which has multiple anthem gridviews.
i am using templates when user update the data in gridview. a callback occurs, data is saved and grid is rebinded.
but with this process. my only one grid is updated after the callback.
in rest three data got updated but it is not updated in grid. as updateftercallback not working.
all grids has same struture and all has autoupdateaftercallback true even i am again setting it true in code.
can you tell me why is is happening.
Regards
Raj
RajK
|
|
|
|
|
| Looks great!
Jorge Bay Gondra | 4:25 22 Aug '08 |
|
|
|
 | Is this still the best way in 2008?
basementjack | 9:58 2 Jul '08 |
|
|
A friend just pointed me to Anthem and I've tried the examples and it looks awesome!
One thing that was pointed out is that Anthem seems to have come from the .net 1.1/2.0 era.
Is anthem still the way to go with Visual Studio 2008/.net 3.5?
|
|
|
|
|
|
|
It's fully compatible with 3.5 (I am using it with VS2008 now) and I've had no major issues with it - most of the 3.5 updates are language oriented and the web functionality has not changed significantly.
It's really down to preference.. I still use it and not MS Atlas/AJAX because I find it simpler to use. It's not as powerful as all the custom controls - I'd like to use some of those sexy expanding and other Atlas controls now available, so maybe I'll swap in future, but for the present I'm sticking with it.
'Howard
|
|
|
|
|
| Problem in IE6
Priyatam K | 2:37 20 Nov '07 |
|
|
Hi,
I have used Anthem controls in my sample project. Everything works great on my machine in all the browsers(IE6,IE7,Firefox,Safari,Opera), but when I open the same page in IE6 on another machine, the page opens, but when I click on Anthem Image button, application is throwing errors without doing the required functionality. I'm not able to debug this and donno the reason.
If any of you expirenced the same problem and got a solution for it.... please lemme know... it will be very helpful for me... Thanx in advance
Priyatam
|
|
|
|
|
|
|
We might be able to help if we knew what the errors were..
One thing to check is if JavaScript is enabled on the other machine.
'Howard
|
|
|
|
|
|
|
Thanks for responding.
I'm extremely sorry for the late reply.
Yes, Javascript is enabled on that machine. I will give a detail about the errors very soon (it was our client machine). Will try to get the details ASAP.
Thanx once again 
modified on Tuesday, December 18, 2007 2:03:27 AM
|
|
|
|
|
|
|
To handle the exception, I have put in a exception handler in this function, hightlighted the line of code which I inserted. So when openend the site in IE6, an exception occurs and the error message thrown is "Automation server can't create object". I have no idea about this error. I need help... Thanks in advance.
function Anthem_GetXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
if (window.Anthem_XMLHttpRequestProgID) {
return new ActiveXObject(window.Anthem_XMLHttpRequestProgID);
} else {
var progIDs = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < progIDs.length; ++i) {
var progID = progIDs[i];
try {
var x = new ActiveXObject(progID);
window.Anthem_XMLHttpRequestProgID = progID;
return x;
} catch (e) {alert(e.message);
}
}
}
}
return null;
}
|
|
|
|
|
|
|
The code is trying to find and create an XML processor on your client IE.
var progIDs = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
IE6 should have one built in (I think it's Microsoft.XMLHTTP but I'm not sure) - from the exception it sounds as if one of these is present but is corrupted in some way.
If you search on download.Microsoft.com you should find MSXML is available on there somewhere as a download : get the latest version and try reinstall or repair of it.
'Howard
|
|
|
|
|
|
|
Hi Howard,
Thanks much for your quick reply.
Can I replace the Anthem_GetXMLHttpRequest() javascript function with the following ?
function ajaxFunction()
{var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }
catch (e)
{ // Internet Explorer try
{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{ try
{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e)
{ alert("Your browser does not support AJAX!"); return false; } } } }
in Anthem_GetXMLHttpRequest() if there is an exception accessing the first option i.e. Msxml2.XMLHTTP.6.0 the function would throw an alert message and then try to access the next option and so on ... In the above script ajaxFunction() the exception alert message is thrown only if all options are checked and dont work.
Please advise.Is there anything else that you would like to suggest.
Priyatam
|
|
|
|
|
|
|
I'm not an expert in JavaScript so I can't really say if your code is acceptable: for better support try the forums at http://www.anthemdotnet.com
If I were you, I'd be more concerned that the basic AJAX functionality which works on most people's browsers (including IE6, IE7, Safari, Opera, Firefox etc.) doesn't work on your IE6, which strongly suggests you've got a configuration or OS problem.
'Howard
|
|
|
|
|
|
|
Thanks for your reply. I already raised a question in forums, no response yet. So I tried here.
Yes, what you said is correct, but I need to show some message to the user, that is what I'm concerned about.
Thanks for your help.
|
|
|
|
|
| What about Flicker problems ?
sacheen1984 | 21:36 7 Nov '07 |
|
|
Does it provide non flicker interface in update panel, say item added in Anthem List at click of Anthem button.
|
|
|
|
|
|
|
<anthem:Panel ID="Panel1" runat="server">
<anthem:ListBox ID="ListBox1" runat="server">
<anthem:Button AutoUpdateAfterCallBack=true önClick="Button1_Click" ID="Button1" runat="server" Text="Enter" />
CodeBehind
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
ListBox1.Items.Add("Item")
Panel1.UpdateAfterCallBack = True
ListBox1.UpdateAfterCallBack = True
Button1.UpdateAfterCallBack = True
End Sub
It gives me flicker on click of Button1
|
|
|
|
|
|
|
A few points:
1) from the above code there does not seem to be a reason for updating the button - you only need to set UpdateAfterCallBack = true if something about the control has changed.
2) is the listbox inside the panel? if so, call EITHER Panel1.UpdateAfterCallback OR ListBox1.UpdateAfterCallBack - you don't need both
A panel is essentially a DIV - and if it's an anthem panel and you update it, then all the controls inside the panel are also updated (anthem or not).
'Howard
|
|
|
|
|
| Re: What about Flicker problems ?
sacheen1984 | 1:21 8 Nov '07 |
|
|
Thank you Howard
When I tried like Listbox(Anthem) in Panel(anthem) and click on Button(Anthem)
CodeBehind of button click
ListBox1.Items.Add("Item")
ListBox1.UpdateAfterCallBack = True
Then too it gets flicker.Can u please help me out.
Regards
Sachin Nemade
|
|
|
|
|
|
|
Just created a very simple page, one Anthem.Button and one Anthem.ListBox, Added Click event to Button1
Tested - no flicker.
Can you show the html source for the two controls?
'Howard
|
|
|
|
|
|
|
Hi Howard
Following is a code i have written to add an Item to Listbox, whenever i add item flicker gets inside listbox not to page, I have found on Net that it is unavoidable,Is it true?
Html Code
<form id="form1" runat="server">
<anthem:Panel ID="Panel1" runat="server">
<anthem:ListBox ID="ListBox1" runat="server" Width="267px">
</anthem:ListBox>
</anthem:Panel>
<anthem:Button OnClick="Button1_Click" ID="Button1" runat="server" Text="Enter" />
</form>
CodeBehind Code
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ListBox1.Items.Add("Item")
Panel1.UpdateAfterCallBack = True
'ListBox1.UpdateAfterCallBack = True
End Sub
|
|
|
|
|
|
|
This will do exactly the same:
<form id="form1" runat="server">
<anthem:ListBox ID="ListBox1" runat="server" Width="267px">
</anthem:ListBox>
<anthem:Button OnClick="Button1_Click" ID="Button1" runat="server" Text="Enter" />
</form>
[code behind]
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As _
System.EventArgs) Handles Button1.Click
'Add item to listbox
ListBox1.Items.Add("Item")
ListBox1.UpdateAfterCallBack = True
End Sub
'Howard
|
|
|
|
|
| Anthem Panel Control
Praveen029 | 0:50 15 Oct '07 |
|
|
I am using anthem panel control.
I need scrolling from bottom to up, But its displaying top to bottom.
anthem:panel ScrollBars="Vertical" Width="275px" Height="280px" ID="phSMS" runat="server" EnableCallBack="True" Wrap="true"
/anthem:panel
Praveen Kumar
|
|
|
|
|
|
|
Suggest you first try using a normal asp panel control to see if the problem is actually Anthem related. The anthem panel is just a subclass of the asp:Panel control, so it may be here the problem lies.
'Howard
|
|
|
|
|
| google like calendar
Attila Balogh | 22:57 13 Oct '07 |
|
|
Hi,
My idea is the calendar visible after click on the textbox (like in google calendar)... How can I add this event to the textbox?
Thx
Attila
|
|
|
|
|
|
|
There isn't a Date with Calendar dropdown in the Anthem control set although it is possible to create one. Not sure how much work would be involved to make the calendar appear when the textbox is entered.
Alternatively look at the Microsoft ASP.NET AJAX date control which will do what you want 'out of the box':
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx[^]
'Howard
|
|
|
|
|
| anthem.net
manojom | 20:28 3 Oct '07 |
|
|
how to use anthwm 1.5.2
with VS2003.how to install in computer.
this is best
|
|
|
|
|
|
|
Last Updated 26 Feb 2006 |
Advertise |
Privacy |
Terms of Use |
Copyright ©
CodeProject, 1999-2010
