magicajax

MagicAjax装配
分类： AJAX ASP.NET 开发积累 2009-09-22 17:03 192人阅读 评论(0) 收藏 举报
MagicAjax装配
2007-09-10 14:51
（一）版本
     官方网站：http://www.magicajax.net/
     下载：
    .NET 1.1 binary release
    .NET 2.0 binary release
    Source
     最新版本：0.2.2
     支持：.net 1.1 / 2.0
（二）.NET下安装
     1. 下载dll文件
     2. 在Vs.net中，添加到工具箱中：
     （1）工具箱点鼠标右键，选“添加/移除项”
     （2）产生一个选择框后，选“浏览”，找到要安装的magicajax.DLL文件
     （3）安装完成后，会在“net framework组件”选单中产生两个选项：
     ajaxpanel和ajaxzone，选择它们（默认为选定）。
     （4）然后到“工具框”中，可以看到多出了四个文件：
AjaxPanel
     这个是基本的异步通讯容器,你只要把以前需要PostBack的组件(比如按钮)放在这个Panel里就可以实现无刷新页面的效果了
AjaxZone
     这个组件的作用主要是获取在一个回调(CallBack)陷入中的状态,说明书上说使用这个组件可以稍稍提高服务器的响应速度.
ClientEventTrigger
     捕获一个客户端事件的触发器,需要注意的是,需要把它的事件名称与客户端触发的事件名称对应起来,并且ControlID属性必须和发布事件的客户端的属性吻合.
KeyClientEventWrapper
     这个是客户端事件的捕获器,用来捕获客户端激发的事件,比如点击click,聚焦forcus等等.
     3.MagicAjax的压缩包里还附有两个js的脚本文件，一个是AjaxCallObject.js，一个是WebParts.js。前者是负责MagicAjax的普通事务的客户端表现的，后者则是专门针对WebParts的脚本。将两者都Copy到你的主要存放JS的目录下。以我的solution为例，我将此二者 Copy 到 站点根目录下的 script 文件夹里存放。

（三）配置

     在工程的web.config里添加下面几处配置:
     首先，在web.config的<configSections></configSections>里创建如下的标签：

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

如果你的web.config 里没有<configSections></configSections>

请copy下面的片断，并确保它们是存放在<configuration></configruation>里的

<!--**************************************************-->

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

<!--**************************************************-->

下一步，在<configure></configure>标签里创建如下的内容

<magicAjax   scriptPath="~/script"   outputCompareMode="HashCode"   tracing="false">
   <pageStore
    mode="NoStore"
    unloadStoredPage="false"
    cacheTimeout="5"
    maxConcurrentPages="5"
    maxPagesLimitAlert="true"
   />
</magicAjax>

参数解释如下：

MagicAjax

一.scriptPath 我们刚才提到的那两个脚本的存放路径，这个参数在设置的时候以~/ ，也就是站点的根目录作为一个出发点。比如，你要设置magicajax的js脚本到站点的根目录的blog下的script里，则写成 ~/blog/script。其余情况大家自己推理~

二.outputCompareMode 脚本输出时的比较模式 有三种方式 FullHtml、HashCode、MD5

HashCode即可。具体的细节将在后面的章节里讲述。

三. tracing 是否跟踪如果设置为true的话，则在每次响应Ajax请求的时候会弹出一个alert来显示具体要加载的脚本

仅用于调试

PageStore 用于配置Ajax的js脚本的缓存的标签

一.mode Page 对象存储的模式有三种方式 NoStore、Session、Cache。

NoStore，将不会缓存Page 对象

Session，将会把Page 对象存储到站点的Session里

Cache，将会把Page 对象存储到站点的Cache里。

二.unloadStoredPage 是否在Page的Unload对象里清除掉建立的Page 对象的Cache或者Session。一般都设置为false。

三.cacheTimeout Cache的过期时间以分钟为单位

四.maxConcurrentPages 同一个页面可以缓存的Page 对象的数量 一般为5

五.maxPagesLimitAlert 是否对达到最大缓存数进行警告 一般为 false

为什么要缓存页面对象，我们将在以后的章节里解释

最后一步，在<System.Web></System.Web>标签的

下级标签 <httpModules> </httpModules>里创建
<add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" />

如果你的<System.Web></System.Web>里没有<httpModules></httpModules>

请复制以下标签到你的<System.Web></System.Web>里

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

以上就是配置的步骤了。

配置完毕以后，你就可以安心地使用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.getElementByIdx_xx( " 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页面出现横向滚动条，会无限延伸。

   

例子:
    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('真的确认添加吗');"

 

PS:
用户控件使用__doPostBack提交信息和其他的不同
使用__doPostBack提交信息的时候，__doPostBack函数的第一个参数是要提交的按钮id，在用户控件中使用__doPostBack提交信息的时候，这个参数中id的写法要加上用户控件的id。和一般的脚本调用不同，在这里用户控件id和控件id中间不是用“_”和“：”间隔，而是用 “$”间隔。

如提交一个id为linkButton的LinkButton的写法如下：

window.__doPostBack("<%= this.ClientID.ToString()%>$LinkButton1","");