填充使用AJAX下拉列表 [英] Populating a drop down list using AJAX

问题描述

我有3个下拉框，使用HTML选择标记创建的。在页面加载时，第一个盒子有几个名字。现在，当我点击在第一个框中的名称之一，一些名字应该出现在第二，当我在第二个框中点击一个名字，一些名字应该出现在第三个框中。我怎样才能做到这一点使用的 AJAX ？我一定要使用 ASP.Net 和 MS SQL服务器只。我是一个完整的小白到AJAX和我一直教育自己这件事，但什么也没有工作了。我一直在寻找的code了近一个星期。我抬头一看w3schools.com，但是当我尝试，code，它没有工作。请帮助我，请告诉我一步一步，以便需要的东西，使其工作，什么去哪里。我有一个最后期限正在迅速接近和我在我束手无策试图使其工作。帮助我！

I have 3 drop down boxes, created using the HTML select tag. On page load, the first box has a few names. Now, when I click on one of the names in the first box, some more names should appear in the second and when I click on a name in the second box, some more names should appear in the third box. How can I achieve this using AJAX? I have to use ASP.Net and MS SQL Server only. I'm a complete noob to AJAX and I've been educating myself about it, but nothing's working out. I've been looking for the code for close to a week. I looked up w3schools.com, but when I tried that code, it didn't work. Please help me out and please tell me step by step, the things required in order to make it work, and what goes where. I have a deadline that is fast approaching and am at my wit's end trying to make it work. HELP ME!!

推荐答案

我会建议把三dropdownlists在一个UpdatePanel并添加一个触发器，分别用于在UpdatePanel。然后，当值的变化，重新填充下拉并让UpdatePanel的推更新。同时保持会话状态的情况下，你要提交的值。

I would recommend placing the three dropdownlists in an UpdatePanel and adding a trigger to each for the updatepanel. Then, when the value changes, re-populate the dropdown and let the updatepanel push the update. Also keeps session-state in case you want to submit the values.

我没有一个编译器在我面前，但如果需要的话只是发表评论，我会后的code的明天。

I don't have a compiler in front of me, but if need be just post a comment and I'll post the code tomorrow.

我使用的是传统模板随Visual Studio和母版页，所以借口内容占位符。但是，这应该证明了我的意思：

I'm using the "Traditional template" that comes with visual studio and the master page, so excuse the content place holders. But this should demonstrate what I mean:

<%@ 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>

这篇关于填充使用AJAX下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！