取消ajax modalpopupextender使用javascript

Question

我有一個modalpopupetentender targetcontrolid = buttCopyFormula。 buttCopyFormula封裝在span標籤中，供用戶驗證他們想要繼續。該按鈕還具有一個JavaScript函數，用於驗證其中一個字段中是否有文本，以及是否將它放置在模式彈出窗口中的文本框中。

如果字段中沒有文本，我想取消彈出窗口並顯示一條消息。

我已經有了一段時間的按鈕跨度，但我只是添加驗證功能。我會想象有一個更好的方法來做到這一點，但只是不知道它是什麼。

執行此功能的最佳方法是什麼？

TargetControl按鈕

<span onclick="return confirm('Copy the selected formula?')"> 
    <asp:ImageButton ID="buttCopyFormula" ImageAlign="AbsBottom" OnClientClick="transferName()" runat="server" ImageUrl="~/images2020/copy_32.png" /> 
    <b style="color:White">Copy</b> 
</span> 

模式彈出

<asp:ModalPopupExtender ID="ModalPopupExtender2" Y="20" runat="server" 
     BackgroundCssClass="modalBackground" CancelControlID="buttFormulaCancel" 
     PopupControlID="Panel2" TargetControlID="buttCopyFormula"> 
</asp:ModalPopupExtender> 

<asp:Panel ID="Panel2" runat="server" CssClass="modalQuestionBackground" 
     Style="display:none"><br /> 
     <h5>Enter a Name for the Formula</h5> 
     <br /><br /> 
     Formula Name:&nbsp; 
     <asp:TextBox ID="txtFormulaNameNew" CssClass="controltext" Width="65%" runat="server" Text=""></asp:TextBox><br /><br /> 
      <center> 
       <asp:Button ID="buttFormulaSaveNew" runat="server" CssClass="button" 
       OnClick="buttFormulaSaveNew_Click" Text="Save Formula" /> 
       &nbsp;&nbsp; 
       <asp:Button ID="buttFormulaCancel" runat="server" CssClass="button" 
       Text="Cancel" /> 
      </center> 
     <br /> 
     </asp:Panel> 

JavaScript函數

function transferName() { 
     var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value; 
     var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName"); 
     if (v === "") { 
      alert("Please select the formula you want to copy before proceeding"); 
      return false; 
     } 
     f.value = v 
    } 

我一直工作在這一點，首先去除跨度周圍的按鈕，放個假模式彈出窗口的超鏈接，並向彈出窗口添加行爲ID。我也改變了JavaScript的如下...

新的JavaScript

function transferName() { 

     var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value; 
     var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName"); 
     if (f === "") { 
      alert("Please select the formula you want to copy before proceeding"); 
      return false; 
     } else { 
      if (confirm('Copy selected formula?')) { 
       f.value = v; 
       var mod = $find("ModalPopupExtender2"); 
       alert(mod.id.toString); 
       mod.show; 
       return false;} 
     } 
    } 

我仍然不能得到modalpopup顯現。我想這是因爲它被封裝在更新面板中。有任何想法嗎？？

Answer 1

您可以訂閱ModelPopupExtender的showing事件並根據某些條件取消顯示。在網頁腳本把下面ScriptManager控件

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); 

function pageLoadedHandler(sender, args){ 
    var popupExtender = $find("ModalPopupExtender2"); // BehaviorId of popup extender 
    popupExtender.remove_showing(onPopupShowing); 
    popupExtender.add_showing(onPopupShowing); 
} 

function onPopupShowing(sender, args) { 
    var txtFormulaNameNew; 
    var txtFormulaName = $get("<%= txtFormulaName.ClientID %>"); 

    if (formulaTextBox.value.length === 0) { 
     alert("Please select the formula you want to copy before proceeding"); 
     args.set_cancel(true); 
    } else { 
     if (confirm('Copy selected formula?')) { 
      txtFormulaNameNew = $get("<%= txtFormulaNameNew.ClientID %>"); 
      txtFormulaNameNew.value = txtFormulaName.value; 
     } 
    } 
}