Trigger UpdatePanel from Dropdownlist in ChildControl

Question

This is my situation:

Page:

<asp:UpdatePanel ID="updatePanel1" runat="server" ChildrenAsTriggers="true">
  <ContentTemplate>
    ...
    <uc:ChildControl ID="ucChild" runat="server" />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

ChildControl:

...
<asp:DropDownList id="dropDown1" runat="server" />
...

I want to update the UpdatePanel (asynchronously) in the Page when the selection of the DropDownList in the ChildControl changes. I tried AutoPostBack="true", but this always leads to a full PostBack of the Page (see this question).

I tried to use

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

but neither "dropDown1" nor "ucChild.dropDown1" worked as values for ControlID.

I also tried to pass a reference of the UpdatePanel to the ChildControl and add a Trigger in the following way:

protected override void OnPreRender(EventArgs e)
{
    if (ParentUpdatePanel != null)
    {
        AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
        trigger.ControlID = dropDown1.ID;
        trigger.EventName = "SelectedIndexChanged";
        ParentUpdatePanel.Triggers.Add(trigger);
    }
    base.OnPreRender(e);
}

(also tried with dropDown1.ChildID)

But I am still unable to get the UpdatePanel to trigger when the value in the Dropdown changes. The problem seems to be that the UpdatePanel cannot see the Control in the ChildControl and therefore is unable to set the Trigger accordingly.

How can I do it?

Aristos · Accepted Answer · 2012-02-09T13:49:00.570

2

Maybe with a trick putting this code on dropdown list.

dropDown1.Attributes["onchange"] =   
Page.ClientScript.GetPostBackEventReference(ParentUpdatePanel, "") + "; return false;";

When you change the drop down list you send an update event to UpdatePanel using direct javascript call.

edited Feb 09 '12 at 13:49

answered Feb 09 '12 at 13:09

Aristos

66,005
16
114
150

It didn't work with your code, because the <% %> did not evaluate, but I got it running through code behind: `dropDown1.Attributes["onchange"] = Page.ClientScript.GetPostBackEventReference(ParentUpdatePanel, "") + "; return false;";` Thank you! – magnattic Feb 09 '12 at 13:47
If you could edit it to code that works I will be happy to accept it as answer. :) – magnattic Feb 09 '12 at 13:48
@atticae correct, this must be added as attribute on code behind. – Aristos Feb 09 '12 at 13:48
@atticae updated, for the "return false" I am not 100% that is necessary. – Aristos Feb 09 '12 at 13:49
Hm, I thought it worked and it in fact triggers an update, but the response is: "The View State Is Invalid for This Page". Any idea how to fix that? – magnattic Feb 09 '12 at 13:56
I surrounded the above with if(!IsPostBack) which seems to fix it. – magnattic Feb 09 '12 at 14:09
@atticae add this attributes only on load and not when the post back happends, also be sure that the viewstate is on for the drop down list. – Aristos Feb 09 '12 at 14:09

score 0 · Answer 2 · answered Feb 09 '12 at 13:57

Setting AutoPostBack=True on the Drop Down List control should not refresh the entire page if it is in an update panel.

I created a simple example:

default.aspx:

<form id="form1" runat="server">
<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="up" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <ContentTemplate>            
            <uc:UserControl ID="ucChild" runat="Server"></uc:UserControl>
            <asp:Label ID="lbl" runat="server"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

default.aspx.cs (code behind):

public partial class _default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        lbl.Text = ucChild.value;
    }   
}

UserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="somenamespace.UserControl" %>
<asp:DropDownList runat="server" ID="ddl" AutoPostBack="true">
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>

UserControl.ascx.cs (code behind):

public partial class UserControl : System.Web.UI.UserControl {
    public string value {
        get { return ddl.SelectedValue.ToString(); }
    }
}

When I change the dropdownlist, the label is updated without a full post back.

I know that it "should not refresh the entire page" but for some reason it does exactly that for me, and from me research I am not the only one: http://stackoverflow.com/questions/2138565/drop-down-list-in-update-panel-causing-full-postback — magnattic, Feb 09 '12 at 14:12
include more of your code so that we can see if there are other obvious issues. do all controls in the update panel cause a complete page refresh or just the drop down list in question? how is the ddl getting populated, and what is it doing when the selection is changed? — Zach Green, Feb 09 '12 at 14:24
No need, Aristo's workaround works for me. This problem has taken too much of my time already. I might try to reproduce it with your code example on the weekend and provide more info. — magnattic, Feb 09 '12 at 14:30

Trigger UpdatePanel from Dropdownlist in ChildControl

2 Answers2