使用AJAX 3.5从另一个DropDownList填充DropDownList

时间:2011-04-06 23:28:12

标签: c# asp.net asp.net-ajax drop-down-menu autopostback

我正在使用带有ajax工具包的asp.net 3.5。

问题:我有一个自定义控件,在更新面板中有两个下拉列表。第一个DDL具有属性AutoPostBack="true",并在选择时填充第二个DDL。问题是初始页面加载后第一次选择DDL,整个页面重新加载。第二次选择第一个DDL中的项目时,一切都按预期工作。

我尝试在UpdatePanel中添加触发器,但这不会改变结果。

感谢任何帮助。

的.ascx

<asp:UpdatePanel ID="popDates" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <p>
                    <asp:DropDownList ID="ddlDivision" runat="server" AutoPostBack="true" style="width:300px"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="requiredDivision" runat="server" 
                                ControlToValidate="ddlDivision" ErrorMessage="* Please specify a value" 
                                ValidationGroup="valGroupGetDates"
                                InitialValue="Select..." SetFocusOnError="True" CssClass="formValidation">
                    </asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:DropDownList ID="ddlKMA" runat="server" Enabled="False" AutoPostBack="true" style="width:300px"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="requiredKMA" runat="server" 
                                ControlToValidate="ddlKMA" ErrorMessage="* Please specify a value" 
                                ValidationGroup="valGroupGetDates"
                                InitialValue="Select..." SetFocusOnError="True" CssClass="formValidation">
                    </asp:RequiredFieldValidator>
                </p>
            </ContentTemplate>
            </asp:UpdatePanel>

ascx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsAsync || Page.IsPostBack)
            {
                String target = Page.Request.Params.Get("__EVENTTARGET");
                //Division Session                
                Session["divisionDropDown"] = ddlDivision.SelectedItem.Value;
                populateDivisionDDL();
                ddlDivision.SelectedValue = Session["divisionDropDown"].ToString();

                if (target != "" && target != null)
                {
                    if (target.Contains("ddlDivision"))
                    {
                        populateKMA(ddlDivision.SelectedValue);
                    }
             }
            }

            if (!Page.IsPostBack)
            {
                populateDivisionDDL();
                ddlKMA.Items.Clear();
                ddlKMA.Items.Add(default_item());
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
    }

ASPX

<body>
    <form id="ViewSPANodeDatesForm" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManagerDates" runat="server"></asp:ScriptManager>
        <viewControl:SPANodeDates ID="SPANodeDates1" runat="server"></viewControl:SPANodeDates>
    </div>
    </form>
</body>

注意:在添加ajax控件之前,一切都按预期工作。

谢谢!

3 个答案:

答案 0 :(得分:2)

这里有三个使用controller和webservice的级联下拉列表示例。

http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

我可以粘贴整个信息,但我相信链接会更好。甚至斯蒂芬提供它的代码示例。 brgds。

答案 1 :(得分:1)

回应安迪的评论:What do you mean the update panel isn't AJAX?

首先让我们谈谈普通网页中发生的事情。没有AJAX,没有更新面板。

从服务器中提取页面,以及任何外部javascript,外部css,图像等。每个都是HTTP请求。因此,当您完成时,您可能会有5,10,20多个http请求。目标是尽可能少,因为你一次只能有两个请求(有办法解决这个问题)。

问题是如果我们想要更改页面上需要我们从服务器获取的少量数据?回发页面并获取所有相同的未更改数据并处理所有http请求可能会很疯狂。这是AJAX的魅力,我们可以使用javascript与服务器通信并让它返回给我们一些数据。它只会使用一个http请求,我们只返回数据。换句话说,它更快,因为它只有一个http请求,而且文件很小。此外,没有页面闪烁,因为我们没有从服务器请求新页面。

另一方面,更新面板给你的是AJAX(没有页面闪烁)的印象,但它仍然会发回一个帖子,你会产生所有不需要的HTTP请求。这意味着虽然您没有获得页面闪烁,但仍然会出现接口延迟,因为获取数据需要更长时间才能进行真正的AJAX调用。

答案 2 :(得分:0)

我感谢大家的回复,我确信您的解决方案更优雅,更快速,更实际更正确(仍在处理您的链接@sebastian_h)。在此期间,将AutoPostBack="true"保留在第一个DDL中并添加

<Triggers>
   <asp:AsyncPostBackTrigger ControlID="ddlDivision" EventName="SelectedIndexChanged" />
</Triggers>

到updatePanel开始工作。在上次尝试添加目标时,我必须更改其他一些设置。

再次感谢!