仅使用javascript控件时的UpdatePanel问题

Question

下面是我使用FineUploader控件创建的一个页面的标记。我已经缩短了代码，只包含重要的部分。此页面由两个部分组成，它们都驻留在UpdatePanel中。第一部分是包含多行数据的简单表，每行的最后一列是asp:LinkButton。第二部分是一个嵌套的UpdatePanel，它包含一个FineUploader，第一次加载页面时在其中呈现FineUploader控件(因为javascript控件是严格意义上的javascript，并且不再存在于代码隐藏中)。此外，当按下LinkButton时，this.Page.IsPostBack为false。

问题是，只要按下页面第一部分中的LinkButton，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部分中的“编辑”LinkButton，我会在调试输出中看到"Page_Init() run“，但控件仍然消失，并且不会显示”哦嘿“js警告。但是，如果我单击第2部分中的其他按钮，我会在调试输出中看到"Page_Init() run“，我会看到”哦嘿“警告，并且FineUploader按钮仍然可见。

Answer 1

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