覆盖浏览器window.confirm,并在回答“是”时同步进行服务器调用

时间:2019-01-08 16:36:04

标签: javascript jquery asp.net webforms

我正在处理一个用ASP.net Web表单开发的非常大的项目。

我想替换浏览器的默认window.confirm实现,这样,每当调用Confirm方法时,都会显示一个新的自定义确认对话框。

因此,每当我单击带有确认对话框的按钮时:

<asp:Button runat="server" Text="What returns from Confirm?" OnClick="btnConfirm_Click" OnClientClick="confirm('are U sure')" />

将显示一个新的确认对话框,并且只有在用户答复以“是”(或“确定”)确认对话框之后,才会触发服务器端事件(btnConfirm_Click)。 如果用户回答“否”(或取消),则仅关闭确认对话框。

需求的另一个重要部分是保留客户端调用签名(带有asp:button的行),因为这意味着要遍历该项目并在数千个地方更改客户端调用签名。

问题是,是否有可能,如果可以,怎么办?

我找到了一种实现所需行为的方法,但未能使客户端签名/逻辑保持不变

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CustomConfirmPOC_Web.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Customized Confirm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
</head>
<body>
     <form runat="server">
        <asp:Button runat="server" ID="btnConfirm" OnClick="btnConfirm_Click" hidden ="hidden"/>
    </form>
    <button id="btn1" class="ui-button"  onclick="confirm('Here goes your <strong> slogan </strong> !')                           
    <br /> 
    <p id="demo"></p>
</body>
    <script type = "text/javascript">
        $(document).ready(function () {
            document.getElementById("btnConfirm").hidden = true;
               $("#btn1").click(function(){
                     confirm('Here goes your <strong> slogan </strong> !')
                         .then(function (answer) {
                         //Here goes desired behaviour implementation according to answer from the confirm (true or false)
                         //For example:
                         if (answer==true) {
                                var confirm_value = document.createElement("INPUT");
                                confirm_value.type = "hidden";
                                confirm_value.name = "confirm_value";
                                confirm_value.value = true;
                                document.forms[0].appendChild(confirm_value);
                                var cntrl = document.getElementById("btnConfirm");
                                if (cntrl != undefined) {
                                    cntrl.click();
                                }
                         }
                         var demo = document.getElementById("demo");
                         demo.innerHTML = "Confirmation dialog returned " + answer;
                         $(demo).show().fadeOut( 3000 );
              });        
             });
        });

window.confirm = function (message) {
    var defer = $.Deferred();
    $(document.createElement('div'))
        .attr({ class: 'confirm' })
        .html(message)
        .dialog({
            buttons: {
                "Ok": function () {
                    defer.resolve(true);
                    //ExecuteYes() ?;

                    $(this).dialog("close");

                },
                "Cancel": function () {
                    defer.resolve(false);
                    $(this).dialog("close");
                }
            }
            ,
            close: function () {
                defer.resolve(false);
                $(this).dialog('destroy').remove();
            },

            draggable: true,
            modal: true,
            resizable: false,
            width: 400,
            height: 200,
            title: 'Custom Confirm Dialog'

        });
    return defer.promise();
};
    </script>
</html>

0 个答案:

没有答案