c# DropDownList selectedindexchanged in updatepanel with bootstrap modal

Question

我有一个在更新面板内的表单，并使用 bootstrap 模态触发。我有一个级联列表。当第一个 DropDownList 更改时，第二个 DropDownList 应该加载。但是在第一个 DropDownList 更改后重新加载页面。

<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# 代码：

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


    }

如何在不刷新页面的情况下加载第二个 DDL。

Answer 1

只需将更新面板放在模态框内 <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>

Answer 2

我就是这样做的，对我来说效果很好。希望对你有帮助。

这是我的 x_dropdownDemo_no_postback.aspx 文件。

<form id="form1" runat="server">
    <%=DateTime.Now.ToString() %>

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

    <asp:UpdatePanel ID="updPanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>

            <asp:DropDownList ID="ddlTip" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTip_SelectedIndexChanged">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="ddlTip1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTip1_SelectedIndexChanged">
            </asp:DropDownList>
            <br />

            <asp:DropDownList ID="ddlTip2" runat="server">
            </asp:DropDownList>

        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlTip" />
            <asp:AsyncPostBackTrigger ControlID="ddlTip1" />
        </Triggers>
    </asp:UpdatePanel>

</form>

这是我的 x_dropdownDemo_no_postback.cs 文件。

public 部分 class x_dropdownDemo_no_postback : System.Web.UI.Page {

private static string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["DBConnString"].ConnectionString;
MySqlConnection Conn = new MySqlConnection(ConfigurationManager.ConnectionStrings["DBConnString"].ConnectionString);

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Binddropdown();
    }
}
protected void Binddropdown()
{

    Conn.Open();
    MySqlCommand cmd = new MySqlCommand("select * from Countries", Conn);
    MySqlDataAdapter da = new MySqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    Conn.Close();
    ddlTip.DataSource = ds;
    ddlTip.DataTextField = "Name";
    ddlTip.DataValueField = "Id";
    ddlTip.DataBind();
    ddlTip.Items.Insert(0, new ListItem("--select--", "0"));
    ddlTip1.Items.Insert(0, new ListItem("--select--", "0"));
    ddlTip2.Items.Insert(0, new ListItem("--select--", "0"));
}

protected void ddlTip_SelectedIndexChanged(object sender, EventArgs e)
{

    int ddlTipId = Convert.ToInt32(ddlTip.SelectedValue);
    Conn.Open();
    MySqlCommand cmd = new MySqlCommand("select * from State where Country_Id=" + ddlTipId, Conn);
    MySqlDataAdapter da = new MySqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    Conn.Close();
    ddlTip1.DataSource = ds;
    ddlTip1.DataTextField = "Name";
    ddlTip1.DataValueField = "Id";
    ddlTip1.DataBind();
    ddlTip1.Items.Insert(0, new ListItem("--select--", "0"));
    if (ddlTip1.SelectedValue == "0")
    {
       ddlTip2.Items.Clear();
       ddlTip2.Items.Insert(0, new ListItem("--select--", "0"));
    }
}

protected void ddlTip1_SelectedIndexChanged(object sender, EventArgs e)
{

    int ddlTip1Id = Convert.ToInt32(ddlTip.SelectedValue);
    Conn.Open();
    MySqlCommand cmd = new MySqlCommand("select * from Region where State_Id=" + ddlTip1Id, Conn);
    MySqlDataAdapter da = new MySqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    Conn.Close();
    ddlTip2.DataSource = ds;
    ddlTip2.DataTextField = "Name";
    ddlTip2.DataValueField = "Id";
    ddlTip2.DataBind();
    ddlTip2.Items.Insert(0, new ListItem("--select--", "0"));
}

}

c# DropDownList selectedindexchanged in updatepanel with bootstrap modal

c# DropDownList selectedindexchanged in updatepanel with bootstrap modal

c#

asp.net

twitter-bootstrap

updatepanel