magicajax

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的&lt;configSections&gt;&lt;/configSections&gt;里创建如下的标签:</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> &lt;section name="magicAjax"<br><wbr><wbr><wbr> type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/&gt;<br> &lt;/configSections&gt;</wbr></wbr></wbr></wbr></wbr></wbr>

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

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

<magicAjax<wbr><wbr> scriptPath="~/script"<wbr><wbr> outputCompareMode="HashCode"<wbr><wbr> tracing="false"&gt;<br><wbr><wbr> &lt;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> /&gt;<br> &lt;/magicAjax&gt;</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>

MagicAjax<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>

var objQuery = document.getElementByIdx_xx( " btnQuery " );
if (objQuery != null )
{
<wbr><wbr></wbr><wbr><wbr></wbr><wbr><wbr></wbr> objQuery.click();</wbr></wbr></wbr>
}

<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>

StringBuilder sbMsg = new StringBuilder ();
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> (将&lt; script &gt;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>

< configSections >
< 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>
page_load:
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","");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值