简体   繁体   中英

Call code-behind-method from javascript, when user confirms in bootstrap-modal

I have a webform with data and a "Save" button.
In code behind I have a method where I save data in the DB.
When I click the Save button I first popup a Bootstrap confirmation modal dialog with 2 buttons : Cancel and Yes. The modal pops up on the client side thus saving traffic to the server and back.
Cancel button works fine via the "data-dismiss".
But how do I get the method in the code behind to fire when user clicks the "Yes" button in the confirmation modal?
Markup :

<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnSave" runat="server" OnClientClick="return ConfirmPopup();" Text="Save" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="container">
    <div class="row">
        <button type="button" style="display: none;" id="jsbtnBS_Confirm_Modal"
            data-toggle="modal" data-target="#myBS_Confirm_Modal"
            data-backdrop="static" data-keyboard="false">
        </button>
        <div class="modal fade in" id="myBS_Confirm_Modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <span id="lblBS_Confirm_Modal">You Sure...?</span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnMethod" class="btn btn-success">Yes - I'm sure</button>
                        <button type="button" id="btnCancel" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  

Script :

    function ConfirmPopup() {
        $("#jsbtnBS_Confirm_Modal").click();
        $('#myBS_Confirm_Modal').on('hidden.bs.modal', function (e) {
            return false;
        });
    }

Code behind :

    protected void btnSave_Click(object sender, EventArgs e)
    {
        ...code to save data in database...
    }

I went through dozens of entries and the info there is so confusing...
Any idea would be very much appreciated.

EDIT (the solution and a question) :
I have just found out that all I have to do is change the "Yes" button in the modal to an ASP button which runs on the server side :

<asp:button ID="btnMethod" runat="server" OnClick="btnSave_Click" class="btn btn-success" Text="Yes"></asp:button>  

My question now (since I'm a beginner in web coding) is : Will the modal run on the client side until the "Yes" button is clicked? Or will the definition of this button as runat="server" immediatelly send the whole modal to the server, in which case I loose the benefit of saving traffic to server and back?

Why using a bootstrap modal? Change the client click to OnClientClick="return confirm('Your confirmation dialog.');" it should work.

I think that you can put runat="server" in the button yes

<button type="button" id="btnMethod" class="btn btn-success" runat="server">Yes - I'm sure</button>

And then, you can know when click on this button.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM