MagicAjax使用及注意事项
一、 概述
现在Ajax技术正如火如荼的在Internet上发展着。而面对我们之前开发的ASP.NET2.0的Web项目，类似于下拉框等联动也需要啪啪啪的不断刷新，的确影响到了用户的使用体验。如何使用Ajax技术改善这部分的问题呢？是一个值得思考和尝试的工作。
二、 开发和部署系统准备
1． Microsoft Visual Studio .NET 2005.
2． Microsoft .NET Framework 2.0
三、 MagicAjax使用准备
1． 首先当然是去http://sourceforge.net/projects/magicajax下载MagicAjax的Dll了，我使用的0.3.0.0的版本。
2． 将该dll加入到webForm所在项目的引用中。
3． 在Web.Config文件中<configuration>节点下添加如下子节点：
|
<configSections> <sectionname="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/> </configSections> |
4． 在Web.Config文件中< system.web>节点下添加如下子节点：
|
<httpModules> <addname="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="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完成脚本写入）
六、 结语
以上就是在BMS项目中使用MagicAjax的一个过程和遇到部分问题的解决办法。总体而言，采用MagicAjax可以快速实现asp.net2.0的MagicAjax应用，是一个为现有系统提供Ajax解决方案的好办法。并个人推断由于MagicAjax的特性（doPostBack，ViewState）所决定采用MagicAjax比不采用MagicAjax在效率上不会有本质的提高。主要的改善点还是在用户的操作感官上的。
