jQuery modal popup 确认 - 处理服务器端回发

Question

我试图在单击 asp:Button 控件后运行模式弹出窗口以显示确认消息。我以http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/ 的教程为基础。

目前，我的客户端操作正在运行，并且模式弹出窗口会显示我的消息和确认按钮。

我遇到的问题是为 yes 按钮设置 doPostBack：

 __doPostBack([button I want to target], '');

我试过用：

<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%>;

为doPostBack 命令查找按钮控件。这种方法的问题是，它在我可以选择加载模式之前触发回发。

使用从上述“GetPostBackEventReference”返回的硬编码 doPostBack

 __doPostBack('ctl00$ContentPlaceHolderBody$Button123', '');

在模式中单击“是”后，我能够回发到正确的服务器 onClick 事件。

我想知道如何使用 ClientScript.GetPostBackEventReference 方法而不是在显示模式或替代方法之前回发。

任何帮助将不胜感激。

代码如下：

<asp:Button ID="Button123" runat="server" Text="Test" OnClick="Ctl_ButtonUpdateRecord_Click" />

$(document).ready(function () {

    $("input[id$='Button123']").click(function () {

        $.confirm({
            'title': 'Delete Confirmation',
            'message': 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons': {
                'Yes': {
                    'class': 'blue',
                    'action': function () { <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%>;
                                             //__doPostBack('ctl00$ContentPlaceHolderBody$Button123', '');
                                             }
                },
                'No': {
                    'class': 'gray'
                }
            }
        });

        return false;

    });

});

(function ($) {

    $.confirm = function (params) {

        if ($('#confirmOverlay').length) {
            // A confirm is already shown on the page:
            return false;
        }

        var buttonHTML = '';
        $.each(params.buttons, function (name, obj) {

            // Generating the markup for the buttons:

            buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '<span></span></a>';

            if (!obj.action) {
                obj.action = function () { };
            }
        });

        var markup = [
            '<div id="confirmOverlay">',
            '<div id="confirmBox">',
            '<h1>', params.title, '</h1>',
            '<p>', params.message, '</p>',
            '<div id="confirmButtons">',
            buttonHTML,
            '</div></div></div>'
        ].join('');

        $(markup).hide().appendTo('body').fadeIn();

        var buttons = $('#confirmBox .button'),
            i = 0;

        $.each(params.buttons, function (name, obj) {
            buttons.eq(i++).click(function () {

                // Calling the action attribute when a
                // click occurs, and hiding the confirm.

                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function () {
        $('#confirmOverlay').fadeOut(function () {
            $(this).remove();
        });
    }

})(jQuery);

Answer 1

你确定你做的一切都是正确的吗，我只是这样尝试过，它工作正常：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:Button ID="btnDelete" runat="server" Text="Test" onclick="btnDelete_Click" style="display: none" />
<input type="submit" value="Test" id="Button123">
<script type="text/javascript">

$(document).ready(function () {

    $("input[id$='Button123']").click(function () {

        $.confirm({
            'title': 'Delete Confirmation',
            'message': 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons': {
                'Yes': {
                    'class': 'blue',
                    'action': function() { <%= Page.ClientScript.GetPostBackEventReference(new PostBackOptions(btnDelete))%>; }
                },
                'No': {
                    'class': 'gray'
                }
            }
        });

        return false;

    });

});

</script>

</asp:Content>

Answer 2

我带你一段简单的代码，希望能对你有所帮助。在示例中，我使用了您也可以自定义的 JQuery UI Dialog Widget (http://jqueryui.com/demos/dialog/)。

脚本代码：

<script language="javascript" type="text/javascript"> 
    function ConfirmDelete(controId, arg) {
        var $dialogConfirmDelete = $('<p><span class="ui-icon ui-icon alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want delete the record?</p>')
        .dialog({
            title: 'Title',
            resizable: false,
            height: 160,
            modal: true,
            autoOpen: false,
            buttons: {
                'OK': function () {
            __doPostBack(controId, '');
                    $(this).dialog("close");
                },
                'Cancel': function () {
                    $(this).dialog("close");
                }
            }
        });

    $($dialogConfirmDelete).parent().appendTo($("form:first"));

        return $dialogConfirmDelete.dialog(arg);
    }

    $(document).ready(function ($) {
        ConfirmDelete(null);
    })

</script>

ASP 代码：

<asp:Button ID="btnDeleteRecord" runat="server" Text="Delete record"  OnClientClick="javascript:ConfirmDelete(this.name,'open');return false;"  onclick="btnDeleteRecord_Click" />

C#代码背后：

/// <summary>
/// delete record
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnDeleteRecord_Click(object sender, EventArgs e)
{
    //Delete record
    //...
}

请记住，只有在属性“AutoPostBack”设置为“真的”。
您也可以在后面的代码中（例如在Page_Load()中）输入以下简单语句：
ClientScript.GetPostBackClientHyperlink (btnDeleteRecord, "");
运行回发控件有什么技巧();

Answer 3

一个简单的解决方案是使用 ajaxtoolkit 提供的 ModalPopup。 Here a sample.

或者你也可以这样做：

'action': function () { $('#<%= btnDelete.ClientID %>').click(); }