MagicAjax装配
分类： AJAX ASP.NET 开发积累 2009-09-22 17:03 192人阅读 评论(0) 收藏 举报
MagicAjax装配
2007-09-10 14:51
（一）版本
<wbr><wbr><wbr><wbr> 官方网站：<a href="http://www.magicajax.net/">http://www.magicajax.net/</a><br><wbr><wbr><wbr><wbr> 下载：<br><wbr><wbr><wbr> .NET 1.1 binary release<br><wbr><wbr><wbr> .NET 2.0 binary release<br><wbr><wbr><wbr> Source<br><wbr><wbr><wbr><wbr> 最新版本：0.2.2<br><wbr><wbr><wbr><wbr> 支持：.net 1.1 / 2.0<br> （二）.NET下安装<br><wbr><wbr><wbr><wbr> 1. 下载dll文件<br><wbr><wbr><wbr><wbr> 2. 在Vs.net中，添加到工具箱中：<br><wbr><wbr><wbr><wbr> （1）工具箱点鼠标右键，选“添加/移除项”<br><wbr><wbr><wbr><wbr> （2）产生一个选择框后，选“浏览”，找到要安装的magicajax.DLL文件<br><wbr><wbr><wbr><wbr> （3）安装完成后，会在“net framework组件”选单中产生两个选项：<br><wbr><wbr><wbr><wbr> ajaxpanel和ajaxzone，选择它们（默认为选定）。<br><wbr><wbr><wbr><wbr> （4）然后到“工具框”中，可以看到多出了四个文件：<br> AjaxPanel<br><wbr><wbr><wbr><wbr> 这个是基本的异步通讯容器,你只要把以前需要PostBack的组件(比如按钮)放在这个Panel里就可以实现无刷新页面的效果了<br> AjaxZone<br><wbr><wbr><wbr><wbr> 这个组件的作用主要是获取在一个回调(CallBack)陷入中的状态,说明书上说使用这个组件可以稍稍提高服务器的响应速度.<br> ClientEventTrigger<br><wbr><wbr><wbr><wbr> 捕获一个客户端事件的触发器,需要注意的是,需要把它的事件名称与客户端触发的事件名称对应起来,并且ControlID属性必须和发布事件的客户端的属性吻合.<br> KeyClientEventWrapper<br><wbr><wbr><wbr><wbr> 这个是客户端事件的捕获器,用来捕获客户端激发的事件,比如点击click,聚焦forcus等等.<br><wbr><wbr><wbr><wbr> 3.MagicAjax的压缩包里还附有两个js的脚本文件，一个是AjaxCallObject.js，一个是WebParts.js。前者是负责MagicAjax的普通事务的客户端表现的，后者则是专门针对WebParts的脚本。将两者都Copy到你的主要存放JS的目录下。以我的solution为例，我将此二者 Copy 到 站点根目录下的 script 文件夹里存放。</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
（三）配置
<wbr><wbr><wbr><wbr> 在工程的web.config里添加下面几处配置:<br><wbr><wbr><wbr><wbr> 首先，在web.config的<configSections></configSections>里创建如下的标签：</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>
如果你的web.config 里没有<configSections></configSections>
请copy下面的片断，并确保它们是存放在<configuration></configruation>里的
<!--**************************************************-->
<configSections>
<wbr><wbr><wbr> <section name="magicAjax"<br><wbr><wbr><wbr> type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/><br> </configSections></wbr></wbr></wbr></wbr></wbr></wbr>
<!--**************************************************-->
下一步，在<configure></configure>标签里创建如下的内容
<magicAjax<wbr><wbr> scriptPath="~/script"<wbr><wbr> outputCompareMode="HashCode"<wbr><wbr> tracing="false"><br><wbr><wbr> <pageStore<br><wbr><wbr><wbr> mode="NoStore"<br><wbr><wbr><wbr> unloadStoredPage="false"<br><wbr><wbr><wbr> cacheTimeout="5"<br><wbr><wbr><wbr> maxConcurrentPages="5"<br><wbr><wbr><wbr> maxPagesLimitAlert="true"<br><wbr><wbr> /><br> </magicAjax></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
参数解释如下：
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了~~
<wbr><br> ========================================================================</wbr>
五、MagicAjax使用中遇到的问题及解决办法
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 在使用MagicAjax的过程中，基本上不需要改动原来的source即可达到运用Ajax技术的效果，MagicAjax的实现机理网上有很多介绍，这里不累述，有两个关键词：doPostBack,和viewState。Magicajax就是将要做的操作送回后台，处理后将需要的信息截取出来。这个过程中doPostBack就是送回后台的操作，ViewState用于保存控件的状态，这样在自己写xmlHttp实现Ajax中出现的控件状态没有办法在后台获取（尤其是dropDownList的option的变化）的问题就迎刃而解了。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 而在这个过程中也会因为这些因素，出现些问题。这里列出我遇到的部分以及解决方案。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><strong>1．加入MagicAjax后页面布局出现混乱。</strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> BMS项目中页面布局采用的是Table的布局方式，设定了每个TD的相对宽度。可是在加入AjaxPanel标签后页面布局出现混乱。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#FF0000">Solution:</font> 经过排查，发现是当包含一句类似如下的语句时出现问题：</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<
span id
=
"
spFailcode
"
><%=
strFailCode
%></
span
>
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#800000">改动也很容易，将这样的将该span改为runnt=server然后在后台赋值就好了。<br></font><font color="#000000"><wbr><wbr></wbr><wbr><wbr></wbr><strong>2． 通过javascript调按钮的click做页面回传无效。</strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 在原系统中可能存在类似如下的客户端脚本</wbr></wbr></wbr></wbr></wbr></font></wbr></wbr></wbr>
if (objQuery != null )
{
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 通过触发button的click事件将页面回传到服务器端。可是在包上AjaxPanel后，以上的javascript没有效果了。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#FF0000">Solution：</font>想来是因为magicAjax采用doPostBack回传。<font color="#800000">所以将Javascript改为：__doPostBack(btnQuery,'');就搞定了。<br></font><font color="#000000"><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><strong>3． 调用__doPostBack引起脚本错误。</strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 在执行第二点改写JavaScript时出现了这个问题，错误类型为缺少对象。严格说来这个不是因为magicAjax的应用所造成的。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#FF0000">Solution：</font>在PageLoad中加入GetPostBackEventReferenc<wbr><wbr></wbr>e(XXXX);其中XXXX可以为任何一个服务器按钮等等，如果页面中有设定AutoPostBack的控件，那么这个问题是不存在的。<font color="#000000"><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><strong>4．在服务器端注册的脚本无效:</strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 以前我们在后代代码汇会写类似如下代码：</wbr></wbr></wbr></wbr></wbr></wbr></font></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></font></wbr></wbr></wbr></wbr></wbr></wbr>
sbMsg.Append (“ < script language = javascript > ”);
sbMsg.Append (“SetFocus(”” + Server.HtmlEncode(sid) + “”);”);
sbMsg.Append (“ </ script > ”);
Page.RegisterStartupScript (“setfocus”,sbMsg.ToString ());
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 现在这这种注册脚本的方式（包括：RegisterStartupScript和RegisterClientScriptBloc<wbr><wbr></wbr>k）在通过MagicAjax触发的调用中都失去作用。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#FF0000">Solution：</font>首先在该页面引入命名空间：using MagicAjax;<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 区分是正常调用Function还是MagicAjax引起调用Function，对于由MagicAjax引起调用的Function，注册脚本改为类似如下代码：<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#800000">MagicAjax.AjaxCallHelper.Write("alert('" + messageContent + "');");<br><wbr><wbr></wbr><wbr><wbr></wbr> （将< script >Tag去除，然后直接将内容通过MagicAjax.AjaxCallHelper.Write完成脚本写入）<br></wbr></wbr></font><font color="#000000"><strong><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 5．出现一些某名奇妙的错误</wbr></wbr></wbr></strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 这部分错误包括：触发事件处理函数异常，viewState丢失，等等。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><font color="#FF0000">Solution：</font>一般来说先检查环境中是否有安装Microsoft .NET Framework 1.1 HotFix(KB886903)补丁。安装后问题解决。<br><strong><font color="#000080">六、 结语</font></strong><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 以上就是在BMS项目中使用MagicAjax的一个过程和遇到部分问题的解决办法。总体而言，采用MagicAjax可以快速实现asp.net1.1 的MagicAjax应用，是一个为现有系统提供Ajax解决方案的好办法。并个人推断由于MagicAjax的特性（doPostBack， ViewState）所决定采用MagicAjax比不采用MagicAjax在效率上不会有本质的提高。主要的改善点还是在用户的操作感官上的。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 另外，在该项目中应用MagicAjax操作的控件较少，可能会有一些控件在使用中会有一些其它特点，本文没有涉及到。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 在项目过程中关于MagicAjax部分得到了Internet的大力帮助，谢谢那些显示器另外一边的人。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 最后就是大家如果在使用MagicAjax中有什么心得，可以一起交换，共同进步：）<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 谢谢。</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></font></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 另外，在MagicAjax使用过程中又陆续有一些问题，比较严重的有以下两个：<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 1. 文本框中如果含有双引号的字符，在通过magicAjax环回一次后，符号被转义。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 2. 在ie6的环境中，如果使用了MagicAjax页面出现横向滚动条，会无限延伸。<br><br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr><br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
例子:
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 1、打开vs 添加 MagicAjax.dll，就会有AjaxPanel 控件，就往上拖东西吧。<br><wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 2、打开web.config 添加：</wbr></wbr></wbr></wbr></wbr></wbr>
< section name = " magicAjax " type = " MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax " />
</ configSections >
< system.web >
...
< httpModules >
< add name = " MagicAjaxModule " type = " MagicAjax.MagicAjaxModule, MagicAjax " />
</ httpModules >
...
</ system.web >
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> 3、例子：</wbr></wbr></wbr>
if ( ! Page.IsPostBack)
{
MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval<wbr><wbr></wbr>(</wbr> 1000 );
}
FillDataView();
// FillDataView();
public void FillDataView()
{
string sql = " select * from mms_type " ;
DataTable db = SQLControl.GetDataTable(sql);
GridView1.DataSource = db;
GridView1.DataBind();
}
<wbr><wbr></wbr></wbr>
总结：
1、直接弹出一个Alert窗体的办法：
using MagicAjax;
MagicAjax.AjaxCallHelper.Write("alert('" + "网际浪子的一个小测试！" + "');");
2、弹出一个确认框的办法：(可以直接用在MagicAjax中的呀！)
this.Button2.Attributes["onclick"]="javascript:return confirm('真的确认添加吗');"
<wbr><wbr></wbr></wbr>
PS:
用户控件使用__doPostBack提交信息和其他的不同
使用__doPostBack提交信息的时候，__doPostBack函数的第一个参数是要提交的按钮id，在用户控件中使用__doPostBack提交信息的时候，这个参数中id的写法要加上用户控件的id。和一般的脚本调用不同，在这里用户控件id和控件id中间不是用“_”和“：”间隔，而是用 “$”间隔。
如提交一个id为linkButton的LinkButton的写法如下：
window.__doPostBack("<%= this.ClientID.ToString()%>$LinkButton1","");
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
