CODEWITHSUNDEEP
c#asp.netasp.net-ajaxdrop-down-menuautopostback
Andee
Andee

Reputation: 227

Populating a DropDownList from another DropDownList using AJAX 3.5

I am using asp.net 3.5 with the ajax toolkit.

The problem: I have a custom control with two drop down lists in an update panel. The first DDL has the property AutoPostBack="true" and upon selection the second DDL is populated. The issue is the first time after initial page load the DDL is selected, the entire page reloads. The second time an item in the first DDL is selected, everything works as expected.

I have tried adding Triggers in the UpdatePanel, but that does not change the outcome.

Any help is appreciated.

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

Note: Before adding the ajax controls, everything worked as expected.

Thanks!

Upvotes: 2

Views: 5422

Answers (3)

Andee
Andee

Reputation: 227

I appreciate everyone's responses and I'm sure your solutions are much more elegant, faster, and actually correct (still in the process of working through your link @sebastian_h). In the meantime, keeping AutoPostBack="true" in the first DDL and adding

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

to the updatePanel started working. I must have changed some other setting in my last attempt at adding the target.

Thanks again!

Upvotes: 0

The Muffin Man
The Muffin Man

Reputation: 20004

In response to Andee's comment: What do you mean the update panel isn't AJAX?

First let's talk about what happens in a normal web page. No AJAX, no update panels.

The page is pulled from the server, and any external javascript, external css, images etc. Each one is an HTTP request. So you might have 5,10,20+ http requests by the time you're done. The goal is to have as few as possible, as you can only have two requests at one time (there are ways around this).

The problem is what if we want to change a small amount of data on the page that requires us to get it from the server? It might be crazy to postback the page and get all of the same unchanged data back, and deal with all of the http requests. This is the beauty of AJAX, we can use javascript to talk to the server and have it return to us some data. It would only use one http request and we only get back the data. In other words it's much faster because it's only one http request and it's a small file size. Additionally there is no page flicker because we haven't requested a new page from the server.

The update panel on the other hand gives you the impression of AJAX (no page flicker) but it still does a post back and you incur all of the unneeded HTTP requests. Which means that while you don't get a page flicker, you still get interface lag because it takes longer to get the data then a true AJAX call.

Upvotes: 1

s_h
s_h

Reputation: 1496

here you have three examples of cascading dropdownlist using controller and webservice.

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

I can paste the whole info but I believe the link will be better. even stephen offer code example of it. brgds.

Upvotes: 2

Related Questions