javascript - 在 C# 函数之前等待弹出响应

Question

我正在尝试使用弹出窗口调用 JavaScript 函数，如果用户单击“确定”，它会调用 C# 函数。但是页面总是在我加载 JavaScript 函数的同时回发。

我的 HTML ASP:按钮:

<asp:Button ID="PrchBtn" runat="server" class="PrchBtn" Text="<%$ Resources:Resource, WebEDI_Save %>" OnClick="PrchBtn_Click" OnClientClick = "Confirm();" />

OnClientClick，调用这个JS函数:

function Confirm() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";

    alertify.confirm('<%= GetGlobalResourceObject("Resource","WebEDI_PDF_MsgBox") %>', function (e) {
        if (e) {
            confirm_value.value = "Yes";
        } else {
            confirm_value.value = "No";
        }
        document.forms[0].appendChild(confirm_value);
    });
}

然后是我的 C# 函数:

public void PrchBtn_Click(object sender, EventArgs e)
    {
        //Code here...
    }

它使用一个简单的“确认”对话框。但我想自定义弹出窗口，这就是我使用“Alertify”库的原因。

感谢您的帮助。

更新(见评论 #3):通过此链接(Call Code Behind Function from JavaScript (not AJAX!))这是我的实际代码:

<asp:Button ID="PrchBtn" runat="server" class="PrchBtn" Text="<%$ Resources:Resource, WebEDI_Save %>" OnClientClick="Confirm(); return false;" />
<asp:Button runat="server" ID="PrchBtnHidden" ClientIDMode="Static" OnClick="PrchBtn_Click" style="display:none;" />

function Confirm() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";

    alertify.confirm('<%= GetGlobalResourceObject("Resource","WebEDI_PDF_MsgBox") %>', function (e) {
        if (e) {
            confirm_value.value = "Yes";
            document.forms[0].appendChild(confirm_value);
            __doPostBack('<%= PrchBtnHidden.UniqueID %>');
        } else {
            confirm_value.value = "No";
            document.forms[0].appendChild(confirm_value);
            __doPostBack('<%= PrchBtnHidden.UniqueID %>');
        }
    });
}

但问题是一样的，JS和C#同时在做事。

更新(奖励错误):我不知道为什么，但我的 alertify 被窃听了。在提示下:

alertify.prompt("Message", function (e, str) {
        // str is the input text
        if (e) {
            Console.Log("Ok");
        } else {
            Console.Log("No");
        }
    }, "Default Value");

当我点击“确定”或“否”时，没有任何东西被触发。而提示的TextBox内容为:

function (e, str) { // str is the input text if (e) { Console.Log("Ok"); } else { Console.Log("No"); } }

还有一个 Alertify.Confirm

alertify.confirm('<%= GetGlobalResourceObject("Resource","WebEDI_PDF_MsgBox") %>', function (e) {
        if (e) {
            confirm_value.value = "Yes";
            document.forms[0].appendChild(confirm_value);
            __doPostBack('<%= PrchBtnHidden.UniqueID %>');
        } else {
            confirm_value.value = "No";
            document.forms[0].appendChild(confirm_value);
            __doPostBack('<%= PrchBtnHidden.UniqueID %>');
        }
    });

只有“Ok”在触发。取消按钮没有任何作用。

解决方案:拿了另一个 alertify.js ( http://alertifyjs.com/ )这是我的 JS 函数:

alertify.confirm('<%= GetGlobalResourceObject("Resource","WebEDI_PDF_MsgBox") %>', function () {
        confirm_value.value = "Yes";
        document.forms[0].appendChild(confirm_value);
        __doPostBack('<%= PrchBtnHidden.UniqueID %>');
    },
      function () {
          confirm_value.value = "No";
          document.forms[0].appendChild(confirm_value);
          __doPostBack('<%= PrchBtnHidden.UniqueID %>');
      }).set('labels', { ok: 'Ok', cancel: 'No' }); 

而且有效!

Answer 1

解决方案:创建 2 个 HTML 按钮，一个可见链接到 JavaScript 函数，另一个不可见链接到 C# 方法:

<asp:Button ID="PrchBtn" runat="server" class="PrchBtn" Text="<%$ Resources:Resource, WebEDI_Save %>" OnClientClick="Confirm(); return false;" />
<asp:Button runat="server" ID="PrchBtnHidden" ClientIDMode="Static" OnClick="PrchBtn_Click" style="display:none;" />

JS:

function Confirm() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";

    alertify.confirm('<%= GetGlobalResourceObject("Resource","WebEDI_PDF_MsgBox") %>', function () {
        confirm_value.value = "Yes";
        document.forms[0].appendChild(confirm_value);
        __doPostBack('<%= PrchBtnHidden.UniqueID %>');
    },
      function () {
          confirm_value.value = "No";
          document.forms[0].appendChild(confirm_value);
          __doPostBack('<%= PrchBtnHidden.UniqueID %>');
      }).set('labels', { ok: 'Ok', cancel: 'No' });
}

当你点击第一个按钮时，它会调用JS。然后JS会调用第二个按钮的PostBack。我在 Alertify 上遇到了问题，所以我使用了另一个来源:http://alertifyjs.com/