Question

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

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>

Answer 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>

Answer 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);
}

在下拉列表的selectedindexchanged之后没有页面刷新？

2 个答案: