如何使用jQuery UI对话框作为；“提交前确认”；关于ASP.NET窗体的对话框

我试图利用jQueryUI（或任何其他对话框插件）来替换默认的确认对话框。关于StackOverflow有很多类似的问题和答案，例如：

        buttons: {
            'Delete all items': function() {
                $(this).dialog('close');
                currentForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }

然而，在ASP.NET中，我需要更多的东西

由于页面上有一个表单限制，在ASP.NET页面（使用ASP.NET 3.5）上，我可以有多个按钮提交同一表单，并且根据提交的标题信息页面知道哪个控件（按钮）触发表单提交，并且可以在服务器上调用正确的方法（方法附加到按钮的单击事件）

如果我使用其他StackOverflow答案的解决方案，例如：

        buttons: {
            'Delete all items': function() {
                $(this).dialog('close');
                currentForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }

回发时不会调用任何事件处理程序。如果我将其替换为：

        buttons: {
            'Delete all items': function() {
                $(this).dialog('close');
                $buttonThatWasConfirmed.click();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }

---

这将导致无休止的模态对话框递归。如何在ASP.NET中解决它？

我在不久前提出了这项工作，所以不确定它是否仍然与最新的jquery ui对话框插件保持同步，但你已经了解了它的基本概念。这使（很不幸）使用

eval

执行javascript asp.net生成，以提交放置在锚的href中的表单。您只需为锚提供css类

确认所需的

<div class="confirm-dialog ui-helper-hidden" title="Confirm">
    <span class="ui-icon ui-icon-alert"></span>
    <p>Are you sure?</p>
</div>

<script language="javascript" type="text/javascript">

$(function(){
    // call confirm dialog boxes from buttons that require it
    $(".confirm-required:isactive").click(function () {
        var callback = $(this).attr("href");
        return showConfirmDialog(callback);
    });
});

this.showConfirmDialog = function (callback) {
    $(".confirm-dialog").dialog("destroy");
    $(".confirm-dialog").dialog({
        autoOpen: true,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                eval(callback);
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    return false;
};

</script>


你确定吗

$（函数（）{
//从需要的按钮调用确认对话框
$（“.confirm required:isactive”）。单击（函数（）{
var callback=$（this.attr（“href”）；
返回showConfirmDialog（回调）；
});
});
this.showConfirmDialog=函数（回调）{
$（“.confirm dialog”）.dialog（“destroy”）；
$（“.confirm dialog”）.dialog({
自动打开：对，
莫代尔：是的，
按钮：{
“OK”：函数（）{
$（此）.dialog（“关闭”）；
eval（回调）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
返回false；
};
作为一个选项：对按钮控件使用
SubmitBehavior=“false”
，并将脚本放在表单结束标记之前：

<script type="text/javascript">
    var originalDoPostBack = __doPostBack;
    __doPostBack = function (sender, args) {
        $("#dialog").dialog({
            modal: true,
            title: "Confirm action",
            buttons: {
                Yes: function () {
                    $(this).dialog("close");
                    originalDoPostBack(sender, args);
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    };
</script>


var originalDoPostBack=uu doPostBack；
__doPostBack=函数（发送方，参数）{
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“确认行动”，
按钮：{
是：函数（）{
$（此）.dialog（“关闭”）；
原始回发（发送方，args）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
};

如果您只想明确地确认特定按钮的呼叫，您可以使用下面的脚本（可以放在标题中）

函数confirmPostBack（发送方，参数）{
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“确认行动”，
按钮：{
是：函数（）{
$（此）.dialog（“关闭”）；
__doPostBack（sender.name，args | |“”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
返回false；
}
我最近使用过它，尽管它只适用于链接按钮。如果您愿意，您可以将它们设置为html按钮的样式（毕竟它们只是锚定）

js

$（函数（）{
$（“#confirmMe”）。单击（函数（e）{
e、 预防默认值（）；
var$anchor=$（此）；
$（“您确定要这样做吗？”）。对话框({
标题：“确认”，
莫代尔：是的，
按钮：{
“Ok”：函数（）{
window.location=$anchor.attr（“href”）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
});
});

.net标记（如果单击“确定”，将引发confirmMe_Click事件）

我承认这有点冗长，但以下内容适用于我能想到的每种情况：

$(document).ready(function () {
    'use strict';
    var getParsedPostback = function getParsedPostback(self) {
        /*
         * self is a jQuery object. The purpose of this function is to extract the
         * __doPostBack function or the WebForm_DoPostBackWithOptions function as a
         * string, parse out the component arguments, and return it as a different
         * function to be used as a callback. If the postback function does not exist
         * as a string (in the case of a submit button, for instance) then the
         * returned callback should unbind any click handlers and then trigger the
         * element's click event.
         */
        var postback = self.data('postback'),
            trimLeft = /^\s+/,
            trimRight = /\s+$/,
            startingQuote = /^['"]/,
            endingQuote = /['"]$/,
            eventTarget,
            eventArgument,
            validation,
            validationGroup,
            actionUrl,
            trackFocus,
            clientSubmit;
        if (postback.substring(postback.length - 1, postback.length) === ';') {
            //remove the trailing ";"
            postback = postback.substring(0, postback.length - 1);
        }
        if (postback.indexOf('javascript:') === 0) {
            //remove the "javascript:"
            postback = postback.substring(('javascript:').length, postback.length - 1);
        }
        //in case postback is in the form __doPostBack(&#39;XXXXXX&#39;,&#39;XXXXXX&#39;)
        postback = decodeURIComponent(postback);
        //parse by case
        if (postback.indexOf('__doPostBack(') === 0) {
            //postback should now be __doPostBack('XXXXXX','XXXXXX')
            postback = postback.substring(('__doPostBack(').length, postback.length - 2);
            postback = postback.split(',');
            eventTarget = encodeURIComponent(postback[0].replace(startingQuote, '').replace(endingQuote, ''));
            eventArgument = encodeURIComponent(postback[1].replace(startingQuote, '').replace(endingQuote, ''));
            postback = function () {
                __doPostBack(eventTarget, eventArgument);
            };
        } else if (postback.indexOf('WebForm_DoPostBackWithOptions(') === 0) {
            //postback should now be WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('XXXXXX', 'XXXXXX', 'XXXXXX', 'XXXXXX', 'XXXXXX'))
            postback = postback.substring(('WebForm_DoPostBackWithOptions(').length, postback.length - 2);
            postback = postback.split(',');
            eventTarget = encodeURIComponent(postback[0].replace(startingQuote, '').replace(endingQuote, ''));
            eventArgument = encodeURIComponent(postback[1].replace(startingQuote, '').replace(endingQuote, ''));
            validation = !!postback[2].replace(startingQuote, '').replace(endingQuote, '');     //use !! to convert string to boolean
            validationGroup = encodeURIComponent(postback[3].replace(startingQuote, '').replace(endingQuote, ''));
            actionUrl = encodeURIComponent(postback[4].replace(startingQuote, '').replace(endingQuote, ''));
            trackFocus = !!postback[5].replace(startingQuote, '').replace(endingQuote, '');     //use !! to convert string to boolean
            clientSubmit = !!postback[6].replace(startingQuote, '').replace(endingQuote, ''); //use !! to convert string to boolean
            postback = function () {
                __doPostBack(new WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit));
            };
        } else if (postback === 'submit') {
            //no apparent postback handler, must be a submit or an image
            postback = function () {
                //unbind the assigned click handler
                self.unbind('click');
                //trigger the click event
                self.click();
            };
        }
        return postback;
    };
    var clickHandler = function clickHandler(e) {
        var postback = getParsedPostback($(this)); //get the postback as a callback
        $('div#dialog').dialog('option', {
            "buttons": {
                "Delete all items": function () {
                    $(this).dialog('close');
                    postback(); //call the postback
                },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        }).dialog('open');
        e.preventDefault();
        return false;
    };
    var storePostbacks = function storePostbacks() {
        /*
         * The purpose of this function is to remove any existing __doPostBack functions
         * or WebForm_DoPostBackWithOptions functions and store them in the "data" for
         * the element. The "getParsedPostback" function above wil make extensive use of
         * the element's "data" to parse a usable callback for postback.
         */
        $('input[type="submit"], input[type="button"], input[type="image"], a[href*="__doPostBack"]').each(function (i, elem) {
            var self = $(elem),
            postback = '';
            if (typeof self.attr('onclick') !== 'undefined') {
                //store the postback in data and remove from the element.
                postback = self.attr('onclick');
                self.removeAttr('onclick').data('postback', postback);
            } else if (typeof self.attr('href') !== 'undefined') {
                //store the postback in data and remove from the element.
                postback = self.attr('href');
                self.attr('href', '#').data('postback', postback);
            } else if (self.attr('type') === 'submit' || self.attr('type') === 'image') {
                //flag as a submit.
                self.data('postback', 'submit');
            }
        });
    };
    storePostbacks();
    $('input#<%#aspButton1.ClientID %>').click(clickHandler);
    $('input#<%#aspButton2.ClientID %>').click(clickHandler);
    $('input#<%#aspImageButton.ClientID %>').click(clickHandler);
    $('a#<%#aspLinkButton.ClientID %>').click(clickHandler);
    $('div#dialog').dialog({
        "autoOpen": false
    });
});

$（文档）.ready（函数（）{
"严格使用",；
var getParsedPostback=函数getParsedPostback（self）{
/*
*self是一个jQuery对象。此函数的目的是提取
*_uudoPostBack函数或WebForm_udoPostBackWithOptions函数作为
*字符串，解析出组件参数，并将其作为不同的
*函数用作回调。如果回发函数不存在
*作为字符串（例如，对于submit按钮），则
*返回的回调应解除任何单击处理程序的绑定，然后触发
*元素的单击事件。
*/
var postback=self.data（'postback'），
trimLeft=/^\s+/，
trimRight=/\s+$/,，
startingQuote=/^['“]/,，
endingQuote=/['“]$/，
事件目标，
事件辩论，
验证，
验证组，
actionUrl，
trackFocus，
客户提交；
if（postback.substring（postback.length-1，postback.length）=='；'）{
//移除尾部“
postback=postback.substring（0，postback.length-1）；
}
if（postback.indexOf（'javascript:'）==0）{
//删除“javascript:”
postback=postback.substring（（'javascript:'）.length，postback.length-1）；
}
//如果回发的形式为u doPostBack（'；XXXXXX'；，'；XXXXXX'；）
回发=解码组件（回发）；
//按案例分析
if（postback.indexOf（''doPostBack（'）==0）{
//回发现在应该是uu doPostBack（'XXXXXX'，'XXXXXX'））
postback=postback.substring（“”“doPostBack”（'）.length，postback.length-2）；
postback=postback.split（'，'）；
eventTarget=encodeUricomon
<asp:LinkButton Text="Open Me" runat="server" ID="confirmMe" 
    ClientIDMode="Static" onclick="confirmMe_Click" />

$(document).ready(function () {
    'use strict';
    var getParsedPostback = function getParsedPostback(self) {
        /*
         * self is a jQuery object. The purpose of this function is to extract the
         * __doPostBack function or the WebForm_DoPostBackWithOptions function as a
         * string, parse out the component arguments, and return it as a different
         * function to be used as a callback. If the postback function does not exist
         * as a string (in the case of a submit button, for instance) then the
         * returned callback should unbind any click handlers and then trigger the
         * element's click event.
         */
        var postback = self.data('postback'),
            trimLeft = /^\s+/,
            trimRight = /\s+$/,
            startingQuote = /^['"]/,
            endingQuote = /['"]$/,
            eventTarget,
            eventArgument,
            validation,
            validationGroup,
            actionUrl,
            trackFocus,
            clientSubmit;
        if (postback.substring(postback.length - 1, postback.length) === ';') {
            //remove the trailing ";"
            postback = postback.substring(0, postback.length - 1);
        }
        if (postback.indexOf('javascript:') === 0) {
            //remove the "javascript:"
            postback = postback.substring(('javascript:').length, postback.length - 1);
        }
        //in case postback is in the form __doPostBack(&#39;XXXXXX&#39;,&#39;XXXXXX&#39;)
        postback = decodeURIComponent(postback);
        //parse by case
        if (postback.indexOf('__doPostBack(') === 0) {
            //postback should now be __doPostBack('XXXXXX','XXXXXX')
            postback = postback.substring(('__doPostBack(').length, postback.length - 2);
            postback = postback.split(',');
            eventTarget = encodeURIComponent(postback[0].replace(startingQuote, '').replace(endingQuote, ''));
            eventArgument = encodeURIComponent(postback[1].replace(startingQuote, '').replace(endingQuote, ''));
            postback = function () {
                __doPostBack(eventTarget, eventArgument);
            };
        } else if (postback.indexOf('WebForm_DoPostBackWithOptions(') === 0) {
            //postback should now be WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('XXXXXX', 'XXXXXX', 'XXXXXX', 'XXXXXX', 'XXXXXX'))
            postback = postback.substring(('WebForm_DoPostBackWithOptions(').length, postback.length - 2);
            postback = postback.split(',');
            eventTarget = encodeURIComponent(postback[0].replace(startingQuote, '').replace(endingQuote, ''));
            eventArgument = encodeURIComponent(postback[1].replace(startingQuote, '').replace(endingQuote, ''));
            validation = !!postback[2].replace(startingQuote, '').replace(endingQuote, '');     //use !! to convert string to boolean
            validationGroup = encodeURIComponent(postback[3].replace(startingQuote, '').replace(endingQuote, ''));
            actionUrl = encodeURIComponent(postback[4].replace(startingQuote, '').replace(endingQuote, ''));
            trackFocus = !!postback[5].replace(startingQuote, '').replace(endingQuote, '');     //use !! to convert string to boolean
            clientSubmit = !!postback[6].replace(startingQuote, '').replace(endingQuote, ''); //use !! to convert string to boolean
            postback = function () {
                __doPostBack(new WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit));
            };
        } else if (postback === 'submit') {
            //no apparent postback handler, must be a submit or an image
            postback = function () {
                //unbind the assigned click handler
                self.unbind('click');
                //trigger the click event
                self.click();
            };
        }
        return postback;
    };
    var clickHandler = function clickHandler(e) {
        var postback = getParsedPostback($(this)); //get the postback as a callback
        $('div#dialog').dialog('option', {
            "buttons": {
                "Delete all items": function () {
                    $(this).dialog('close');
                    postback(); //call the postback
                },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        }).dialog('open');
        e.preventDefault();
        return false;
    };
    var storePostbacks = function storePostbacks() {
        /*
         * The purpose of this function is to remove any existing __doPostBack functions
         * or WebForm_DoPostBackWithOptions functions and store them in the "data" for
         * the element. The "getParsedPostback" function above wil make extensive use of
         * the element's "data" to parse a usable callback for postback.
         */
        $('input[type="submit"], input[type="button"], input[type="image"], a[href*="__doPostBack"]').each(function (i, elem) {
            var self = $(elem),
            postback = '';
            if (typeof self.attr('onclick') !== 'undefined') {
                //store the postback in data and remove from the element.
                postback = self.attr('onclick');
                self.removeAttr('onclick').data('postback', postback);
            } else if (typeof self.attr('href') !== 'undefined') {
                //store the postback in data and remove from the element.
                postback = self.attr('href');
                self.attr('href', '#').data('postback', postback);
            } else if (self.attr('type') === 'submit' || self.attr('type') === 'image') {
                //flag as a submit.
                self.data('postback', 'submit');
            }
        });
    };
    storePostbacks();
    $('input#<%#aspButton1.ClientID %>').click(clickHandler);
    $('input#<%#aspButton2.ClientID %>').click(clickHandler);
    $('input#<%#aspImageButton.ClientID %>').click(clickHandler);
    $('a#<%#aspLinkButton.ClientID %>').click(clickHandler);
    $('div#dialog').dialog({
        "autoOpen": false
    });
});

<body>
    <form id="form1" runat="server">
    <div>
        <div id="dialog">
            <p>Test of dialog.</p>
        </div>
        <div id="controls">
            <asp:Button ID="aspButton1" runat="server" Text="aspButton1" />
            <asp:LinkButton ID="aspLinkButton" runat="server">LinkButton</asp:LinkButton>
            <asp:ImageButton ID="aspImageButton" runat="server" />
            <asp:Button ID="aspButton2" runat="server" Text="aspButton2" />
        </div>
    </div>
    </form>
</body>

    // Initialices the behaviour when the page is ready
    $(function() {
        // Sets the function to be called when the confirmation button is pressed          
        $('.jqConfirmacionBorrar').click(function(e) {
            // Prevents the default behaviour of the button
            e.preventDefault();
            // Gets the name of the button that was clicked
            var ControlClickedName = $(this).attr('name');
            // Sets up the dialog to be called, with some custom parameters.
            // The important one is to do the postback call when the confirmation
            // button ('Aceptar' in spanish) is clicked.
            $("#DivConfirmacion").dialog({
                width: 650,
                modal: true,
                draggable: true,
                autoOpen: false,
                buttons: {
                    'Cancelar': function() {
                        $(this).dialog('close');
                        return false;
                    },
                    'Aceptar': function() {
                        $(this).dialog('close');
                        __doPostBack(ControlClickedName, '');
                        return true;
                    }
                }
            });
            // Opens the dialog to propt the user for confirmation
            $('#DivConfirmacion').dialog('open');
        });
    });