Update Panel error: Control with the ID "xxx" could not be found in the UpdatePanel

Question

I have a composite drop down calendar user control that consists of a textbox and and calendar image and a validation control. I expose a property called "TextBox" on the usercontrol which returns a reference to the textbox used within the control. This is the textbox that the user enters the date into.

In the ASPX page, I have an instance of this usercontrol:

   <uc1:DropDownCalendar ID="dtmDateFirstEntry" runat="server"  Required="True" />

In my code behind, I want to detect when a user has tabbed off of the textbox and, using an UpdatePanel, referesh an appropriate message depending on the date that was specified.

Elsewhere in the ASPX page I have this:

   <asp:UpdatePanel ID="upIntendedStay" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label4" runat="server" Text="Update this text from server" CssClass="ErrorText"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>

Here's what I do in the code behind:

If Not Me.IsPostBack Then

    dtmDateFirstEntry.TextBox.AutoPostBack = True
    Dim trigger As New AsyncPostBackTrigger
    trigger.ControlID = dtmDateFirstEntry.TextBox.ClientID
    trigger.EventName = "onChange"
    upIntendedStay.Triggers.Add(trigger)

End If

When the page runs and I view the source, I see something like this:

<input id="ctl00_phPageContent_dtmDateFirstEntry_txtDate" class="DefaultTextBox" name="ctl00$phPageContent$dtmDateFirstEntry$txtDate" onchange="javascript:setTimeout('__doPostBack(\'ctl00$phPageContent$dtmDateFirstEntry$txtDate\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" style="width: 112px;" type="text" value="Mar-29-2010" />
<input id="ctl00_phPageContent_dtmDateFirstEntry_imgDate" name="ctl00$phPageContent$dtmDateFirstEntry$imgDate" src="images/calendar.JPG" style="border-width: 0px;" type="image" />&nbsp;

When I run it, I get this error:

A control with ID 'ctl00_phPageContent_dtmDateFirstEntry_txtDate' could not be found for the trigger in UpdatePanel 'upIntendedStay'. 

I didn't think that the trigger control had to be within the UpdatePanel. I thought that was the whole point of adding the trigger.

How do I refresh this update panel changes to the text in the date usercontrol. Next I will have to add other triggers to trigger the refreshing of the Update Panel from other controls scattered across the page, so clearly all of the trigger sources cannot be within the UpdatePanel.

To try an simplify the situation, I added a test Textbox, textbox1 to the update panel:

 <asp:UpdatePanel ID="upIntendedStay" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Label ID="Label4" runat="server" Text="Update tHis text from server" CssClass="ErrorText"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>

I then get the error:

Could not find an event named 'onchange' on associated control 'TextBox1' for the trigger in UpdatePanel 'upIntendedStay'.

OK, I added a textbox, TEXTBOX1, within the UpdatePanel, change "ClientId" to "ID" and "OnChange" to "TextChanged" and it works. But I still get the same error if the textbox is not within the UpdatePanel.

Must the triggering textbox be within the update panel? This is a crippling requirement.

Dim trigger As New AsyncPostBackTrigger
'trigger.ControlID = dtmDateFirstEntry.TextBox.ID '<<<<<<<<<<<<<<<<<<<<<
trigger.ControlID = TextBox1.ID
trigger.EventName = "TextChanged"
upIntendedStay.Triggers.Add(trigger)

OK..When I move athe calendar usercontrol into the Update panel, I get this error:

A control with ID 'txtDate' could not be found for the trigger in UpdatePanel 'upIntendedStay'.

Hmmm. It's apparently having an issue finding the embedded control even though it's within the update panel, but it has no problem finding a plain textbox that is not embedded within a usercontrol!!

Answer 1

You may want to try:

...
trigger.ControlID = dtmDateFirstEntry.TextBox.ID
trigger.EventName = "TextChanged"
...

that is, use the ID instead of the ClientID for the ControlID and do not use the "On" prefix for the EventName.

Answer 2

ASPX Page:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:UpdatePanel ID="upIntendedStay" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
             <uc1:DropDownCalendar ID="DropDownCalendar1" runat="server" />
            <asp:Label ID="Label4" runat="server" Text="Update tHis text from server" CssClass="ErrorText"></asp:Label>

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Code behind:

If Not Page.IsPostBack Then

    Dim trigger As New AsyncPostBackTrigger
    TextBox3.AutoPostBack = True
    trigger.ControlID = TextBox3.ID
    trigger.EventName = ""
    upIntendedStay.Triggers.Add(trigger)

    Dim trigger2 As New AsyncPostBackTrigger
    DropDownCalendar1.TextBox.AutoPostBack = True
    trigger2.ControlID = DropDownCalendar1.ID
    trigger2.EventName = "DateChanged"
    upIntendedStay.Triggers.Add(trigger2)

End If

Label4.Text = Now.ToString

And add this event to your user control:

Public Event DateChanged(ByVal sender As Object, ByVal e As System.EventArgs)

..and viola!