1

下面包括我对使用 FineUploader 控件的页面的标记。我已将代码删减为仅包含重要部分。此页面是两个部分,都驻留在 UpdatePanel 中。第一部分是一个包含多行数据的简单表格,每行的最后一列是一个asp:LinkBut​​ton。第二部分是一个嵌套的 UpdatePanel,其中包含一个 div,在第一次加载页面时会在其中呈现 FineUploader 控件(因为 FineUploader 控件是严格的 javascript 并且不进一步存在于代码隐藏中)。此外,当按下 LinkBut​​ton 时this.Page.IsPostBackfalse.

问题是,每当按下页面第一部分的 LinkBut​​ton 时,FineUploader 控件就会消失。我无法从代码隐藏中重新渲染代码(使用类似的东西ClientScript.RegisterStartupScript/RegisterClientScriptBlock)。我还尝试了各种设置,用 UpdatePanel 包装第 1 部分,但它仍然清除了我的 FineUploader 控件。我在想我错误地使用了更新面板,但我不确定(ASP.NET 通常不是我工作的)。

作为补充细节,如果我单击第 2 部分嵌套的 UpdatePanel 中的按钮,我的 FineUploader 控件会神奇地重新出现。

标记(为了可见性,重要部分用多行标记,大部分是空的注释块):

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Setup.aspx.cs" Inherits="Some_Portal.Pages.Setup" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   <div id="locationInfo">
      <br class="clearfloat" />
      <!-- Main Screen Display breaking down the types of information -->
      <asp:UpdatePanel runat="server" ID="updExtensions">
      <Triggers>
         <asp:PostBackTrigger ControlID="btnDownloadCall" />
      </Triggers>
         <ContentTemplate>

         <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

  <style type='text/css'>
    .filename {
    visibility: hidden;
    height: 0;
    width: 0;
    display: block;
}
  </style>

<!-- This portion is to enable the file uploader: -->
<link href="../js/fineuploader/fineuploader-3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="../js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      var uploader = new qq.FineUploader({
         element: $('#fine-uploader')[0],
         request: {
            endpoint: 'AccountSetup.aspx'
         },
         autoUpload: true,
         multiple: false,
         text: {
            uploadButton: '<asp:Button ID="fineUploadButton" runat="server" CssClass="button" style="width:6;5" Text="Browse" />'
         },
         validation: {
            allowedExtensions: ['mp3', 'wav']
         }
      });
   });
</script>


            <!--                             -->
            <!--                             -->
            <!--           Part 1            -->
            <!--                             -->
            <!--                             -->
            <table width="100%" cellpadding="0" border="0px" style="border-color:white;">
               <tr>
                  <th>Extensions</th>
               </tr>
               <tr>
                  <td style="width: 100%; border:0; border-bottom-color:white; border-bottom-style:none;">
                     <asp:DataGrid ID="dgExtensions" runat="server" AllowSorting="true" AllowPaging="true" PagerStyle-BorderStyle="None"  PagerStyle-BorderColor="white" PagerStyle-BorderWidth="0px"
                        AutoGenerateColumns="false" PageSize="10" DataKeyField="id" OnPageIndexChanged="dgExtensions_OnPageIndexChanged"
                        PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnSortCommand="dgExtensions_OnSortCommand"                        
                        Width="100%" BorderColor="White"
                     HeaderStyle-CssClass="GridHeader" 
                      ItemStyle-CssClass="GridItem"
                     AlternatingItemStyle-CssClass="GridAltItem">
                        <Columns>
                           <asp:BoundColumn DataField="number" HeaderText="Number" SortExpression="number">
                              <ItemStyle HorizontalAlign="center" Width="8%" />
                              <HeaderStyle HorizontalAlign="center" Width="8%" />
                           </asp:BoundColumn>
                           <asp:BoundColumn DataField="extensionType" HeaderText="Type" SortExpression="extensionType">
                              <ItemStyle HorizontalAlign="center" Width="18%" />
                              <HeaderStyle HorizontalAlign="center" Width="18%" />
                           </asp:BoundColumn>
                           <asp:TemplateColumn HeaderText="Description" SortExpression="description">
                              <HeaderStyle Width="25%" CssClass="dgLeftPad" />
                              <ItemStyle Width="25%" CssClass="dgLeftPad" />
                              <ItemTemplate>
                                 <asp:Literal runat="Server" ID="litExtensionDescription" Text='<%# Eval("description").ToString() %>' />
                                 <asp:HiddenField runat="server" ID="hidExtensionID" Value='<%# Eval("id").ToString() %>' />
                                 <asp:HiddenField runat="server" ID="hidExtensionTypeID" Value='<%# Eval("extensiontypeid").ToString() %>' />
                                 <asp:HiddenField runat="server" ID="hidPrevDescription" Value='<%# Eval("description").ToString() %>' />
                              </ItemTemplate>
                           </asp:TemplateColumn>
                           <asp:BoundColumn DataField="status" HeaderText="Status" SortExpression="status">
                              <ItemStyle HorizontalAlign="center" Width="24%" />
                              <HeaderStyle HorizontalAlign="center" Width="24%" />
                           </asp:BoundColumn>                       
                           <asp:TemplateColumn HeaderText="">
                              <HeaderStyle Width="10%" />
                              <ItemStyle Width="10%" HorizontalAlign="center" />
                              <ItemTemplate>
                                 <!--                              -->
                                 <!--                              -->
                                 <!-- Clicking this makes the Fine -->
                                 <!-- Uploader control go away.    -->
                                 <!--                              -->
                                 <!--                              -->
                                 <asp:LinkButton runat="Server" ID="lbEditExtension" CommandArgument='<%# Eval("id").ToString() %>'
                                    OnCommand="EditExtension" Text="Edit" Visible='<%# SetEditEnabled(Eval("extensiontypeid").ToString()) %>'/>
                              </ItemTemplate>
                           </asp:TemplateColumn>
                        </Columns>
                        <HeaderStyle BackColor="#eeeeee" />
                        <PagerStyle HorizontalAlign="Right" Mode="NumericPages" />
                     </asp:DataGrid>
                  </td>
               </tr>
               <tr>
                  <asp:Panel runat="server" ID="pnlNoExtensions">
                     <td colspan="3" align="center" style="color: Red;">
                        There are no extensions established for your account
                     </td>
                  </asp:Panel>
               </tr>
            </table>
            <br />


            <!--                             -->
            <!--                             -->
            <!--           Part 2            -->
            <!--                             -->
            <!--                             -->
            <asp:Panel runat="server" ID="Panel1" Width="100%">
            <asp:UpdatePanel runat="server" ID="updRouteGroup" UpdateMode="Conditional">
              <Triggers>
                <asp:PostBackTrigger ControlID="btnDisableOnHold" />
              </Triggers>
              <ContentTemplate>        
               <asp:Panel ID="pnlImpExcel" runat="Server" >
              <div style="width:100%">
               <table colspan="0" width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                     <th colspan="3">
                        On Hold Music
                     </th>
                  </tr>
                  <tr>
                     <!--                             -->
                     <!--   FineUploader Control      -->
                     <!--                             -->
                     <td align="left" valign="middle"><div id="fine-uploader"></div></td>
                     <td align="center" valign="middle"><asp:Label ID="lblOnHoldFile" runat="server" Text="Current file: none"/></td>
                     <td align="right" valign="middle"><asp:Button ID="btnDisableOnHold" runat="server" style="margin-right:7px;width:87px;" Text="Disable Hold Music" CssClass="button" OnClick="btnDisableOnHold_OnClick" /></td>
                  </tr>               
                  <tr><td colspan ="2" align="center"><asp:Label runat="server" ID="lblUploadError" style="color: Red;" Visible="false" /></td></tr>
               </table> 
               </div>

               </asp:Panel> 
               </ContentTemplate> 
            </asp:UpdatePanel> 
            </asp:Panel>

            <!-- The Operator Extension Panel -->
            <asp:Panel runat="server" ID="Panel2">
            <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
              <Triggers>
                <asp:PostBackTrigger ControlID="btnOperatorUpdate" />
              </Triggers>

              <ContentTemplate>        
               <asp:Panel ID="Panel3" runat="Server" >
              <div>
               <table colspan="0" width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                     <th colspan="3">
                        Operator Extension
                        <asp:Button ID="btnOperatorUpdate" runat="server" Text="Save" CssClass="button" style="margin-right:2px;width:87px;float:right;padding-right:10px;" OnClick="btnOperatorUpdate_OnClick" />                        
                        <asp:DropDownList runat="Server" ID="ddlOperatorExtension" style="float:right;margin-right:10px;" Width="250px" AutoPostBack="false" />
                     </th>
                  </tr>                  
               </table> 
               <br />
               </div>
               </asp:Panel> 
               </ContentTemplate> 
            </asp:UpdatePanel> 
            </asp:Panel>



         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
</asp:Content>

如何使我的 FineUploader 控件保持可见?

编辑 1:考虑到这可能是页面生命周期问题,我尝试通过添加以下内容来手动呈现控件:

  protected void Page_Init(object sender, EventArgs e)
  {
     string script = "<script type=\"text/javascript\">" +
                        "   alert('oh hey');" + 
                        "   $(document).ready(function () {" +
                        "      var uploader = new qq.FineUploader({" +
                        "         element: $('#fine-uploader')[0]," +
                        "         request: {" +
                        "            endpoint: 'AccountSetup.aspx'" +
                        "         }," +
                        "         autoUpload: true," +
                        "         multiple: false," +
                        "         text: {" +
                        "            uploadButton: '<asp:Button ID=\"fineUploadButton\" runat=\"server\" CssClass=\"button\" style=\"width:6;5\" Text=\"Browse\" />'" +
                        "         }," +
                        "         validation: {" +
                        "            allowedExtensions: ['mp3', 'wav']" +
                        "         }" +
                        "      });" +
                        "   });" +
                        "</script>";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "HideOnPostback", script, false);

        System.Diagnostics.Debug.WriteLine("Page_Init() run");
  }

结果是,如果我单击第 1 部分中的“编辑”链接按钮,我会在调试输出中看到“Page_Init() 运行”,但控件仍然消失,并且永远不会显示“哦,嘿”js 警报。但是,如果我单击第 2 部分中的另一个按钮,我会在调试输出中看到“Page_Init() 运行”,我会看到“哦,嘿”警报,并且 FineUploader 按钮仍然可见。

4

1 回答 1

3

我相信您遇到了这个问题,因为您在页面生命周期中加载 FineUploader 控件的时间太晚,无法正确加载 ViewState。单击该按钮会触发回发,从而重新启动页面的生命周期。ViewState 在 Page_Load() 之前加载,因此请尝试在 Page_Init() 期间将控件添加到页面,以便可以加载 ViewState。

于 2013-07-25T15:13:52.293 回答