当下拉列表中的下拉列表触发选定的索引更改事件时，Bootstrap 模式关闭 [英] Bootstrap modal closes when dropdownlist inside fires selected index changed event

查看：48
本文介绍了当下拉列表中的下拉列表触发选定的索引更改事件时，Bootstrap 模式关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这是模态引导程序 html:

<div class="modalfade" 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">关闭</span></button><h4 class="modal-title" id="myModalLabel">Cantidad 保留mensuaCantidad 保留mensuales

<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"><系列><asp:系列名称="test1"></asp:系列></系列><图表区域><asp:ChartArea Name="ChartArea1"></asp:ChartArea></ChartAreas></asp:图表>

解决方案

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

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

<div class="modalfade" 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">关闭</span></button><h4 class="modal-title" id="myModalLabel">Cantidad 保留mensuaCantidad 保留mensuales

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><内容模板><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"><系列><asp:系列名称="test1"></asp:系列></系列><图表区域><asp:ChartArea Name="ChartArea1"></asp:ChartArea></ChartAreas></asp:图表>

</内容模板></asp:UpdatePanel>

背后的代码:

 protected void ddlAñoCantidadReservasMensuales_SelectedIndexChanged(object sender, EventArgs e){//你的代码在这里...UpdatePanel1.Update();}

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>

解决方案

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();
    }

这篇关于当下拉列表中的下拉列表触发选定的索引更改事件时，Bootstrap 模式关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆