提问者:小点点

ASP。NET的启动模式作为javascript确认


我想用Bootstrap模式覆盖默认的JavaScript确认弹出窗口。但是我不能使它与ASP. net的大多数控件的属性工作:"OnClientClark"。

以下是与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();
};

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


共1个答案

匿名用户

第一步:在按钮上,你要么有OnClientClark="openMyModal()",要么你把代码放在后面

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

第二步:或者从你的模态确定按钮调用一个javascript/jQuery函数,或者把runat="server"放在你的模态确定按钮上,让它回发,并在那里放适当的代码来执行你的操作。

为了清晰起见,我最初没有显示Bootstrap模态标记以及openMyModal函数,但是这样的函数看起来像这样:

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