SignalR更新面板僅適用於第一次

Question

我在更新面板中有以下代碼。當屏幕加載時，SignalR代碼工作正常。但是，第一次後，一旦我點擊一個按鈕，SignalR代碼不會再觸發，直到我導致重定向回頁面。

基本上我正在做的是當用戶點擊預覽按鈕時，它會關閉報告過程。一個Ajax模式彈出窗口顯示一個進度指示器和一個取消按鈕。如果用戶點擊取消按鈕，取消令牌被設置，並且報告被取消。通過使用SignalR技術，ui線程不會被阻塞，用戶可以單擊取消按鈕。這在第一次正常工作。但是，在點擊取消按鈕後，下次單擊取消按鈕時它不起作用。但是，當我重新定向到該頁面時，它可以工作。

如果我在更新面板之外移動鏈接按鈕，它每次都有效。

 <asp:updatepanel runat="server" id="UpdatePanelFooter" rendermode="Inline" updatemode="Conditional">      
      <contenttemplate> 
        <table width="100%"> 
        <tr> 
         <td> 
          <div id="divBottomBanner"> 
           <asp:label id="LabelHelpID" runat="server" text="" visible="false"></asp:label>&nbsp;  
           <asp:linkbutton id="LinkButtonPreview" runat="server" OnClick="LinkButtonPreview_Click">Preview</asp:linkbutton> 
           <asp:linkbutton id="LinkButtonSaveAs" runat="server" onclick="LinkButtonSaveAs_Click">Save Prompts As</asp:linkbutton> 
           <asp:linkbutton id="LinkButtonGenerateSP" runat="server" onclick="LinkButtonGenerateSP_Click"><<<< GENERATE SP >>>></asp:linkbutton> 
           <asp:linkbutton id="LinkButtonInvisibleTargetControlIDSAVEAS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton> 
           <asp:linkbutton id="LinkButtonInvisibleTargetControlIDPROGRESS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton> 
          </div> 
         </td> 
        </tr> 
       </table> 
        <ajaxtoolkit:modalpopupextender id="ModalPopupExtenderPROGRESS" runat="server" targetcontrolid="LinkButtonInvisibleTargetControlIDPROGRESS" behaviorid="PROGRESS" popupcontrolid="PanelPROGRESS" backgroundcssclass="ModalBackground" dropshadow="true"> 
        </ajaxtoolkit:modalpopupextender> 
        <asp:panel id="PanelPROGRESS" runat="server" cssclass="ModalPopup" style="display: none;" width="75em"> 
         <table id="TablePROGRESS" width="95%"> 
          <tr> 
           <td style="width: 10%"></td> 
           <td style="width: 30%"></td> 
           <td style="width: 50%"></td> 
           <td style="width: 10%"></td> 
          </tr> 
          <tr> 
           <td></td> 
           <td colspan="2" align="center">Processing Please Wait 
           <br /> 
            <br /> 
            <hr /> 
           </td> 
          </tr> 
          <tr> 
           <td></td> 
           <td colspan="2" align="center"> 
            <img src="../Images/moving_lights.gif" alt="Processing..." /> 
            <hr /> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <br /> 
            <br /> 
           </td> 
          </tr> 
          <tr> 
           <td></td> 
           <td align="center" colspan="2"> 
            <asp:linkbutton id="LinkButtonCancelPROGRESSXD" runat="server" height="100%" cssclass="Button" causesvalidation="false" tabindex="6">&nbsp;&nbsp;&nbsp;Cancel Preview Report&nbsp;&nbsp;&nbsp;</asp:linkbutton> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <br /> 
            <br /> 
           </td> 
          </tr> 
         </table> 
        </asp:panel> 
      </contenttemplate> 
     </asp:updatepanel> 

然後，我在SignalR部分中使用的腳本中具有以下代碼。

/// <reference path="../scripts/jquery-1.8.3.js" /> 
/// <reference path="../scripts/jquery.signalR-1.0.0.js" /> 

/*! 
    ASP.NET SignalR Report Processing 
*/ 

// Crockford's supplant method 
if (!String.prototype.supplant) { 
    String.prototype.supplant = function (o) { 
     return this.replace(/{([^{}]*)}/g, 
      function (a, b) { 
       var r = o[b]; 
       return typeof r === 'string' || typeof r === 'number' ? r : a; 
      } 
     ); 
    }; 
} 

// A simple background color flash effect that uses jQuery Color plugin 
jQuery.fn.flash = function (color, duration) { 
    var current = this.css('backgroundColor'); 
    this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration/2) 
     .animate({ backgroundColor: current }, duration/2); 
} 

$(function() { 

    var RPT = $.connection.ReportProcessing; 

    function stopRPT() { 
     //$ReportProcessingUl.stop(); 
    } 

    function init() { 
     return RPT.server.waitForReportToBeReady().done(function() { 
      // Add Code Here 
     }); 
    } 

    //function jsFireThePreviewClick() { 
    // var ctrl = $("#ImageButtonRUNTHEREPORTXD"); 
    // if (ctrl != null) { 
    //  ctrl.click(); 
    // } 
    //} 

    // Add client-side hub methods that the server will call 
    $.extend(RPT.client, { 
     updateReportProgress: function() { 

     }, 

     ReportOpened: function() { 
      //scrollRPT(); 
     }, 

     ReportClosed: function() { 
      stopRPT(); 
     }, 

     ReportCancel: function() { 
      return init(); 
     } 
    }); 

    // Start the connection 
    $.connection.hub.start() 
     .pipe(init) 
     .pipe(function() { 
      return RPT.server.waitForReportToBeReady(); 
     }) 
     .done(function (state) { 
      if (state === 'Open') { 
       RPT.client.ReportOpened(); 
      } else { 
       RPT.client.ReportClosed(); 
      } 

      // Wire up the buttons 
      $("#LinkButtonPreview").click(function() { 
       RPT.server.openReport(); 
      }); 

      $("#close").click(function() { 
       RPT.server.closeReport(); 
      }); 

      $("#LinkButtonCancelPROGRESSXD").click(function() { 
       RPT.server.cancelReport(); 
       alert('Report Canceled By User'); 
      }); 
     }); 
}); 

如果我將LinkBut​​tonPreview移到更新面板之外，它每次都能正常工作。我需要在更新面板中包含此鏈接按鈕，但每次使用SignalR時都需要它工作。我知道它與更新面板以及處理回發的方式有關。然而，我無法弄清楚我需要做些什麼才能使其每次正確工作。就像我說的那樣，它第一次工作，但在那之後它沒有。

Answer 1

如您所懷疑的，問題與更新面板有關。您正在向#LinkButtonPreview按鈕添加單擊事件處理程序，但該按鈕元素僅在更新面板刷新之前存在。當更新面板更新時，將使用相同的標識創建一個新按鈕，但沒有附加到舊按鈕的事件處理程序。

解決方案是將您的點擊事件處理程序附加到永遠不會更新/替換的元素，以便事件處理程序不會被刪除。你仍然可以有事件處理程序只是沒了事件附加到#LinkButtonPreview迴應#LinkButtonPreview點擊直接使用.on()：

$(document).on("click", "#LinkButtonPreview", function(){ 
    RPT.server.openReport(); 
}); 

由於document是#LinkButtonPreview祖先元素，單擊事件從#LinkButtonPreview會起泡了所有的方式發起到document。如果您沒有指定#LinkButtonPreview作爲.on()的第二個參數，則該事件處理程序將通過在頁面上進行任何點擊來觸發。

您還應該以與#LinkButtonCancelPROGRESSXD相同的方式附加您的點擊事件處理程序。