选择列表框后，以模态更新文本框

Question

我在Bootstrap模式下有一个列表框和一个文本框。我需要使用从列表框中选择的值来更新文本框。我的问题是为了从列表框中获取选择的值，我需要执行自动回发。回发导致模式关闭。这是我的代码背后：    protected void lbConBillOLDocNumber_SelectedIndexChanged(object sender, EventArgs e)    {         txtConBillOLDocNumber.Text = lbConBillOLDocNumber.SelectedItem.Text;    }我需要将选定的文本值从列表框中放到文本框中。我不知道我得到了正确的值，因为上面代码中的警报显示了正确的值，（但是由于模式关闭，所以我不知道是否正在更新文本框。）我需要用选定的值填充文本框ListBox的模式，我需要保持打开状态的模式。我意识到我可能会遇到所有错误，因此欢迎提出任何建议的改进。

Answer 1

您可以使用AJAXUpdatePanel作为下面的示例，以消除每次回发时刷新整个页面的要求，并允许针对您的情况局部渲染特定区域，这将成为模态主体。

的HTML

<form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <!-- Button trigger modal -->

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

        Launch demo modal

    </button>

    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <%-- AJAX UpdatePanel section--%>

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                        <ContentTemplate>

                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

                            </asp:DropDownList>

                            <br />

                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-primary">Save changes</button>

                </div>

            </div>

        </div>

    </div>

</form>

背后的代码

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        // Bind DropDownList1 with some testing data

        DropDownList1.Items.Add(new ListItem() { Text = "Item 001", Value = "1" });

        DropDownList1.Items.Add(new ListItem() { Text = "Item 002", Value = "2" });

        DropDownList1.Items.Add(new ListItem() { Text = "Item 003", Value = "3" });

        DropDownList1.Items.Add(new ListItem() { Text = "Item 004", Value = "4" });

        DropDownList1.Items.Add(new ListItem() { Text = "Item 005", Value = "5" });

    }

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

    TextBox1.Text = DropDownList1.SelectedValue;

}

Answer 2

最终弄清楚了这个问题。该问题是由显示列表框的下拉菜单引起的。只要在列表框中单击任何内容，下拉菜单就会关闭，并且基本上使选择无效并关闭模式。我不得不停止传播下拉列表。一旦我做到了，UpdatePanel就完成了它的工作。我在下拉菜单中添加了一个ID，并使用以下代码来防止在单击ListBox时将其关闭。

            $('#myDropdown .dropdown-menu').on({

            "click": function (e) {

                e.stopPropagation();

            }

        });

我希望这对其他人有帮助。快乐的编码。