Anthem AJAX框架简单介绍
Anthem，又一款asp.net环境下的开源ajax框架，适用与asp.net 1.1和asp.net 2.0 ，使用起来比较容易上手。Anthem中可异步回发的控件包含了asp.net中的绝大部分控件，全部是继承自原有控件，只是在它们的基础上加了一些ajax特性的支持。
Anthem实现原理很简单，就是当从页面中引发一个回发时，采用XMLHttpRequest对象代替PostBack请求，模仿asp.net PostBack回发时所做的事情，包含页面所有控件的值以及asp.net特殊的隐藏字段比如ViewState。asp.net页面回发时，一个正常的Post back被引发，页面进入它的生命周期，分别引发Init事件、传输控件状态、Load事件、执行验证等等。当服务器端执行完这些之后，Anthem捕获页面中所有的"Anthem"控件的HTML，并使用innerHTML返回给客户端以更新控件。
使用Anthem，除了常用控件需要使用它继承的之外，其他的编程模型基本上跟以前一样，不需要学习新的API什么的。注意在web.config中的区域编码设置必须为utf-8，否则AJAX不会执行（内部报错）。
<globalization requestEncoding="utf-8" responseEncoding="utf-8" />
目前最新版本为：1.5.1 下载地址：http://sourceforge.net/projects/anthem-dot-net
下面的例子将演示使用Anthem来实现控件的显示与隐藏。
首先注册<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>，如果你已经将这些控件拖入了工具箱，就不需要手工写上面的代码了。
<%@ Page Language="C#" %>
<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>PanelsAndVisibility</title>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<h2>Description</h2>
<p>The <code>anthem:Panel</code> control isn't really much more than a fancy <code>div</code>.
It's mostly useful as a container for other controls (even non-Anthem controls)
which can be toggled on and off during a call back.</p>
<h2>Example</h2>
<p>Click the button to toggle the visibilty of the two panels.</p>
<anthem:Panel id="panel1" runat="server" Visible="true" BorderStyle="Solid">
<p>This is <code>Panel 1</code>.</p>
<p>This panel's <code>Visible</code> property is initially set to <code>true</code>
(which is the default).</p>
<p>Click the button and watch it disappear. Click it again and watch it reappear.</p>
<p>There's another panel next to this one with its <code>Visible</code> property
initially set to <code>false</code>.</p>
</anthem:Panel>
<anthem:Panel id="panel2" runat="server" Visible="false" BorderStyle="Solid">
<p>This is <code>Panel 2</code>.</p>
<p>This panel's <code>Visible</code> property is initially set to <code>false</code>.</p>
</anthem:Panel>
<br />
<anthem:Button id="button" runat="server" Text="Click Me!" OnClick="button_Click" />
<script runat="server">
void button_Click(object sender, EventArgs e)
{
panel1.Visible = !panel1.Visible;
panel2.Visible = !panel2.Visible;
panel1.UpdateAfterCallBack = true;
panel2.UpdateAfterCallBack = true;
}
</script>
<h2>Steps</h2>
<ol>
<li>
<p>The <code>anthem:Panel</code> control works just like the <code>asp:Panel</code>
control except that it can be modified during a call back. Add an <code>anthem:Panel</code>
control to your page and set its <code>Visible</code> property to whatever it
needs to be:</p>
<pre><code><strong><anthem:Panel id="panel1" runat="server" Visible="false">This panel is not initially visible.</anthem:Panel></strong></code></pre>
</li>
<li>
<p>During any call back, you can toggle the value of the <code>Visible</code> property.
Be sure to set the <code>UpdateAfterCallBack</code> property to true or the
change won't be reflected in the client-side page:</p>
<pre><code><strong><script runat="server">
void button_Click(object sender, EventArgs e)
{
panel1.Visible = !panel1.Visible;
panel1.UpdateAfterCallBack = true;
}
</script></strong></code></pre>
</ol>
<h2>Remarks</h2>
<p>It's possible to use <code>anthem:Panel</code> controls to dynamically update
non-Anthem controls during a call back. Just put those controls inside an <code>anthem:Panel</code>
control and set <code>UpdateAfterCallBack</code> to true on the panel. This
won't work if those controls try to inject any JavaScript into the page,
however.</p>
</form>
</body>
</HTML>
浙公网安备 33010602011771号