如何让UpdatePanel支持文件上传

时间:2010-02-04 13:04:01  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:方法来这么做:例如将一个按钮放置在UpdatePanel外,将按钮设为某个UpdatePanel的PostBackTrigger,或者调用ScriptManager.RegisterPostBackControl来注册它。   建立一个不使用ASP.NET AJAX的上传页面,很多站点已经这么做了。     不过,我们为什么不使UpdatePanel兼容FileUpload控件(<input type="file" />)呢?如果可以这样,一...
  正文:UpdatePanel从一开始就无法支持AJAX的文件上传方式。Eilon Lipton写了一篇文章解释了这个问题的原因。文章中提供了两个绕开此问题的方法:
  
  将“上传”按钮设为一个传统的PostBack控件而不是异步PostBack。您可以使用多种方法来这么做:例如将一个按钮放置在UpdatePanel外,将按钮设为某个UpdatePanel的PostBackTrigger,或者调用ScriptManager.RegisterPostBackControl来注册它。
  建立一个不使用ASP/ target=_blank class=infotextkey>asp.NET AJAX的上传页面,很多站点已经这么做了。
    不过,我们为什么不使UpdatePanel兼容FileUpload控件(<input type="file" />)呢?如果可以这样,一定能够受需要使用UpdatePanel上传文件的用户欢迎。
  
    我们首先要解决的问题是,找到一种能够将信息发送到服务器端的方法。我们都知道XMLHttpRequest只能发送字符串。在这里,我们使用和其他的异步上传文件的解决方案一样,使用iframe来上传文件。iframe元素是一个非常有用的东西,即使在AJAX这个概念出现之前,它已经被用于制作一些异步更新的效果了。
  
    其次,我们应该如何改变当前传输数据的行为呢?幸亏Microsoft AJAX Library有着强大的异步通讯层,我们可以方便创建一个UpdatePanelIFrameExetender来继承Sys.Net.WebRequestExecutor,并且将它交给一个上传文件的WebRequest对象。因此,下面的代码可以作为我们开发组件的第一步:
  
  第一步
  Type.registerNamespace("Jeffz.Web");
  
  // the new executor will use the element witch initiated the async postback.
  Jeffz.Web.UpdatePanelIFrameExecutor = function(sourceElement)
  {
   // ...
  }
  Jeffz.Web.UpdatePanelIFrameExecutor.prototype =
  {
   // ...
  }
  Jeffz.Web.UpdatePanelIFrameExecutor.registerClass(
   "Jeffz.Web.UpdatePanelExecutor", Sys.Net.WebRequestExecutor);
  
  Jeffz.Web.UpdatePanelIFrameExecutor._beginRequestHandler = function(sender, e)
  {
   var inputList = document.getElementsByTagName("input");
   for (var i = 0; i < inputList.length; i++)
   {
   var type = inputList[i].type;
   if (type && type.toUpperCase() == "FILE")
   {
   e.get_request().set_executor(
   new Jeffz.Web.UpdatePanelExecutor(e.get_postBackElement()));
   return;
   }
   }
  }
  
  Sys.Application.add_init(function()
  {
   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
   Jeffz.Web.UpdatePanelIFrameExecutor._beginRequestHandler);
  });
  
  
  
    在上面的代码段中,我们在页面初始化时监听了PageRequestManager对象的beginRequest事件。当PageRequestManager触发了一个异步请求时,我们会检查页面上是否有<input type="file" />控件。如果存在的话,则创建一个新的UpdatePanelIFrameExecutor实例,并分配给即将执行的WebRequest对象。
  
    根据异步通讯层的实现,WebRequest的作用只是一个保存请求信息的容器,至于如何向服务器端发送信息则完全是Executor的事情了。事实上Executor完全可以不理会WebRequest携带的信息自行处理,而我们的UpdatePanelIFrameExecutor就是这样的玩意儿。它会改变页面上的内容,将信息Post到IFrame元素中,并且处理从服务器端获得的数据。我们现在来关注服务器端的组件。目前的主要问题是,我们如何让页面(事实上是ScriptManager控件)认为它接收到的是一个异步的回送?ScriptManager控件会在HTTP请求的Header中查找特定的项,但是我们在向IFrame中POST数据时无法修改Header。所以我们必须使用一个方法来“欺骗”ScriptManager。
  
    目前使用的解决方案是,我们在POST数据之前在页面中隐藏的输入元素(<input type="hidden" />)中放入一个特定的标记,然后我们开发的服务器端组件(我把它叫做AjaxFileUplaodHelper)会在它的Init阶段(OnInit方法)中在Request Body中检查这个标记,然后使用反射来告诉ScriptManager目前的请求为一个异步请求。
如何让UpdatePanel支持文件上传》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/aspnet/12785.html

 1/11    1 2 3 4 5 6 下一页 尾页


关键字:

关于《如何让UpdatePanel支持文件上传》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td