MagicAjax 使用及注意事項~!!!AJAX無重新整理的DLL檔案!!

From:http://www.cnblogs.com/hjclove/articles/1318737.html

一、概述
    現在Ajax技術正如火如荼的在Internet上發展著。而面對我們之前開發的ASP.NET1.1的Web項目，類似於下拉框等聯動也需要啪啪啪的不斷重新整理，的確影響到了使用者的使用體驗。如何使用Ajax技術改善這部分的問題呢？是一個值得思考和嘗試的工作。
    在完成BMS Phase II過程中，我們採用了一個MagicAjax這一個現成的組件實現了盡量減少對原系統的改動且實現頁面無重新整理技術嘗試和系統改進。
    下面就針對我們在實際項目中使用MagicAjax的基本過程和需要注意的問題作一個簡單說明。
二、開發和部署系統準備
    1．  Microsoft Visual Studio .NET 2003.
    2．  Microsoft .NET Framework 1.1
    3．  Microsoft .NET Framework 1.1 HotFix(KB886903) (一定要裝，不然會因為viewstate不全而造成一些奇怪的問題)
三、MagicAjax使用準備
    1.     首先當然是去http://sourceforge.net/projects/magicajax下載MagicAjax的Dll了，我使用的0.3.0.0的版本。
    2.     將該dll加入到webForm所在項目的引用中。
    3.     在Web.Config檔案中<configuration>節點下添加如下子節點：

    <configSections>

       <section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax" />

    </configSections>
 

    4．  在Web.Config檔案中< system.web>節點下添加如下子節點：

        <httpModules>

            <add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax" />

        </httpModules>
 

    5．  在希望採用Ajax的webForm頁面HTML開頭引入Ajax的註冊語句：

<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>

    這樣，我們就可以在該頁使用MagicAjax了。
四、MagicAjax使用
   在BMS 項目中，我只用到了一個MagicAjax組件，那就是Ajax Panel.用法也是很簡單:
   1．  將你需要採用無重新整理操作的控制項包在MagicAjax的標籤中，類似如下代碼：

<ajax:AjaxPanel ID="AjaxPanel1" runat="Server"> 
 
    <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>

    <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>

    <asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList>

</ajax:AjaxPanel>

    （以上代碼假設DropDownList1，DropDownList2，DropDownList3存在聯動關係，控制項設為AutoPostBack，並且聯動方法已經在後台寫好了。）
    2．    再到頁面上去點擊DropDownList1，以前需要重新整理的操作現在是不是不需要了？（左上方是不是有個loading一閃而過？這個文字和樣式都可以換的哦）。
    3．  至此，MagicAjax的運用已經基本完成，是不是太簡單一點了。事實上，就這麼簡單。
五、MagicAjax使用中遇到的問題及解決辦法
    在使用MagicAjax的過程中，基本上不需要改動原來的source即可達到運用Ajax技術的效果，MagicAjax的實現機理網上有很多介紹，這裡不累述，有兩個關鍵詞：doPostBack,和viewState。Magicajax就是將要做的操作送回後台，處理後將需要的資訊截取出來。這個過程中doPostBack就是送回背景操作，ViewState用於儲存控制項的狀態，這樣在自己寫xmlHttp實現Ajax中出現的控制項狀態沒有辦法在後台擷取（尤其是dropDownList的option的變化）的問題就迎刃而解了。
    而在這個過程中也會因為這些因素，出現些問題。這裡列出我遇到的部分以及解決方案。
    1． 加入MagicAjax後頁面配置出現混亂。
    BMS項目中頁面配置採用的是Table的布局方式，設定了每個TD的相對寬度。可是在加入AjaxPanel標籤後頁面配置出現混亂。
    Solution: 經過排查，發現是當包含一句類似如下的語句時出現問題： 

<span id="spFailcode"><%=strFailCode%></span>

    改動也很容易，將這樣的將該span改為runnt=server然後在後台賦值就好了。
    2． 通過javascript調按鈕的click做頁面回傳無效。
    在原系統中可能存在類似如下的用戶端指令碼

var objQuery = document.getElementById("btnQuery"); 

if(objQuery!=null)

 {

   objQuery.click();

 }

    通過觸發button的click事件將頁面回傳到伺服器端。可是在包上AjaxPanel後，以上的javascript沒有效果了。
    Solution：想來是因為magicAjax採用doPostBack回傳。所以將Javascript改為：__doPostBack(btnQuery,'');就搞定了。
    3． 調用__doPostBack引起指令碼錯誤。
    在執行第二點改寫JavaScript時出現了這個問題，錯誤類型為缺少對象。嚴格說來這個不是因為magicAjax的應用所造成的。
    Solution：在PageLoad中加入GetPostBackEventReference(XXXX);其中XXXX可以為任何一個伺服器按鈕等等，如果頁面中有設定AutoPostBack的控制項，那麼這個問題是不存在的。
    4．在伺服器端註冊的指令碼無效:
    以前我們在後代代碼匯會寫類似如下代碼：

StringBuilder sbMsg=new StringBuilder ();

sbMsg.Append (“<script language=javascript>”);

sbMsg.Append (“SetFocus(”” + Server.HtmlEncode(sid) + “”);”);

sbMsg.Append (“</script>”);

Page.RegisterStartupScript (“setfocus”,sbMsg.ToString ());

    現在這這種註冊指令碼的方式（包括：RegisterStartupScript和RegisterClientScriptBlock）在通過MagicAjax觸發的調用中都失去作用。
    Solution：首先在該頁面引入命名空間：using MagicAjax;
    區分是正常調用Function還是MagicAjax引起調用Function，對於由MagicAjax引起調用的Function，註冊指令碼改為類似如下代碼：
    MagicAjax.AjaxCallHelper.Write("alert('" + messageContent + "');");
   （將< script >Tag去除，然後直接將內容通過MagicAjax.AjaxCallHelper.Write完成指令碼寫入） 
    5．出現一些某名奇妙的錯誤
    這部分錯誤包括：觸發事件處理函數異常，viewState丟失，等等。
    Solution：一般來說先檢查環境中是否有安裝Microsoft .NET Framework 1.1 HotFix(KB886903)補丁。安裝後問題解決。
六、 結語
    以上就是在BMS項目中使用MagicAjax的一個過程和遇到部分問題的解決辦法。總體而言，採用MagicAjax可以快速實現asp.net1.1的MagicAjax應用，是一個為現有系統提供Ajax解決方案的好辦法。並個人推斷由於MagicAjax的特性（doPostBack，ViewState）所決定採用MagicAjax比不採用MagicAjax在效率上不會有本質的提高。主要的改善點還是在使用者的操作感官上的。
    另外，在該項目中應用MagicAjax操作的控制項較少，可能會有一些控制項在使用中會有一些其它特點，本文沒有涉及到。
    在項目過程中關於MagicAjax部分得到了Internet的大力協助，謝謝那些顯示器另外一邊的人。
    最後就是大家如果在使用MagicAjax中有什麼心得，可以一起交換，共同進步：）
    謝謝。

    另外，在MagicAjax使用過程中又陸續有一些問題，比較嚴重的有以下兩個：
    1. 文字框中如果含有雙引號的字元，在通過magicAjax環回一次後，符號被轉義。 
    2. 在ie6的環境中，如果使用了MagicAjax頁面出現橫向捲軸，會無限延伸。
 
    這兩部分的問題。我都已經修正了，不過要改動MagicAjax的Source。
    唉，MagicAjax為什麼還不更新版本哇。

例子:
    1、開啟vs 添加 MagicAjax.dll，就會有AjaxPanel 控制項，就往上拖東西吧。
    2、開啟web.config 添加： 

<configSections>
<section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>
</configSections>

<system.web>
...
<httpModules>
<add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>
</httpModules>
...
</system.web>

    3、例子：

page_load:
if (!Page.IsPostBack)
{
MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(1000);
}
FillDataView();

//FillDataView();
public void FillDataView()
{
string sql = "select * from mms_type";
DataTable db = SQLControl.GetDataTable(sql);
GridView1.DataSource = db;
GridView1.DataBind();
}

    1、直接彈出一個Alert表單的辦法：using MagicAjax;MagicAjax.AjaxCallHelper.Write("alert('" + "小測試！" + "');");   2、彈出一個確認框的辦法：(可以直接用在MagicAjax中的呀！) this.Button2.Attributes["onclick"]="javascript:return confirm('真的確認添加嗎');";