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

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

或者您也可以这样做：

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

Answer 2

你确定你正在做的一切都是正确的，我只是尝试过这样，它运作良好：

<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 3

我带了一段简单的代码，希望能帮到你。在示例中，我使用了您也可以自定义的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>

ASPX代码：

<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
    //...
}

请记住，框架添加到web控件，如asp：buttons，linkbuttons，DropDownLists等，只有当属性“ AutoPostBack ”设置为“时才处理回发的代码部分真”。
您还可以在后面的代码中输入以下简单语句（例如，在Page_Load（）中）：
ClientScript.GetPostBackClientHyperlink (btnDeleteRecord, "");
运行回发控制的技能（）;

jQuery模式弹出确认 - 处理服务器端回发

3 个答案: