如何在不重新加载页面的情况下刷新下拉列表？答案

【问题标题】：How to refresh dropdownlist without reloading the page?如何在不重新加载页面的情况下刷新下拉列表？
【发布时间】：2014-05-15 14:46:08
【问题描述】：

我的页面中有两个下拉列表：

<asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
    <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
    <asp:ListItem Text="BY LOCATION" Value="1" />
    <asp:ListItem Text="BY SPECIALTY" Value="2" />
</asp:DropDownList>

<br /><br />

<asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
</asp:DropDownList>

我处理下拉列表更改的代码隐藏是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Xml.Linq;
using System.Configuration;
using System.Windows.Forms;
using System.Data;

public partial class physicians : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e) {

    if (!Page.IsPostBack) {
        PopulatePhysician();
    }
    //PopulateSpecialty();
    //PopulateLocation();

    }

    public void PopulatePhysician() {
        SqlCommand cmd = new SqlCommand("getPhysicians", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        //cmd.CommandType = Data.CommandType.StoredProcedure
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Physician's Name";
            Item.Value = "0";
            //Item.Selected = True
            ddlDrillDown.Items.Insert(0, Item);
        //}
    cmd.Connection.Close();
    cmd.Connection.Dispose();
    }

    public void PopulateSpecialty() {
        SqlCommand cmd = new SqlCommand("getSpecialties", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Specialty";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }

    public void PopulateLocation() {
        SqlCommand cmd = new SqlCommand("getLocations", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();

            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Location";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }

    public void ddlMain_SelectedIndexChanged(object sender, System.EventArgs e) {
        switch(ddlMain.SelectedIndex) {
            case 0:
                PopulatePhysician();
                break;
            case 1:
                PopulateLocation();
                break;
            case 2:
                PopulateSpecialty();
                break;
        }
    }
}

我试图添加到上面的功能是，当用户从ddlMain 下拉列表中选择一个选项以根据该选项刷新ddlDrillDown 下拉列表而不重新加载页面时。

我怎样才能实现它？

更新：

<asp:ScriptManager ID="ScriptManager" 
                               runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" 
                             UpdateMode="Conditional"
                             runat="server">
                <ContentTemplate>
                    <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                        <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
                        <asp:ListItem Text="BY LOCATION" Value="1" />
                        <asp:ListItem Text="BY SPECIALTY" Value="2" />
                    </asp:DropDownList>
                    <br /><br />
                    <asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                    </asp:DropDownList>
                    </ContentTemplate>
            </asp:UpdatePanel>

【问题讨论】：

我需要在不刷新页面的情况下刷新列表视图的数据，更多详细信息请查看我的问题stackoverflow.com/questions/47180999/…

标签： c# asp.net

【解决方案1】：

使用 AJAX。将两个下拉控件放在UpdatePanel 中，并在页面中的开始表单标记之后添加ScriptManager（如果还没有）

【讨论】：

ScriptManager 可以在任何地方，还是必须出现在 FORM 标记之后？我用我所拥有的更新了我的问题，如果它很好，请告诉我。
ScriptManager 必须出现在任何需要它的控件之前。 (stackoverflow.com/questions/13473808/…).... 只是为了更安全，建议将 ScriptManager 添加为第一个控件作为整个团队的练习:)
DropDownList 位于子页面内，因此 ScriptManager 是否应该进入母版页？
这取决于页面所需的性能，因为ScriptManager 将 AJAX 相关的 JavaScript 添加到页面标记中。稍微延迟一下就好了，您可以放心地在母版页中添加ScriptManager
在我的母版页中，我有这样的内容：<form runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />...</form> 但是当我更改下拉列表时，页面仍然会刷新。也许与背后的 C# 代码有关？

【解决方案2】：

如果是这种情况，Ajax 方法应该可以解决您的问题。由于您对 Ajax 很陌生，所以我将描述更多细节。

同一页面中必须只有一个 ScriptManager。（如果您使用母版页，请添加到母版页，无需在嵌套内容页中添加）
添加 UpdatePanel 并将您的控件添加到 UpdatePanel 的 ContentTemplate。
将 AutoPostBack="True" 添加到您的主下拉列表中。
双击主下拉列表添加 SelectedIndexChanged 事件。
在主下拉列表的 SelectedIndexChanged 事件中，通过添加 ddlDrillDown.Items.Clear() 方法清除 ddlDrillDown 项，并根据主下拉列表的值重新绑定所需的数据。

【讨论】：

【解决方案3】：

你可以使用 ajax 来实现这个目标。

创建返回项目列表的 asmx-service 或 webApi 控制器。在更改时调用它并渲染它。

【讨论】：

我是新手，所以我不知道如何完成它。我用@Manish Dalal 所说的更新了我的问题，但它不起作用：/
我不使用 ScriptManager。我使用 jQuery 来调用 web-service 和渲染元素。
您能提供我所拥有的样品吗？

【解决方案4】：

按照建议，您可以使用UpdatePanel。请不要使用ClientIDMode="Static"，除非您真的非常需要。

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

        <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ID="ddlMain" runat="server">
            <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
            <asp:ListItem Text="BY LOCATION" Value="1" />
            <asp:ListItem Text="BY SPECIALTY" Value="2" />
        </asp:DropDownList>

        <asp:DropDownList ID="ddlDrillDown" name="searchPhys" runat="server">
        </asp:DropDownList>

    </ContentTemplate>
</asp:UpdatePanel>

现在 UpdatePanel 的问题是它不会刷新页面，而是重新加载 DOM。因此，使用 jQuery 所做的任何更改都将丢失。这就是你失去 DropKick CSS 的原因。您需要再次触发$("#ID").dropkick(。为此，您可以使用 PageRequestManager。

<script type="text/javascript">
    $(document).ready(function () {
        TriggerDropkick();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        TriggerDropkick();
    });

    function TriggerDropkick() {
        $("#<%= ddlMain.ClientID %>, #<%= ddlDrillDown.ClientID %>").dropkick({
            mobile: true
        });
    }
</script>

还建议使用服务来获取 DropDownList 的值。这是可能的，但由于这是网络表单，您需要禁用一些验证以防止出现Invalid postback or callback argument 异常。

【讨论】：

【解决方案5】：

您可以使用的另一种方法是 Asp.Net [Webmethod] 属性。

在您的服务器端代码上创建一个具有 [Webmethod] 属性的方法。在前端，使用 window.PageMethods.（您的方法名称）来调用服务器调用。

【讨论】：

【解决方案6】：

我使用了依赖下拉列表方法。怎么样？：

DropDownList1_SelectedIndexChanged 的内容放在一个 Sub 中

例如：

Sub Drop1()
YOURCOD
End Sub

在DropDownList1_SelectedIndexChanged打电话Drop1()
为DropDownList2_SelectedIndexChanged (Drop2())创建相同的

现在在DropDownList1_SelectedIndexChanged 中致电Drop1 和Drop2。就是这样。

【讨论】：