javascript - 仅使用 javascript 控件时出现 UpdatePanel 问题

Question

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

问题在于，只要按下页面第一部分中的 LinkBut​​ton，FineUploader 控件就会消失。我无法从代码隐藏中获取要重新呈现的代码(使用 ClientScript.RegisterStartupScript/RegisterClientScriptBlock 之类的东西)。我还尝试了各种设置，使用 UpdatePanel 包装第 1 部分，但它仍然会清除我的 FineUploader 控件。我想我没有正确使用更新面板，但不确定(我通常不使用 ASP.NET)。

作为一个额外的细节，如果我在第 2 部分嵌套的 UpdatePanel 中单击一个按钮，我的 FineUploader 控件会神奇地重新出现。

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

<%@ 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 部分中单击“编辑”LinkBut​​ton，我会在调试输出中看到“Page_Init() run”，但控件仍然消失并且“哦嘿”js 警报永远不会显示。但是，如果我单击第 2 部分中的另一个按钮，我会在调试输出中看到“Page_Init() run”，我会看到“哦嘿”警报并且 FineUploader 按钮仍然可见。

Answer 1

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