• 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)
    {

      //运行代码或调用其他FileUpload.aspx中的JavaScript,传入的参数可以参与JavaScript的运行或传达到其他JavaScript中运行。

    }

    2. 在主页面Test.aspx调用FileUpload.aspx的JavaScript
    在FileUpload.aspx中定义以下JavaScript供主页面调用:
    function UploadWindowJavaScript(参数)
    {

      //运行代码或调用其他FileUpload.aspx中的JavaScript,传入的参数可以参与JavaScript的运行或传达到其他JavaScript中运行。
    }

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

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

  • 相关阅读:
    wordpress 自己制作子主题 child theme
    wordpress 主题开发
    python的曲线平滑工具,及python画一条线中包含不同粗细不同颜色的画线方法
    openfire 使用已有的数据库作为用户认证数据库 Custom Database Integration Guide
    How to store scaling parameters for later use
    在android上跑 keras 或 tensorflow 模型
    Win10更新搜狗输入法后重启输入密码蓝屏
    Audition CC2019 MME设备内部错误怎么解决!
    数据库优化解决方案
    微信小程序文本如何换行
  • 原文地址:https://www.cnblogs.com/MatrixBlogs/p/7213813.html
Copyright © 2020-2023  润新知