以最简单的方式整合AJAX功能到页面中,不需要修改ASP.NET控件,不需要写习新的控件,不需要撰写JAVASCRIPT
特点:
1,只需在WEB.CONFIG里加入一点点配置信息
2,只用一个AJAXPANNEL就实现AJAX功能
3,只要把需要无刷的控件放进AJAXPANNEL就可以了(这个好玩,局部无刷)
4,AJAXPANNEL跟ASP.NET的PANNEL控件差不多,可以在设计器里拖控件到里面(这点要提出异议,虽然他跟PANNEL一样,可是,PANNEL的设计时本来就不是令我很满意,他完全可以做得更好)
5,不需要写JAVASCRIPT(估计不少人对这个头痛)
6,实现起来太容易了,如果你有旧的站点要支持AJAX,你只要用AJAXPANNEL把这些控件包起来就OK
7,AJAX功能和普通的POSTBACK可以共存于一个WEBFORM,MAGICAJAX处理模块只处理包含在AJAXPANNEL中的控个的CALLBACK动作
8,VIEWSTATE的内容对于POSTBACK和CALLBACK来说,都是可见的,因此,无论是CALLBACK产生的VIEWSTATE也好,还是POSTBACK产生的,都是可见的(爽吧)
9,提供一个类似POSTBACK的AJAXCALL的事件模型
10,提供许多静态方法帮你处理AJAXCALL,例如发送JS到客户端
11,CALLPACK时有一个LOADING指示(跟GOOGLE差不多,不过,好像这个LOADING没法配置样式,郁闷,难道真要重编译吗?这点不好吧,毕竟这个作者应该考到)
12.MAGICAJAX的页面会缓存至IE缓存,当用户点回退按钮时,会看到他前一步的操作(爽呀,POSTBACK的那个REFRESH提示就不爽了)
13,支持IE和FIREFOX(嗯,不支持OPERA?),未来支持更多浏览器
14,还好,当浏览器不支持JS或者不是MAGICAJAX支持的类型的时候,页面将渲染成传统的形式
特性不少,最重要的是通过上面,你可以看到,它不用你大动干弋,而且兼容性确实不错,细节上处理的也好
使用步骤:
1,在WEB.CONFIG中加入配置节
<httpModules>
<add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" />
</httpModules>
2,引入程序集,加入AJAXPANNEL控件
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<ajax:AjaxPanel id="AjaxPanel1" runat="server">
</ajax:AjaxPanel>
这个步骤不用手工了吧,直接在VS的TOOLBOX里ADD/REMOVE,然后将AJAX PANNEL添到里面,拖到WEBFORM上,VS.NET会帮你加入引用,生成标记了
3,把要使用AJAX功能的控件拖进AJAXPANNEL里,撰写这些控件的事件即可
处理AJAXCALL
一般可以用MagicAjaxContext.Current.IsAjaxCall判断是否是AJAXCALL事件,不过,它不准确,如果事件是由客户端引发的,就没问题,但是如果是另一个WEBFORM用TRANSFER来引发的话,它就判断错误,正确的方法是用MagicAjaxContext.Current.IsAjaxCallForPage
---------------------------------------------------------------------
# re: 几句话介绍MagicAjax
不过,他的那个loading...太难看了,想改成居中的,有点半透明的“数据提交中...”就爽了啊!!!
--->>
--->>
打开里面的AJAXCALLOBJECT
直接翻到底部,修改以下的内容
function CreateWaitElement() {
var elem = document.getElementById('__AjaxCall_Wait');
if (!elem) {
elem = document.createElement("div");
elem.id = '__AjaxCall_Wait';
elem.style.position = 'absolute';
elem.style.height = 17;
elem.border = "1px";
elem.style.paddingLeft = "3px";
elem.style.paddingRight = "3px";
elem.style.fontSize = "11px";
elem.style.borderColor = "#cccccc";
elem.style.borderWidth = "1";
elem.style.borderStyle="solid";
elem.style.backgroundColor = "efefef";
elem.style.color = "darkRed";
elem.innerHTML = '数据载入中...';
elem.style.visibility = 'hidden';
document.body.insertBefore(elem, document.body.firstChild);
}
waitElement = elem;
}
// end wait element
这是我改完的
----
直接翻到底部,修改以下的内容
function CreateWaitElement() {
var elem = document.getElementById('__AjaxCall_Wait');
if (!elem) {
elem = document.createElement("div");
elem.id = '__AjaxCall_Wait';
elem.style.position = 'absolute';
elem.style.height = 17;
elem.border = "1px";
elem.style.paddingLeft = "3px";
elem.style.paddingRight = "3px";
elem.style.fontSize = "11px";
elem.style.borderColor = "#cccccc";
elem.style.borderWidth = "1";
elem.style.borderStyle="solid";
elem.style.backgroundColor = "efefef";
elem.style.color = "darkRed";
elem.innerHTML = '数据载入中...';
elem.style.visibility = 'hidden';
document.body.insertBefore(elem, document.body.firstChild);
}
waitElement = elem;
}
// end wait element
这是我改完的
----
# re: 几句话介绍MagicAjax
<script>
function SetMsg(msg,color,bgcolor)
{
var magicmsg = document.getElementById('__AjaxCall_Wait');
if(magicmsg!=null)
{
if(msg=='')
msg="資料載入中..."
if(color=='')
color='#FFFFFF';
if(bgcolor=='')
bgcolor='DimGray';
magicmsg.style.backgroundColor = bgcolor;
magicmsg.style.color = color;
magicmsg.innerHTML = msg;
}
}
</script>
<asp:Button ID="ClassBtn" runat="server" Text="取 出" Height="20px" OnClientClick="SetMsg('資料取出中....','black','#FF9900')" />
function SetMsg(msg,color,bgcolor)
{
var magicmsg = document.getElementById('__AjaxCall_Wait');
if(magicmsg!=null)
{
if(msg=='')
msg="資料載入中..."
if(color=='')
color='#FFFFFF';
if(bgcolor=='')
bgcolor='DimGray';
magicmsg.style.backgroundColor = bgcolor;
magicmsg.style.color = color;
magicmsg.innerHTML = msg;
}
}
</script>
<asp:Button ID="ClassBtn" runat="server" Text="取 出" Height="20px" OnClientClick="SetMsg('資料取出中....','black','#FF9900')" />