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
  <magicAjax outputCompareMode="HashCode" tracing="false" scriptPath="~/js/script" >
    <pageStore/>
  </magicAjax>

 


注意大小寫，是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");

源碼：