Bootstrap modal closes when dropdownlist inside fires selected index changed event

问题

I have a ASP.NET chart inside a Bootstrap modal.

Everything was working fine until I added a dropdown list inside, every time I select a new item in dropdown list the selected item changed event fires, and Boostrap modal closes, event if there is no code inside event.

Here is the modal bootstrap html:

<div class="modal fade" id="modalCantidadReservasMensuales" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <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" id="myModalLabel">
                    Cantidad reservas mensuaCantidad reservas mensuales
                </h4>
            </div>
            <div class="modal-body">
                <asp:DropDownList ID="ddlAñoCantidadReservasMensuales" runat="server" OnSelectedIndexChanged="ddlAñoCantidadReservasMensuales_SelectedIndexChanged"
                    AutoPostBack="True">
                </asp:DropDownList>
                <asp:Chart ID="Chart2" runat="server" Width="441px">
                    <Series>
                        <asp:Series Name="test1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
        </div>
    </div>
</div>

回答1:

This is mainly because you have an autopostback proprty set to true in your control which will cause the whole page postback on selected index changed event.

to fix the issue you could place your body content inside an update panel.

<div class="modal fade" id="modalCantidadReservasMensuales" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <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" id="myModalLabel">
                    Cantidad reservas mensuaCantidad reservas mensuales
                </h4>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-body">
                            <asp:DropDownList ID="ddlAñoCantidadReservasMensuales" runat="server" OnSelectedIndexChanged="ddlAñoCantidadReservasMensuales_SelectedIndexChanged">
                            </asp:DropDownList>
                            <asp:Chart ID="Chart2" runat="server" Width="441px">
                                <Series>
                                    <asp:Series Name="test1">
                                    </asp:Series>
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea Name="ChartArea1">
                                    </asp:ChartArea>
                                </ChartAreas>
                            </asp:Chart>
                        </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

Code behind:

    protected void ddlAñoCantidadReservasMensuales_SelectedIndexChanged(object sender, EventArgs e)
    {
        //youre code here ...

        UpdatePanel1.Update();
    }

来源：https://stackoverflow.com/questions/24726980/bootstrap-modal-closes-when-dropdownlist-inside-fires-selected-index-changed-eve

标签

ASP.NET

twitter-bootstrap

modal-dialog