当下拉列表内触发选定的索引更改事件时，引导模式关闭

Question

我在 Bootstrap 模式中有一个 ASP.NET 图表。

一切正常，直到我在里面添加一个下拉列表，每次我在下拉列表中选择一个新项目时，都会触发所选项目更改事件，并且如果事件中没有代码，则 Boostrap 模式关闭，事件。

这里是模态引导 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>

Answer 1

这主要是因为您在控件中将 autopostback 属性设置为 true，这将导致所选索引更改事件上的整个页面回发。

要解决此问题，您可以将正文内容放在更新面板中。

<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>

后面的代码：

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

        UpdatePanel1.Update();
    }