ASP.net Button and Bootstrap Modal Close issue

Question

User1099429166 posted

Dear All,

I have a bootstrap modal in an UpdatePanel.  Below is my code

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" >
        <ContentTemplate>
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                <div class="modal-dialog" role="document" style="width: 600px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                        </div>
                        <div class="modal-body">
                            <div style="margin-bottom: 16px;">
                                <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                            </div>

                      <div class="modal-body">
                            <div style="margin-bottom: 16px;">
                                <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                            </div>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <asp:Button runat="server" ID="btnSave"  class="btn btn-success" Text="Save"  OnClick="btn_save_Click" ></asp:Button>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

<button class="btn btn-default btn-sm" type="button" onclick="ShowPopup()">Create User</button>

   protected void btn_save_Click(object sender, EventArgs e)
    {
        if (IsValid)
        {

            string strJsSuccess = new System.Text.StringBuilder("$('#editModal').modal('hide');").ToString();
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Hide", strJsSuccess, true);
        }

    }

<script type="text/javascript">
function ShowPopup() {
            $('#editModal').modal('show');
        }
    </script>

The issue is that when i press btnSave button the modal closes but the the gray backdrop remains. btnSave has to be a server side button as I need to do some server side processing in btn_save_Click event.

Any help would be greatly appreciated

Answer 1

User475983607 posted

The save button is missing...

data-dismiss="modal"

See the working example in your previous post with the same subject.

https://forums.asp.net/p/2150019/6240754.aspx?Re+Bootstrap+Modal+and+Validation

Answer 2

User-272414123 posted

Use UpdatePanel inside Modal-content

Answer 3

User31164289 posted

I've same problem but add 

data-dismiss="modal"

not work. Modal close without fire trigger onclick event in code behind.

My modal is inside updatepanel.

Other solution?

Answer 4

User-474980206 posted

when the modal opens, the modal is moved to end of the body, so its no longer is in the update panel (that's why the suggestion to put the update panel in the modal). you need to change the save button, to close the dialog, move the dialog back to inside the update panel, then do the update panel submit. 

its been years since I have had deal with webforms and update panels (and writing ajax controls), but there is a server clientscript helper to generate the client script to submit an update panel. Read the update panel docs about client scripting.