显示 jquery 对话框确认/取消模式。点击确认提交表单答案

【问题标题】：Show jquery dialog confirm/cancel modal. Form submit on confirm click显示 jquery 对话框确认/取消模式。点击确认提交表单
【发布时间】：2014-10-23 13:17:38
【问题描述】：

我的页面上有一个 jquery-ui 模式对话框，当用户单击包含在 asp.net UpdatePanel 中的控件上的 Decline 按钮时，我会显示该对话框，页面上有许多此类控件.

脚本：

function confirmDecline(event) {
       event.preventDefault();
       $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Confirm": function () {
                    $('form').submit();
                    return true;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    }

Pod 标记：

<div class="dms-pod">
<ul>
    <li><strong><asp:Literal ID="litCompanyName" runat="server" /></strong></li>
    <li><asp:Literal ID="litVatNumber" runat="server" /></li>
    <li><asp:Literal ID="litTown" runat="server" /></li>
</ul>
<asp:Panel ID="pnlDmsForm" runat="server" CssClass="dms-form" DefaultButton="btnAccept">
    <asp:TextBox ID="txtDmsNumber" runat="server" placeholder="DMS number" />
    <asp:RequiredFieldValidator ID="reqDmsNumber" runat="server" ErrorMessage="Invalid DMS number" Display="Dynamic" CssClass="error" ControlToValidate="txtDmsNumber" />
    <ajaxToolkit:ValidatorCalloutExtender ID="valDmsNumber" runat="server" TargetControlID="reqDmsNumber" HighlightCssClass="error" />
    <div class="dms-buttons">
        <div class="container">
            <asp:LinkButton ID="btnAccept" runat="server" CssClass="btn" Text="accept" OnClick="btnAccept_Click" />
        </div>
        <div class="container">
            <asp:LinkButton ID="btnDecline" runat="server" CssClass="btn-alt" Text="decline" OnClick="btnDecline_Click" OnClientClick="confirmDecline(event)" />
        </div>
    </div>
    <div class="clear"></div>
</asp:Panel>
<div class="clear"></div>
<asp:HiddenField ID="hdnDealershipIRLinkID" runat="server" />

然后包含在更新面板中：

<asp:UpdatePanel ID="updPendingDms" UpdateMode="Always" runat="server">
    <ContentTemplate>
         <asp:Repeater ID="rptPendingDmsRequests" runat="server" OnItemDataBound="rptPendingDmsRequests_ItemDataBound" OnItemCreated="rptPendingDmsRequests_ItemCreated">
             <ItemTemplate>
                 <uc:DmsRegisterPod runat="server" ID="ucDmsRegisterPod" />
             </ItemTemplate>
        </asp:Repeater>
    </ContentTemplate>
</asp:UpdatePanel>

我正在使用event.preventDefault() 来阻止按钮操作触发，但是，如果用户单击Confirm 按钮，我还希望允许操作继续。我以为我可以使用：

$('form').submit();

在对话框Confirm 函数中，但这会触发转发器/更新面板中其他控件的验证器。有没有办法做到这一点？

【问题讨论】：

标签： c# jquery jquery-ui events dialog

【解决方案1】：

设法解决了这个问题，发布答案以防其他人遇到类似问题。

我传入触发点击的控件的 id：

OnClientClick="confirmDecline(event, this.id)"

然后我在对话框Confirm 函数中使用此ID 触发__doPostBack：

function confirmDecline(event, controlId) {
    event.preventDefault();
    controlId = controlId.replace(/_/g, '$');
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Confirm": function () {
                $(this).dialog("close");
                __doPostBack(controlId, '');
                return true;
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
     });
}

【讨论】：