locked
Using bootstrap in ajax ConfirmButtonExtender RRS feed

  • Question

  • User1685982480 posted

    I need to have a confirm popup dialog with a button using bootstrap modal. I need to do something easy-to-use for my team, so I utilized ajax ConfirmButtonExtender and did something like this. but its not working. am getting this error "Value cannot be null.Parameter name: control". This is what I did:

    <button id="btnModal" type="button" class="btn btn-primary">Test Confirmation Dialog</button>
    
    <ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" DisplayModalPopupID="mpe" TargetControlID="btnModal">
    </ajaxToolkit:ConfirmButtonExtender>
    
    <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlconfirm" TargetControlID="btnModal" OkControlID="btnSave"
        CancelControlID="btnError">
    </ajaxToolkit:ModalPopupExtender>
    
    <asp:Panel runat="server" ID="pnlconfirm">
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content form-horizontal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h2 class="modal-title">Confirmation Message</h2>
                    </div>
                    <div class="modal-body">
                        <p>You are about to delete one track url, this procedure is irreversible.</p>
                        <p>Do you want to proceed?</p>
                    </div>
                    <div class="modal-message">
                        <asp:Label ID="lblModalMessage" runat="server" Visible="false"></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <asp:Button runat="server" ID="btnSave" Text="Cancel" CssClass="btn btn-default CausesValidation" />
                        <asp:Button runat="server" ID="btnError" Text="Delete" CssClass="btn btn-danger" />
                        <%--<button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>--%>
                    </div>
    
                </div>
            </div>
        </div>

    I didn't mention data-toggle="modal" data-target="#myModal" yet to check weather this will work or not.

    Monday, March 27, 2017 5:36 AM

All replies