Заполнение выпадающего списка с помощью AJAX - PullRequest
Новая
       9

Заполнение выпадающего списка с помощью AJAX

5 голосов
/ 07 марта 2011

У меня есть 3 выпадающих списка, созданных с помощью HTML-тега выбора. При загрузке страницы первое поле имеет несколько имен. Теперь, когда я нажимаю на одно из имен в первом поле, во втором должно появиться еще несколько имен, а когда я нажимаю на имя во втором поле, в третьем поле должны появиться еще несколько имен. Как я могу добиться этого, используя AJAX ? Я должен использовать только ASP.Net и MS SQL Server . Я абсолютный новичок в AJAX, и я сам учился этому, но ничего не получается. Я искал код около недели. Я посмотрел w3schools.com, но когда я попробовал этот код, он не работал. Пожалуйста, помогите мне и расскажите, пожалуйста, шаг за шагом, что нужно для того, чтобы это работало, и что и где. У меня есть срок, который быстро приближается, и в конце концов я пытаюсь заставить его работать. ПОМОГИ МНЕ !!

1 Ответ

7 голосов
/ 07 марта 2011

Я бы порекомендовал поместить три выпадающих списка в UpdatePanel и добавить триггер к каждому для панели обновления.Затем, когда значение изменится, повторно заполните раскрывающийся список и дайте панели обновления отправить обновление.Также сохраняет сессионное состояние на случай, если вы захотите отправить значения.

У меня нет компилятора передо мной, но если нужно, просто оставьте комментарий, и я опубликую код завтра.

Рабочий пример

Я использую «Традиционный шаблон», который поставляется с Visual Studio и главной страницей, поэтому извините заполнители содержимого.Но это должно продемонстрировать, что я имею в виду: 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MultiDropDown.aspx.cs" Inherits="AppSettingsRetrieval.MultiDropDown" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                String[] options = new[] { "ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZA" };
                foreach (String option in options)
                {
                    this.DropDownList1.Items.Add(new ListItem(option, option));
                }
            }
        }

        public void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList2.Items.Clear();
            this.DropDownList2.Items.Add(new ListItem("--- Please Select One ---"));

            String[] options = new[] { "123", "456", "789", "101", "112", "131", "415", "161", "718" };
            foreach (String option in options)
            {
                var str = String.Format("{0} {1}", this.DropDownList1.SelectedValue, option);
                this.DropDownList2.Items.Add(new ListItem(str, str));
            }
            this.DropDownList2.Enabled = true;

            this.DropDownList3.Enabled = false;
        }

        public void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList3.Items.Clear();
            this.DropDownList3.Items.Add(new ListItem("--- Please Select One ---"));

            String[] options = new[] { "test", "testing", "tester", "foo", "bar", "foobar" };
            foreach (String option in options)
            {
                var str = String.Format("{0} {1}", this.DropDownList2.SelectedValue, option);
                this.DropDownList3.Items.Add(new ListItem(str, str));
            }
            this.DropDownList3.Enabled = true;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
        <ContentTemplate>
            <fieldset>
                <legend>Consecutive Dropdown List</legend>
                <p>
                    Primary Filter:
                    <asp:DropDownList runat="server" ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
                <p>
                    Secondary Filter:
                    <asp:DropDownList runat="server" ID="DropDownList2" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" AutoPostBack="true" Enabled="false">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
                <p>
                    Final Filter:
                    <asp:DropDownList runat="server" ID="DropDownList3" Enabled="false">
                        <asp:ListItem Text="---Please Select One---" />
                    </asp:DropDownList>
                </p>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
...