與PopupControlExtender一起使用onCheckedChanged，並希望在取消選中時防止彈出

Question

對此我還是比較新的，並試圖找到答案，所以希望我不會重複這一點。

我使用的是ASP.NET，並有一個複選框控件，它在更改時使用onCheckedChanged方法調出一個彈出框。這個彈出框中有一些信息，並有一個「關閉」按鈕，它可以成功關閉彈出窗口。

我想要的是防止出現彈出如果複選框未選中。我目前有onCheckedChanged調用後面的代碼，如果未檢查控件，取消擴展程序調用的代碼，但彈出窗口很快出現在關閉之前。我怎樣才能防止它呢？

這是適當的頁面代碼：

 <div class="row" id="divDDMandate" runat="server"> 

     <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always"> 
      <ContentTemplate> 
       <asp:CheckBox ID="chkDDMandate" Width="20px" Visible="true" runat="server" AutoPostBack="true" 
       OnCheckedChanged="clientchkDDMandateChanged(this);" on />   
       <asp:Literal ID="ltlDDMandate" runat="server">Direct Debit Mandate (by post)</asp:Literal> 

      <asp:PopupControlExtender ID="chkDDMandate_PopupControlExtender" runat="server" 
       DynamicServicePath="" Enabled="true" PopupControlID="PanelDDMandateDownload" 
       TargetControlID="chkDDMandate" 
       Position="Bottom" OffsetX="-20" OffsetY="10" /> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 

...這是背後的方法我的代碼：

 protected void chkDDMandateChanged(object sender, EventArgs e) 
    { 
     //Cancel the panel if unchecking 
     if ((!chkDDMandate.Checked) && chkDDMandate_PopupControlExtender.Enabled) 
     { 
      chkDDMandate_PopupControlExtender.Cancel(); 
     } 
    } 

我會感謝任何幫助。

乾杯

Answer 1

從chkDDMandate複選框刪除AutoPostBack="true"和ScriptManager控件之後添加下面的腳本：

<script type="text/javascript"> 
    function pageLoad() { 
     var extender = $find("<%= chkDDMandate_PopupControlExtender.ClientID %>"); 
     extender.remove_showing(onPopupShowing); 
     extender.add_showing(onPopupShowing); 
    } 

    function onPopupShowing(sender, args) { 
     var checkBoxChecked = $get("<%= chkDDMandate.ClientID %>").checked; 
     args.set_cancel(!checkBoxChecked); 
    } 
</script> 

Answer 2

後，尤里與事件處理程序提供給我，我不得不求助於使用隱藏字段，以保持跟蹤彈出窗口和複選框的可見性。

這是因爲我不希望彈出窗口在刪除時出現，並且onClick方法使用複選框控件的設置被設置爲，而onShowing方法使用當前可見設置的控制。我不得不使用隱藏的字段來保持可見性設置，並在我想要的時候更新它們。

我很驚訝彈出式擴展器的_visible屬性總是設置爲'false'，所以我也無法使用它。

這可能是一個黑客位，但是這是我當前的JavaScript代碼的任何人有興趣：

<script type="text/javascript"> 

    function pageLoad() { 
    // Attach an event handler for over-riding the showing Popup. 
     var extender = $find("PopupControlExtenderBehaviorID"); 
     extender.remove_showing(onPopupShowing); 
     extender.add_showing(onPopupShowing); 

    // Initialise the hidden fields based on the page status after refresh. 
     var hfPopup = $get("ctl00_body_PopupVisibleID"); 
     var hfCheckbox = $get("ctl00_body_CheckboxChecked"); 

    // Popup will always be hidden on page refresh 
     hfPopup.value = "Hidden"; 
     hfCheckbox.value = $get("ctl00_body_chkDDMandate").checked; 
    } 

    function onPopupShowing(sender, args) { 
     // This function will over-ride the Popup showing if applicable. 
     var popupVisible = $get("ctl00_body_PopupVisibleID"); 
     var checkboxChecked = $get("ctl00_body_CheckboxChecked"); 

     // If Popup hidden and 'tick' being taken out of the Checkbox, don't show the Popup. 
     if (popupVisible.value == "Hidden" && checkboxChecked.value == "true") { 
      args.set_cancel(true); 
     } 
     else if (popupVisible.value == "Hidden") { 
      popupVisible.value = "Visible"; 
      } 
      else {popupVisible.value = "Hidden";} 

    } 

    function OnClientClickCheck(o) { 
     // This function will set the Hidden field value of Checkbox. 
     // This is because when the OnClick method reads the control checkbox value it uses the value it's 
     // being set to; whereas, the onPopupShowing method uses the value it is currently displaying! 
     var pce = $find('PopupControlExtenderBehaviorID'); 
     var checkboxChecked = $get("ctl00_body_CheckboxChecked"); 
     var isChecked = o.checked; 

     if (isChecked) { 
     // isChecked is what it is being changed to... 
      checkboxChecked.value = "false"; 
     } 
     else { 
      checkboxChecked.value = "true"; 
     } 
     pce.showPopup(); 
    } 
</script> 

感謝在這裏得到的幫助。