带有 Bootstrap 模式的 ASP.NET 作为 javascript 确认

Question

我想用 Bootstrap 模式覆盖默认的 javascript 确认弹出窗口。 但我不能让它与大多数控件的 ASP.net 属性一起工作：“OnClientClick”。

这是相关的aspx内容：

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button runat="server" Text="Delete" CssClass="btn btn-danger fullwidth"
           OnClientClick="return confirm('Are you sure?')" CommandName="Delete" />
    </ItemTemplate>
</asp:TemplateField>

这是javascript：

window.confirm = function (message, callback, caption) {
    confirmResponse = undefined
    caption = caption || 'Confirm'
    message = message.replace("\n", "<br />");
    var modalContainer, modalHeader, modalBody, modalFooter;
    /* Create modal if doesnt allready exists (to avoid dublicate modals) */
    if ($("#confirmation-modal").length != 1) {
        modalContainer = $('<div>').attr({ 'class': 'modal fade', 'id': 'confirmation-modal' });
        var modalDialog = $('<div>').attr({ 'class': 'modal-dialog' });
        var modalContent = $('<div>').attr({ 'class': 'modal-content' });
        modalHeader = $('<div>').attr({ 'class': 'modal-header' });
        modalBody = $('<div>').attr({ 'class': 'modal-body' });
        modalFooter = $('<div>').attr({ 'class': 'modal-footer' });

        modalContainer.html($(modalDialog));
        modalDialog.html($(modalContent));
        modalContent.html($(modalHeader));
        modalContent.append($(modalBody));
        modalContent.append($(modalFooter));
    } else {
        modalContainer = $("#confirmation-modal");
        modalHeader = $("#confirmation-modal .modal-header");
        modalBody = $("#confirmation-modal .modal-body");
        modalFooter = $("#confirmation-modal .modal-footer");
    }
    /* Set content of modal */
    modalHeader.html('<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 class="modal-title">' + caption + '</h4>');
    modalBody.html('<p>' + message + '</p>');
    var modalTrueBtn = $('<button type="button" class="btn btn-default">Yes</button>').click(function () {
        if (callback != undefined) callback();
        console.log("confirm returned true");
        return true;
    });
    var modalFalseBtn = $('<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>').click(function () {
        console.log("confirm returned false");
        return false;
    });
    modalFooter.html(modalTrueBtn).append(modalFalseBtn);
    /* show modal */
    modalContainer.modal();
};

创建模态的代码部分很好。它弹出就好了，但它不返回真/假。

Answer 1

第 1 步：在按钮上你要么有 OnClientClick="openMyModal()" 要么你把代码放在后面

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "none", "openMyModal()", True)

第 2 步：从模态 OK 按钮调用 javascript/jQuery 函数，或将 runat="server" 放在模态 OK 按钮上以使其回发并在此处放置适当的代码以执行您的操作。

为了清楚起见，我最初并没有将 Bootstrap 模态标记与 openMyModal 函数一起显示，但这样的函数看起来像这样：

function openMyModal() {
    $('#myModal').modal({
        show: true
    })
}