|
微软的NET Framework 自带了Ajax框架将以往传统的ASPNET开发带入了一个全新的AjaxNET开发时代我们除了在页面上引入ScriptManager控件用以在客户端注册功能丰富的Ajax框架脚本外这个庞大的框架还提供了诸多功能强大的Ajax控件例如着名的UpdatePanelModalPopupExtenderRating等控件Ajax框架和控件的引入大大简化了开发人员的开发任务同时也给用户带来了全新的Web体验但是我们在使用复杂的框架提供的脚本时也常常会遇到这样或那样的问题有很多问题相信不少开发人员都能独立解决不过有些复杂的问题还真是很伤脑筋 本来在MOSS中使用Ajax开发就已经不是一件轻易的事情或许高手们觉得这没有什么是的！我们在Google上会搜到很多介绍这方面的文章而且配置步骤都写得非常详细按照前辈们的经验只要认真按照步骤将环境配置好一般都是没有什么问题的在MOSS中开发Ajax应用程序就如同简单的Ajax网页一样只是部署的时候稍微要麻烦一些这里我不想详细讲解在MOSS中如何进行Ajax开发只是想说一说前段时间在MOSS开发中因为Ajax框架所引起的一个非常怪异的问题一直困扰了我好几天不过最终算是委曲求全得找到了一个替代的解决办法至于会不会引起其它的什么问题读者也可以帮我分析一下 前不久我写了一篇有关在FireFox中通过脚本获取客户端本地所选文件路径的文章里面介绍了通过客户端上传文件时如果通过javascript得到文件的本地路径事实上在真正的文件上传过程中得到文件的客户端路径意义是不大的除非我们需要实现如图片本地预览的功能否则我们一般都可以通过Form的Post方法得到要上传的文件在C#一般都是这样的 <body> <form id=form runat=server method=post enctype=multipart/formdata> <input id=File name=mtfile type=file /> <asp:Button ID=Button runat=server Text=Button OnClick=Button_Click /> </form> </body> protected void Button_Click(object sender EventArgs e) { HttpFileCollection files = RequestFiles; if (files != null && filesCount > ) { for (int i = ; i < filesCount; i++) { // TODO something } } } 设置Form的method属性为post并设置enctype为mulipart/formdata当页面提交时在服务端通过RequestFiles方法即可得到上传文件的对象集合非常简单我们根本不需要在客户端通过javascript得到文件的路径不过这里有一个限制那就是页面必须post到服务端才能得到要上传的文件也就是说我们不能通过javascript方式在页面无刷新的情况下将文件上传到服务器这也是Ajax唯一不能做到的一件事情不过我们通过一个比较老旧的技术可以避开这个问题那就是在页面上使用隐藏的iFrame在页面提交前将Form的target指向这个隐藏的iFrame页面提交时iFrame会被刷新提交从而避免了整个页面被刷新 事实上在Ajax兴起前很多无刷新的页面几乎都是通过这种方式来实现的iFrame可以提交数据而且还避免了网页的整体刷新在Ajax兴起后iFrame似乎很少再被人们提起但是有一个例外 那就是文件上传！我们可以去当今比较流行的网站考察一下像邮箱Gmail等都无一例外地使用了iFrame上传文件我们可以将上面代码中的HTML部分稍作修改就可以实现使用iFrame上传文件的功能 <body> <form id=form runat=server target=ifu method=post enctype=multipart/formdata> <iframe frameborder= id=ifu name=ifu ></iframe> <input id=File name=mtfile type=file /> <asp:Button ID=Button runat=server Text=Button OnClick=Button_Click /> </form> </body> 后台代码不变只是在Form上加了一个target属性用来指向iFrame当页面提交时会自动提交iFrame对象而不会将Form本身提交当遇到页面上还有其它表单需要提交时我们可以这样做先在提交按钮的客户端事件上将Form的target指向隐藏的iFrame然后返回True提交表单这时iFrame会被提交在服务端处理完数据保存后注册一段脚本用来将iFrame的父页面中Form的target改回自身这样就可以模拟一次iFrame提交而不会影响到页面上其它的功能我们只是在页面需要被提交时才去修改Form的target属性提交完后再改回来 这看起来似乎是一个很不错的主意看看代码吧！ <body> <form id=form runat=server method=post enctype=multipart/formdata> <iframe frameborder= id=ifu name=ifu ></iframe> <input id=File name=mtfile type=file /> <asp:Button ID=Button onclientclick=documentforms[form]target = ifu;return true; runat=server Text=Button OnClick=Button_Click /> </form> </body> protected void Button_Click(object sender EventArgs e) { HttpFileCollection files = RequestFiles; if (files != null && filesCount > ) { for (int i = ; i < filesCount; i++) { //TODO something } } string script = alert({});windowparentdocumentforms[form]target = _self;; ClientScriptRegisterClientScriptBlock(thisPage thisGetType() stringEmpty stringFormat(script Save Successfully!) true); } 尽管我们在页面上使用Ajax控件该方法仍然会奏效需要说明一点就是上传文件的功能是不能在UploadPanel控件中使用的否则功能会失效因为文件上传必须刷新页面除非我们使用iFrame提交表单如果非要在UpdatePanel控件中完成文件上传功能那必须设置UpdatePanel控件的PostBackTrigger属性将触发事件的控件添加到PostBackTrigger中如 <asp:UpdatePanel ID=update runat=server UpdateMode=Conditional> <ContentTemplate> <input id=File name=mtfile type=file /> <asp:Button ID=btSave runat=server Text=Save onclick=btSave_Click /> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID=btSave /> </Triggers> </asp:UpdatePanel> 这将导致页面回传UpdatePanel控件的意义也就失去了在页面上放置隐藏的iFrame按照前面介绍的方法通过javascript动态去修改Form的target属性提交iFrame可以实现类似于Ajax方式的文件上传功能其实页面同样被刷新了只是刷新的是隐藏的iFrame用户不会有什么感觉 前面说了这么多只是想说说我所遇到的问题的背景现在步入正题！ 在MOSS中开发页面和普通的ASPNET页面基本没有什么不同主要就是部署的时候会有一些麻烦那么按照前面介绍的方法将编写好的页面部署到站点上运行时我发现了一个奇怪的问题那就是第一次按钮触发事件的时候服务端可以正确响应并且是通过iFrame提交过来的但是从第二次开始就需要等待十几秒的时间按钮才能再次被触发一开始我以为是iFrame在被提交后没有响应完毕来不及处理第二次请求后来通过设置断点和插入调试脚本进行测试发现iFrame已经完全响应完毕按钮还是不能被点击（这里说的按钮不能被点击是指Button不能响应服务端事件） 究竟发生了什么问题？ 在NET 时代我们通常会遇到按钮的事件丢失等问题但这是在NET 的环境下根本不存在这种问题况且按钮在第一次的时候是可以被点击的程序一直处于运行状态没有人修改过代码让我非常奇怪！这个问题我反复调试并采用了很多不同的方法去尝试但是问题依旧如查看页面上其它部分可能导致的脚本干扰setInterval方法的使用是否会导致程序处于等待状态（事实上这个根本不可能） 去掉所有可能导致此问题的控件和代码等等天啊！我几乎尝尽了所有能够想到的办法但是这块大石头依然纹丝不动我崩溃了！！ 过了一个周末在家睡了两天脑海中一直想的就是究竟是什么原因导致了按钮的事件不能被触发我也尝试过在FireFox下利用FireBug跟蹤按钮的客户端代码执行情况没有什么结果周一上班的时候突然想到用排除法来验证一下看看究竟是哪部分代码出现了问题因为之前我在本地创建的工程中使用了iFrame提交表单并且利用javascript在页面往返服务器的过程中动态修改了Form的target属性并没有发现按钮事件不能被触发的问题说明问题不是出在我所写的代码中我在MOSS站点中创建了一个功能一样的页面上面只有非常简单的几行代码然后编译部署激活特定的Feature访问页面简单看了一下功能很正常说明这种方法在MOSS下是可以正常使用的并没有之前假象的会受到MOSS本身机制的影响 生产环境中的页面要稍微复杂一些里面除了一些必须的功能和UserControl外整个页面是继承自一个公共的模板页难道问题出在模板页上？我又仔细看了看模板页中的代码几乎尝试着将模板页中所有的控件都删除了但是问题依然没有解决一身冷汗啊一上午的时间就这么让我浪费了做过MOSS项目的朋友可能会比较清楚在MOSS上开发项目复杂的并不是如何去写代码而是部署和调试经常大把的时间都浪费在这个上面更何况我为了测试这个问题产生的原因还要新建页面重新部署站点然后调试代码光这个过程就比较繁琐了 反正已经开始做了午饭过后我打算彻底搞定它问题既然不是出在页面本身那一定是出在模板页上因为之前没加模板页的时候是可以的后来将页面继承自模板页后问题就来了在FireFox中查看页面的源代码仔细查看生成的HTML和脚本发现在Body和Form标签上有两个脚本事件不知道是干什么用的很好奇问了一下老大他说这是MOSS在新建模板页时自动加上的没有谁刻意去加它代码片段如下 <body onload=javascript:_spBodyOnLoadWrapper();> <form id=Form runat=server onsubmit=return _spFormOnSubmitWrapper(); method=post enctype=multipart/formdata> 我尝试着将这两个事件取消掉然后重新部署运行程序哈哈！终于可以了那个按钮的事件再也没有丢失过可以一直被点击而不会出现不响应的情况其实罪魁祸首的就是form的onsubmit事件中的_spFormOnSubmitWrapper方法取消它就可以解决问题 但是问题马上又来了既然这个事件是MOSS自动加上的那肯定有它的用途我们不能随意就将它删掉说不定以后哪里就会出问题（虽然我到后来也不太清楚这个函数究竟是用来干什么的）那么只能曲线救国了用FireBug看看它的具体代码吧顺便跟了一下 var _spSuppressFormOnSubmitWrapper=false; function _spFormOnSubmitWrapper() { if (_spSuppressFormOnSubmitWrapper) { return true; } if (_spFormOnSubmitCalled) { return false; } if (typeof(_spFormOnSubmit)==function) { var retval=_spFormOnSubmit(); var testval=false; if (typeof(retval)==typeof(testval) && retval==testval) { return false; } } RestoreToOriginalFormAction(); _spFormOnSubmitCalled=true; return true; } 这个方法只要返回true就会触发服务器端时间如果返回false则不会触发我反复看了一下导致函数返回false的原因是因为_spFormOnSubmitCalled的值为true那么我们只需要将这个变量的值设为false即可重新触发服务器端事件了这个好办我马上修改代码在button按钮的客户端事件代码中这样写 //aspnetForm为Form的客户端nameiframeHidden为隐藏的iFrame的name documentforms[aspnetForm]target = iframeHidden; _spFormOnSubmitCalled = false; return true; 然后服务端返回的时候再将form的target改回_self这样就可以了！ 我不知道MOSS自动加上的那个Form事件是用来干什么的但至少我让_spFormOnSubmitCalled变量的值为false可以导致按钮的事件被触发并且可以实现我预期的效果 因为我在页面提交成功后会整个刷新页面所以也不用担心修改这个值后会带来什么样的后果最后来看一下服务器端要注册的脚本 private const string scriptOK = @alert({}); windowparentlocationhref += #; windowparentlocationreload();; private const string scriptFailed = @alert({}); windowparentdocumentforms[aspnetForm]target = _self;; 分为两种如果成功则重新刷新整个页面如果失败则修改父页面Form的target属性的值为_self你可能会问我为什么要将父页面的locationhref加上一个#这主要是为了解决在FireFox下通过iFrame提交表单并重新刷新整个页面时出现是否重新提交数据的提示（这个问题在IE下不会出现）浏览器只认URL我们稍微修改一下URL的内容只要地址不变重新刷新页面时就不会出现是否重新提交数据的提示了 到目前为止我将我的代码做了这样的修改不知道会不会遇到什么问题写这篇文章的目的有两个一是记录一下自己解决这个问题的过程二是想告诉各位正在做MOSS开发的朋友如果遇到通过Ajax方式无法触发服务器端事件的问题时不妨认真检查检查客户端生成的HTML和脚本找找原因在哪里 另外如果有哪位朋友能详细讲解一下我所遇到的问题的具体原因以及_spFormOnSubmitWrapper函数的具体含义也欢迎指正！ |
