Magic Ajax (转）(修改）
因为做个东西，在界面上需要局部采用"无刷新"方式，因此找了不少关于Ajax的资料，今天经理推荐了个东西给我，叫Magic Ajax，是个开源的控件（开源就是好啊^_^），刚开始以为和Atlas差不多，但一上手用，就明显感觉到了Magic Ajax的"魔力"所在！
主要是AjaxPanel控件，只要你想要在页面上某个地方采用无刷新，你就可以把这个Panel拖放到那里，然后把以往需要Postback的控件都放到这个Panel里面，然后呢…………就什么都不用做了！AjaxPanel会自动获取Panel内的Postback方法，然后将其封装，再进行XmlHTTP调用，从而实现了复杂的无刷新效果！
但是我在使用中遇到了个问题（Visual Studio 2005），就是如果我把需要采用无刷新的部分做成用户自定义控件，然后在同一个页面上多次使用该控件时，似乎Magic Ajax就把这些个自定义控件里的服务器控件都认为是同一个控件了！比如我做了一个A自定义控件，A里面包括一个AjaxPanel控件，Panel里面有一个Button和一个Label控件，然后我在一个Default.aspx页面上重复使用了2个A控件（分别为A1和A2），我希望实现的效果是，当我点击Default.aspx上A1控件的Button后，A1控件里的Label自动获取数据库中的一个值。但奇怪的是，最终得到的效果是当我点击了此A1控件的Button后，A1和A2的Label都得到了值，不知道用什么办法才能解决此问题呢？头痛ing……
网上查了很久，关于Magic Ajax的中文介绍可以说是少之又少，找到一些比较实用的，先记下来：
1、修改Loading（右上角的那个，和Gmail的一样）
方法是复制CORE里面的SCRIPT文件夹到你的站点某个文件夹里，然后在web.config里加入
Code
注意大小写，是scriptPath,不是ScriptPath。
打开里面的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
另外一种效果，看看AjaxCallObject.js，当请求的时候，他会象GMail那样在右上脚出现一个Wait...的等待，很cool，你只要在这里做一个小更改，改CreateWaitElement那部分就能达到另外的效果。我这里把请求数据时，改成windows关机时，整个页面变灰的那种效果，类似的js如下：
<SCRIPT type="text/javascript">
<!--
function log_out()
{
ht1 = parent.frames.item(0).document.getElementsByTagName("html");
ht1[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
ht2 = document.getElementsByTagName("html");
ht2[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
if (confirm('你是否确认注销？'))
{
return true;
}
else
{
ht1[0].style.filter = "";
ht2[0].style.filter = "";
return false;
}
}
//-->
</SCRIPT>
很cool的Wait...的等待显示位置我已经找到修改的位置了，在这个函数里改就可以
function MoveWaitElement()
{
if (!waitElement)
CreateWaitElement();
var width = document.body.clientWidth;
waitElement.style.top = document.body.scrollTop;
waitElement.style.left = width + document.body.offsetLeft - waitElement.offsetWidth;
}
2、处理AJAXCALL
一般可以用MagicAjaxContext.Current.IsAjaxCall判断是否是AJAXCALL事件,不过,它不准确,如果事件是由客户端引发的,就没问题,但是如果是另一个WEBFORM用TRANSFER来引发的话,它就判断错误,正确的方法是用MagicAjaxContext.Current.IsAjaxCallForPage。
3、为AjaxPanel添加不会进行Ajax回调的功能
情形：有时候我们需要在一组ASP.NET控件外面包含一个AjaxPanel，唯独这组控件中的某个控件不想进行Ajax调用。
编辑源代码中的Script\AjaxCallObject.js文件。
AjaxCallObject.prototype.GetAjaxCallType = function(element)
{
.........................
}
AjaxCallObject.prototype.GetEnabledAjaxCallAttrib = function(element)
{
var attrib = element.getAttribute("EnabledAjaxCall");
if (attrib != null)
if (attrib.toLowerCase() == "false")
return false;
return true;
}
.....................
AjaxCallObject.prototype.OnFormSubmit = function()
{
...............................
if (__PreviousOnFormSubmit != null)
if ( __PreviousOnFormSubmit() == false )
return false;
var ecbAttrib = AJAXCbo.GetEnabledAjaxCallAttrib(target);
if (!ecbAttrib)
{
AJAXCbo.ClearTracingWindows();
return true;
}
..............................
}
// Replaces normal __doPostBack
AjaxCallObject.prototype.DoPostBack = function(eventTarget, eventArgument)
{
.............................
// Checks the unique id and its parents until it finds a target element
// i.e. for ajaxPanel_grid:row:field it checks
// ajaxPanel_grid_row_field
// ajaxPanel_grid_row
// ajaxPanel_grid
for (var num=ids.length; num > 0; num--)
{
var elemID = "";
for (var i=0; i < num; i++)
elemID += (i==0 ? "" : "_") + ids[i];
target = document.getElementById(elemID);
if (target != null)
break;
}
var ecbAttrib = AJAXCbo.GetEnabledAjaxCallAttrib(target);
if (!ecbAttrib)
if (__PreviousPostBack != null)
{
__PreviousPostBack(eventTarget, eventArgument);
return;
}
............................
}
添加以上的蓝色代码内容。然后重新编译MagicAjax源代码，并且应用到你的工程中。
使用方法：在你的工程中，如果某个在AjaxPanel中的控件不想进行Ajax调用，则在该控件中加上如下属性：
<asp:LinkButton ID="btnCancel" Text="Button" runat="server" EnabledAjaxCall="false" />
如果是后台代码，添加如下内容：
btnCancel.Attributes.Add("EnabledAjaxCall", "false");
源码：
