how to close bootstrap modal from code behind?

Question

I am doing update operations from modal. When modal popup its load specific row data to which I want to update. Below is my modal code:

<form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="myModal" class="modal fade" role="dialog" runat="server" draggable="auto">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Insert Module</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td colspan="2" style="text-align: center">
                                            <label>UPDATE EMPLOYEE DETAIL</label>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label>FIRST NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb1" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender7" targetcontrolid="up_tb1" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>MIDDLE NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb2" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender8" targetcontrolid="up_tb2" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>LAST NAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb3" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender9" targetcontrolid="up_tb3" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>EMAIL</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb4" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender10" targetcontrolid="up_tb4" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>DOB</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb5" runat="server" Enabled="false"></asp:TextBox>
                                            <ajax:calendarextender id="CalendarExtender2" runat="server" popupbuttonid="ImageButton1" targetcontrolid="up_tb5"></ajax:calendarextender>
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/calendar146.png" Width="16px" Height="16px" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>USERNAME</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb6" runat="server"></asp:TextBox>
                                            <ajax:filteredtextboxextender id="FilteredTextBoxExtender12" targetcontrolid="up_tb6" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>PASSWORD</label>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="up_tb7" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <asp:ValidationSummary ID="ValidationSummary2" runat="server"
                                DisplayMode="BulletList" ShowSummary="true" HeaderText="Errors:" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

I am loading modal from code behind and populate its fields from codebehind. Below is my codebehind code:

protected void up_tb8_Click(object sender, EventArgs e)
    {
        var db = new dbDataContext();
        Employee emp = new Employee();
        db.Sp_Updatevalue(up_id, up_tb1.Text, up_tb2.Text, up_tb3.Text, up_tb4.Text, Convert.ToDateTime(up_tb5.Text), up_tb6.Text, up_tb7.Text);
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ClosePopup();", true);
     }

When I click my update button it successfully run my update stored procedure and update values from database. Question is when data update modal pop window was gone but its dim gray background still fixed on my screen I want to close modal properly when my records has been updated and my gridview refreshes and show my updated records.

Answer 1

If a user control (ascx) is wrapped inside the modal, then this:

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

will NOT work. Instead of this , you should use this.Page .

Correct solution:

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", "$('#myModal').modal('hide');", true);

Answer 2

You can try with this:

 ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#myModal').hide();", true);

It works for me..!

Answer 3

\n

\n

\n

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal1", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();", true);

\n

\n

\n

Answer 4

You can change your server button -

 <asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />

to something like this -

<button id="up_tb8" type="button" class="btn btn-default" data-dismiss="modal" runat="server" onserverclick="up_tb8_Click">UPDATE</button>

hope this will work

Answer 5

You can try with this :

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);

Or you can define a ClosePopup Function in your JS file to do it and then call it as you were doing it.

function ClosePopup(){
$('#myModal').modal('hide');
}

Answer 6

I have something similar in my application. I refresh my grid by rebinding data from database on a button click. In the javascript closepopup() function, after closing the modal, I call button click event that will refresh my datagrid. You can create a hidden button for binding and perform click event like I did.

Some code sample:

This is refresh button:

<asp:Button ID="btnClearFilter" runat="server" Text="Refresh" onclick="btnClearFilter_Click" />

Code behind:

    protected void btnClearFilter_Click(object sender, EventArgs e)
    {
        FillGrid(); //here I bind to datagrid
    }

And when popup is closing:

    function closepopup() {
        $find('thisModalPopupExtender').hide();  
        document.getElementById("<%= btnClearFilter.ClientID %>").click();  //click event on refresh button
    }

Not the best solution but it works :)

Answer 7

Add Id attribute & runat="server" to the close buttons.

In C# code behind,

 btnId1.Attributes.Add("class", "close"); 

Here btnId1 is the Id name of close button.

Answer 8

This Code Worked Very Good...

c# :

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true);

VB.Net:

ScriptManager.RegisterStartupScript(me, me.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true)