下拉列表的 selectedindexchanged 后页面没有刷新？答案

【问题标题】：Don't have the page refresh after selectedindexchanged of dropdown list?下拉列表的 selectedindexchanged 后页面没有刷新？
【发布时间】：2021-12-08 05:21:14
【问题描述】：

在用户根据他们选择的内容选择第一个所需的下拉菜单后，我正在使用两个下拉框，另一个下拉框将加载最终列表。我有这个工作但我不希望页面在选择第一个下拉选项后重新加载是否有解决方法下面是我的测试代码

Behind code

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList1.Items.Add(new ListItem("3 Days", "3 Days"));
                DropDownList1.Items.Add(new ListItem("4 Days", "4 Days"));
                DropDownList1.Items.Add(new ListItem("5 Days", "5 Days"));
                DropDownList1.Items.Add(new ListItem("7 Days", "7 Days"));
            }
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList2.Items.Clear();
            DropDownList3.Items.AddRange(GetListItems(DropDownList1.SelectedValue));
        }

        private ListItem[] GetListItems(string value)
        {
            var items = new List
                <ListItem>
                ();

            if (value == "3 Days")
            {
                DropDownList2.Items.Add(new ListItem("1", "1"));
            }

            if (value == "4 Days")
            {
                DropDownList2.Items.Add(new ListItem("2", "2"));
            }

            if (value == "5 Days")
            {
                DropDownList2.Items.Add(new ListItem("3", "3"));
            }

            if (value == "7 Days")
            {
                DropDownList2.Items.Add(new ListItem("4", "4"));
            }
            return items.ToArray();
        }

<div class="1">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
  <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="1">
  <asp:DropDownList ID="DropDownList2" runat="server">
    <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
  </asp:DropDownList>
</div>

【问题讨论】：

不重新加载页面的唯一方法是使用 AJAX 而不是发布。你愿意使用 JQuery 吗？
我对此很陌生，您能详细解释一下吗？
将您的DropDownList 包装在更新面板中，只有下拉列表下的部分会异步重新加载页面的其余部分不会。

标签： c# asp.net

【解决方案1】：

(FROM MSDN) ScriptManager 控件和 UpdatePanel 控件。这些控件消除了在每次回发时刷新整个页面的要求，从而改善了用户体验。默认情况下，UpdatePanel 控件内的回发控件（例如按钮）会导致部分页面更新。默认情况下，UpdatePanel 控件之外的按钮或其他控件会导致整个页面被刷新，

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <fieldset>
            <div class="1">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <div class="1">
                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
                </asp:DropDownList>
            </div>
        </fieldset>
    </ContentTemplate>
</asp:UpdatePanel>

【讨论】：

【解决方案2】：

您需要将JQuery 与AJAX 调用一起使用以避免回发。

首先，您需要从下拉列表中删除自动回发和事件处理程序：

<div class="1">
<asp:DropDownList ID="DropDownList1" runat="server">
  <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="1">
  <asp:DropDownList ID="DropDownList2" runat="server">
    <asp:ListItem Text="Select..." Value="No selection made"></asp:ListItem>
  </asp:DropDownList>
</div>

然后，使用 JQuery 进行调用，发送所选选项并返回第二个下拉列表的选项。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#<%=DropDownList1.ClientID%>').change(function() {
            var selectedOption = $(this).val();
            console.log(selectedOption); //verify you have the value
            $.ajax({
                  type: "POST",
                  url: "codebehind.aspx/GetListItems",
                  data: JSON.stringify({ value: selectionOption }),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json"
                }).success(function (data) {
                    console.log(data);  //verify the format of the return data
                    obj = JSON.parse(data.d);
                    console.log(obj); //verify obj structure
                    //adding options to drop down list will look something like...
                    $.each(data, function (index, optiondata) {
                        $("#DropDownList2").append("<option value='" + optiondata.Value + "'>" + optiondata.Text + "</option>");
                    });

                });
    });
});
</script>

您需要将代码中的函数更改为：

[WebMethod]
public static List<ListItem> GetListItems(string value)
{

   //..do stuff

   return JsonConvert.SerializeObject(items);
}

【讨论】：

一旦我删除 Autopost 和事件处理程序，第二个下拉列表将不再加载选项。其次，现在使用后面的代码我得到了 C# 这个成员不能从静态上下文中引用的错误
下拉列表应该是空的，直到你有 AJAX 的东西工作。我的回答有几个链接到 AJAX 和 JQuery 的参考资料，但这些绝不是详尽无遗的。您可能需要了解如何在 JQuery 中进行链接（包括 document.ready 和 script 标签）。我将用几个额外的助手更新我的答案，以正确的方式为您指明方向。此外，重点是在没有回发的情况下填充下拉列表，这样您的页面就不会刷新。您需要解决静态引用错误，因为 AJAX / Web 方法要求您的 GetListItems 是静态函数。

【解决方案3】：

在我的案例中，将ClientIDMode="Static" 包含到 DDL 的行为是罪魁祸首。我知道 OP 的标记并非如此，但阅读此内容的一部分用户将与我在同一条船上。只是传递它。

【讨论】：