FileUpload与UpdatePanel

UpdatePanel是Asp.net实现页面部分刷新所使用的控件。还是挺不错的控件,避免了不少因为刷新所带来的不良用户体验(点击Asp.net按钮触发页面刷新,清楚text box中的内容)。但UpdatePanel是不能与FileUpload同时使用的。这也是微软明确指出的问题。同时使用FileUpload与UpdatePanel需要“耍点小聪明”。一个切实可行的方法是结合IFrame一起使用。使用UpdatePanel包含一个IFrame,然后写一个上传文件的页面,将这个页面放到IFrame里面。具体实现如下:

1. 在主页面Test.aspx中使用UpdatePanel包住Iframe
...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <iframe id="uploadFile" name="uploadFile" src="FileUpload.aspx" style="border-style: none"></iframe>
  </ContentTemplate>
</asp:UpdatePanel>
...
IFrame的src属性指向有FileUpload控件的页面FileUpload.aspx。

2. 在FileUpload.aspx页面中放置FileUpload控件
...
<asp:FileUpload ID="fileUploadImage" runat="server" />&nbsp;
<asp:Button ID="btnUploadImage" runat="server" Text="上传" OnClick="btnUploadImage_Click" />
...
这样就可以实现FileUpload与UpdatePanel同时使用。但这还远远不足!主页面需要和iframe中的页面进行交互才满足实际需求。交互可以通过JavaScript来实现。具体如下:

1. 在FileUpload.aspx(包含在iframe页面中的页面)调用主页面的JavaScript
在FileUpload.aspx中定义以下JavaScript:
function callBack()
{
  var fileName = $("#hdfTmpPath").val();
  window.parent.callBack(fileName); //调用主页面JavaScript
}

在主页面Test.aspx中定义被上面调用的JavaScript:
function callBack(fileName)
{
  $("#hdfTmpPath").val(fileName)
}

2. 在主页面Test.aspx调用FileUpload.aspx的JavaScript
在FileUpload.aspx中定义以下JavaScript供主页面调用:
function UploadWindowJavaScript(参数)
{
  if(参数)
  {
    //运行代码
  }
}

在主页面使用以下代码调用FileUpload.aspx中的JavaScript
document.getElementById("uploadFile").contentWindow.UploadWindowJavaScript(参数); //主页面调用FileUpload中的JavaScript

以上便是同时使用UpdatePanel和FileUpload控件的事例方法。

时间: 2024-12-08 17:58:26

FileUpload与UpdatePanel的相关文章

c#笔试基础(转载)

技术类面试.笔试题汇总 注:标明*的问题属于选择性掌握的内容,能掌握更好,没掌握也没关系. 下面的参考解答只是帮助大家理解,不用背,面试题.笔试题千变万化,不要梦想着把题覆盖了,下面的题是供大家查漏补缺用的,真正的把这些题搞懂了,才能“以不变应万变”.回答问题的时候能联系做过项目的例子是最好的,有的问题后面我已经补充联系到项目中的对应的案例了. 1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以

C#笔试面试宝典值得收藏1

技术类面试.笔试题汇总 注:标明*的问题属于选择性掌握的内容,能掌握更好,没掌握也没关系. 下面的参考解答只是帮助大家理解,不用背,面试题.笔试题千变万化,不要梦想着把题覆盖了,下面的题是供大家查漏补缺用的,真正的把这些题搞懂了,才能“以不变应万变”.回答问题的时候能联系做过项目的例子是最好的,有的问题后面我已经补充联系到项目中的对应的案例了. 1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以

.NET工程师面试宝典

.Net工程师面试笔试宝典 传智播客.Net培训班内部资料 这套面试笔试宝典是传智播客在多年的教学和学生就业指导过程中积累下来的宝贵资料,大部分来自于学员从面试现场带过来的真实笔试面试题,覆盖了主流的.Net笔试面试题.很多学员面试回来都会说“这次面试出的题几乎都在面试笔试宝典上有”,比如下面就是一个老学员的来信: 这套面试题主要目的是帮助那些还没有.Net软件开发实际工作经验,而正在努力寻找.Net软件开发工作的朋友在笔试时更好地赢得笔试和面试.由于这套面试题涉及的范围很泛,很广,很杂,大家不

2019面试宝典之.Net

1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部和继承类中可以访问. public : 公共成员,完全公开,没有访问限制. internal: 当前程序集内可以访问. 2.ADO.NET中的五个主要对象 Connection:主要是开启程序和数据库之间的连接.没有利用连接对象将数据库打开,是无法从数据库中取得数据的.Close和Dispose的

【c#.Net】面试题库总结50题

1.简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部和继承类中可以访问. public : 公共成员,完全公开,没有访问限制. internal: 当前程序集内可以访问. 2.ADO.NET中的五个主要对象 Connection:主要是开启程序和数据库之间的连接.没有利用连接对象将数据库打开,是无法从数据库中取得数据的.Close和Dispose的

使用UpdatePanel时FileUpload失效的问题

出处:http://www.cnblogs.com/caicainiao/archive/2010/12/08/1900377.html 1.使用UpdatePanel后,FileUpload的HasFile始终为false,无论你是否选中了上传文件! 2.使用UpdatePanel后,在后台程序中,你在使用Response.Write("")看看,不给你JS错才怪,而且打印不出你要的东西! 方案一:设置ScriptManager 的EnablePartialRendering=&qu

使用UpdatePanel时FileUpload失效的问题!【FileUpload上传文件失败】

1.使用UpdatePanel后,FileUpload的HasFile始终为false,无论你是否选中了上传文件! 方案一:设置ScriptManager 的EnablePartialRendering="false" 即可! 缺点:同一个页面上的多个UpdatePanel不可以独自刷新了.另外,当你的UpdatePanel中存在Validator (验证控件)的话,会造成整个页面postback <asp:ScriptManager ID="ScriptManager

fileupload控件在ajax中无法使用

google得到的方法: 1.http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx There is a better way of doing it with Ajax Control Toolkit version 3.0.30930 which works with .NET 3.5 SP1 and Visual Studio 2008 SP1. 

FileUpload上传控件用法详解 (转载)

FileUpload 类显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt )来指定要上载的文件.用户也可以通过单击“浏览” 按钮,然后在“选择文件” 对话框中定位文件来选择文件. 注意: FileUpload 控件设计为仅用于部分页面呈现期间的回发情况,并不用于异步回发情况.在 UpdatePanel 控件内部使用 FileUpload 控件时,