c# DropDownList selectedindexchanged in updatepanel with bootstrap modal

Question

I have a form which is inside update panel and fire with bootstrap modal. And I have a cascading list. When first DropDownList changed second DropDownList should load. But page reload after first DropDownList changed.

<asp:UpdatePanel ID="updPanel1" runat="server" UpdateMode="Conditional" >
        <ContentTemplate>
            <div class="modal fade" tabindex="-1" role="dialog" id="yenitalep">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Form</h4>
                        </div>
                        <div class="modal-body">

                            <div class="form-group">
                                <label for="envanter">Tip</label>
                                <asp:DropDownList ID="ddlTip" runat="server" CssClass="form-control" OnSelectedIndexChanged="ddlTip_SelectedIndexChanged"></asp:DropDownList>
                            </div>
                            <div class="form-group">
                                <asp:DropDownList ID="ddlTip1" runat="server" CssClass="form-control level1"></asp:DropDownList>
                            </div>

                        </div>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlTip" />
        </Triggers>
    </asp:UpdatePanel>

C# Code behind:

protected void ddlTip_SelectedIndexChanged(object sender, EventArgs e)
    {
        short id = short.Parse(ddlTip.SelectedValue);

        List<servisTipleri> list = ServisTipController.childs(id);
        ddlTip1.DataSource = list;
        ddlTip1.DataTextField = "title";
        ddlTip1.DataValueField = "id";
        ddlTip1.DataBind();


    }

How can I load second DDL without page refreshing.

Answer 1

Just place the update panel inside the modal <div>:

<div class="modal fade" tabindex="-1" role="dialog" id="yenitalep">
    <asp:UpdatePanel ID="updPanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Form</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="envanter">Tip</label>
                            <asp:DropDownList ID="ddlTip" runat="server" CssClass="form-control" OnSelectedIndexChanged="ddlTip_SelectedIndexChanged" AutoPostBack="true">
                                <asp:ListItem Text="1" Value="1" />
                                <asp:ListItem Text="2" Value="2" />
                                <asp:ListItem Text="3" Value="3" />
                            </asp:DropDownList>
                        </div>
                        <div class="form-group">
                            <asp:DropDownList ID="ddlTip1" runat="server" CssClass="form-control level1"></asp:DropDownList>
                        </div>

                    </div>

                </div>
                <!-- /.modal-content -->
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlTip" />
        </Triggers>
    </asp:UpdatePanel>
</div>