引导模式内的asp下拉列表不会改变值

Question

我正在使用 asp.net 和 bootstrap v3 开发一个 Web 应用程序。在我的页面上，有一个包含两个 twxt 框和一个 asp 下拉列表的模式。 我的问题是下拉列表 SelectedIndexChanged 没有触发。当我在 Modal 之外放置一个下拉列表时，它的 SelectedIndexChanged 会毫无问题地触发。 我已经为 Page 和 DDL 设置了 EnableViewState="true"。我还设置了 AutoPostBack = "True"。 笔记： 当我在模式内更改 DDL 中的选定项目时的页面回发，但它没有转到 SelectedIndexChanged 事件，因为我设置了一个断点并且它不起作用。 我还注意到 DDL (Option, Select) 的 HTML 也是始终为第一个元素设置的 (Selected="Selected") 属性。

这就是我加载 DDL 的方式

protected void Page_Load(object sender, EventArgs e)
{
    if(!isPostBack)
{
      DataSet ds2 = MainModule.GetTableSQLBySP(new Dictionary<string, string>(), "SP_Stand_GetSectorTypes");
    ddlMdlAreaInvitedSecType.DataSource = ds2.Tables[0];
    ddlMdlAreaInvitedSecType.DataValueField = "Set_ID";
    ddlMdlAreaInvitedSecType.DataTextField = "Set_LongName";
    ddlMdlAreaInvitedSecType.DataBind();    }

}

这是模态代码

 <div class="modal fade" id="modalAreaInvitedSearch" style="margin-top: 155px" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2">Please enter product data  </h4>
            </div>
            <div class="modal-body" style="height:auto">

                <input type="text" class="form-control" placeholder="MM" style="display: none" runat="server" id="Text1" />
                <div class="form-group">
                    <label for="inputEmail1" class="col-lg-3 control-label">Short Name</label>
                    <div class="col-lg-8">
                        <asp:TextBox   enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedShortName" />
                    </div>

                </div>

                <div class="form-group">
                    <label for="inputEmail1" class="col-lg-3 control-label">Long Name</label>
                    <div class="col-lg-8">
                        <asp:TextBox   enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedLongName" />
                    </div>

                </div>
                <div class="form-group">
                    <label for="inputEmail1" class="col-lg-3 control-label">Sector Type</label>
                    <div class="col-lg-8">
                        <asp:DropDownList EnableViewState="true" class="form-control" OnSelectedIndexChanged="ddlMdlAreaInvitedSecType_SelectedIndexChanged"  AutoPostBack="true" runat="server" ID="ddlMdlAreaInvitedSecType" />
                    </div>

                </div>


                <asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:GridView ID="grdMdlAreaInvitedResult" runat="server" HorizontalAlign="Center"
                            AutoGenerateColumns="false" AllowPaging="true"
                            DataKeyNames="Sec_Id" CssClass="table table-hover table-striped table-bordered centerGridHead">
                            <Columns>
                                <asp:TemplateField HeaderText="" ShowHeader="false" ItemStyle-Width="17%">
                                    <ItemTemplate>
                                        <%--<asp:LinkButton id="btnRemove" runat="server" CausesValidation="false" Text="<i aria-hidden='true' class='icon-plus'></i>" CssClass="btn btn-info btn-xs "/>--%>
                                        <asp:CheckBox ID="chkGrdMdlAreaInvitedResult" runat="server"   CssClass="btn btn-primary btn-xs  " />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Sec_Id" HeaderText="Sec_Id" Visible="false" />
                                <asp:BoundField DataField="Sec_ShortName" HeaderText="Sector" />
                                <asp:BoundField DataField="Sec_LongName" HeaderText="Sector Long Name" />
                                <asp:BoundField DataField="Sec_Id_Master" HeaderText="Sec_Id_Master" Visible ="false" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="btnMdlAreaInvitedSearch" EventName="Click" />
                       <%--  <asp:AsyncPostBackTrigger ControlID="ddlMdlAreaInvitedSecType" EventName="SelectedIndexChanged" />--%>
                    </Triggers>

                </asp:UpdatePanel>





            </div>
             <div class="modal-footer">
                  <div class="form-group">

                    <div class="col-lg-12">

                        <asp:Button ID="btnMdlAreaInvitedClear" OnClientClick="clickCodeBtn()" runat="server"   class="btn btn-primary  col-lg-2" Text="Clear"></asp:Button>

                        <asp:Button ID="btnMdlAreaInvitedGet"  OnClientClick="clickCodeBtn()" runat="server" OnClick="btnMdlAreaInvitedGet_Click" class="btn btn-primary  col-lg-2" Text="Get"></asp:Button>
                        <asp:Button ID="btnMdlAreaInvitedSearch" UseSubmitBehavior="false"  runat="server" OnClick="btnMdlAreaInvitedSearch_Click" class="btn btn-primary  col-lg-2" Text="Search"></asp:Button>

                        <asp:Button ID="btnMdlAreaInvitedClose"  OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary  col-lg-2" Text="Close"></asp:Button>

                    </div>

                </div>
            </div>

这就是我打开模态的方式

 function popAreaInvitedSearch() {

        $('#modalAreaInvitedSearch').appendTo('body').modal({

            show: true,

            keyboard: false,

            backdrop: 'static'

        });

    }

我们将不胜感激。

Answer 1

我在使用 Fancybox 时遇到了与此类似的问题，结果发现，当 Modal 加载时，它会提取 HTML 并将其注入到主 ASP.NET 窗体的 outside 的 DIV 中。

为了在 Fancybox 中更正此问题，我覆盖了 Fancybox 源代码以在表单中注入 Modal。

我首先使用 Firebug 检查页面，并确定 Bootrap 模式的实际位置。如果它在表单之外，您将需要弄清楚如何在其中呈现它以正确触发 ASP.NET 控件事件，您也许可以使用 Modal javascript 配置选项对其进行配置。

希望能让你走上正确的道路。

Answer 2

您是否尝试过将 DDL 也放入 UpdatePanel 中？ DDL 现在很可能总是会导致回发。这可能是不可取的。