模态弹窗中ajax:ComboBox下拉按钮未显示问题求助

问题描述 #

• 现象：Bootstrap模态弹窗内的ajaxToolkit:ComboBox控件，初始加载时下拉按钮不显示且无法交互；点击同UpdatePanel内的服务器端按钮后，下拉按钮才正常显示并可点击。
• 状态对比：
  • 未点击按钮时：
  • 点击按钮后：
• 关联代码片段：

<asp:Panel ID="panel1" runat="server">
     <div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="head4">Title HEAD modal</h4>
            </div>
          <div class="modal-body">
           <div class="row">
              <div class="col-lg-7 col-xs-7 col-7 col-md-7">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                                    <Triggers>
                                    </Triggers>
                                    <ContentTemplate>
                                        <ajaxToolkit:ComboBox ID="modelistInject" runat="server" AutoCompleteMode="SuggestAppend" >
                                        </ajaxToolkit:ComboBox>
                                        <asp:Button runat="server" />
                                      
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </div>

问题原因 #

Bootstrap模态框初始处于隐藏状态（aria-hidden="true"），ajaxToolkit的ComboBox控件在隐藏容器内初始化时，其JS逻辑无法正确计算控件尺寸、渲染下拉按钮对应的DOM结构，也无法完成交互事件绑定；而点击服务器按钮触发UpdatePanel局部刷新后，ComboBox在模态框已显示的状态下重新渲染，相关DOM和事件初始化正常，因此下拉按钮恢复功能。

解决方案 #

方法1：模态框显示后手动重新初始化ComboBox #

利用Bootstrap模态框的shown.bs.modal事件（模态框完全显示后触发），调用ComboBox的客户端API重新初始化控件：

$('#setup').on('shown.bs.modal', function () {
    // 获取ComboBox的客户端实例
    var comboInstance = $find('<%= modelistInject.ClientID %>');
    if (comboInstance) {
        // 重新初始化控件
        comboInstance.initialize();
        // 强制显示下拉按钮容器
        comboInstance._dropDownWrapper.style.display = 'inline-block';
    }
});

方法2：通过UpdatePanel局部刷新延迟加载ComboBox #

添加一个隐藏的服务器按钮作为UpdatePanel的触发器，在模态框显示时触发该按钮的点击，让ComboBox在模态框可见状态下完成渲染：

1. 新增隐藏按钮并配置UpdatePanel触发器：

<asp:Button ID="btnRefreshCombo" runat="server" Style="display:none;" />

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRefreshCombo" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <ajaxToolkit:ComboBox ID="modelistInject" runat="server" AutoCompleteMode="SuggestAppend" >
        </ajaxToolkit:ComboBox>
        <asp:Button runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

2. 绑定模态框显示事件触发刷新：

$('#setup').on('shown.bs.modal', function () {
    $('#<%= btnRefreshCombo.ClientID %>').trigger('click');
});

方法3：通过CSS强制显示下拉按钮并调整尺寸 #

如果前两种方法无效，可通过CSS强制下拉按钮显示，再配合JS在模态框显示时修正控件尺寸：

/* 强制显示ComboBox下拉按钮容器 */
.ajax__combobox_buttoncontainer {
    display: inline-block !important;
    vertical-align: middle;
}
/* 调整输入框样式避免边框重叠 */
.ajax__combobox_textboxcontainer input {
    border-right: 0 !important;
}

$('#setup').on('shown.bs.modal', function () {
    var comboTextbox = $('#<%= modelistInject.ClientID %>_textbox');
    if (comboTextbox.length) {
        var btnContainer = comboTextbox.next('.ajax__combobox_buttoncontainer');
        // 同步下拉按钮与输入框的高度
        btnContainer.css('height', comboTextbox.outerHeight());
    }
});

内容的提问来源于stack exchange，提问作者devk1a