使用javascript取消ajax modalpopupextender

Question

我有一个带有 targetcontrolid = buttCopyFormula 的 modalpopupextender。 buttCopyFormula 被包裹在一个 span 标签中，供用户验证他们想要继续。该按钮还有一个 javascript 函数，可验证其中一个字段中是否有文本，如果有，则将其放置在 modalpopup 内的文本框中。

如果字段中没有文本，我想取消弹出窗口并显示一条消息。

我已经在按钮周围设置了一段时间，但我只是添加了验证功能。我想有一个更好的方法可以做到这一点，但只是不确定它是什么。

执行此功能的最佳方式是什么？

目标控制按钮

<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;}
       }
   }

我仍然无法显示模态弹出窗口。我想这是因为它包含在更新面板中。有什么想法吗？？

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;
        }
    }
}