How can I call one of the Control ID's that live inside of a Web user Control?

Hi Experts
I have this Line in my aspx page ,which belong to an animated extender:
 <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="??????"  ...

Also, I have a Web user Control that contain an ImageButton control with this ID="create".

How can I call the ID of this ImageButton and set it up as the TargetControlID from the animation extender in my aspx page?
In other words..How can I make that the program read this:

 <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="create" ....

Thanks
This is my page.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MadalPoppUpExtenderExample.aspx.cs"
    Inherits="MadalPoppUpExtenderExample" %>
<%@ Register Src="controls/CreateProfile.ascx" TagName="CreateProfile" TagPrefix="uc1" %>    
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
 
 
</head>
<body class="hola">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
        <table border="1" width="450px" height="580px" align="left">
            <tr>
                <td>    
                <uc1:CreateProfile ID="CreateProfile" runat="server"></uc1:CreateProfile>              
                    <asp:HyperLink runat="server"
                              ID="ClickMe" Text="Click Me" NavigateUrl="#">
                    </asp:HyperLink>
                    <asp:label runat="server" ID="label1" Text="hollaaa"/>
                    <asp:Panel runat="server" ID="MyPopup" CssClass="modalPopup" Style="display: none; width: 240px">
                        <table bgcolor="blue">
                            <tr>
                              <td>This is a test</td>
                            </tr>
                            <tr>
                                <td> 
                                    <asp:TextBox runat="server" ID="Test"/>
                                    <asp:TextBox runat="server" ID="Test2"/>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                    <br />
                    <asp:Button ID="mockPopupTrigger" runat="server" Text="Button" Style="display: none" />
                    <ajaxToolkit:ModalPopupExtender
                        ID="ModalPopupExtender" runat="server" 
                        TargetControlID="mockPopupTrigger" 
                        PopupControlID="MyPopup"
                        DropShadow="true"
                        BackgroundCssClass="modalBackground"                          
                        BehaviorID="modalBehavior">
                    </ajaxToolkit:ModalPopupExtender>
               
 
                    <script type="text/javascript" language="javascript">// Move an element directly on top of another element (and optionally// make it the same size)
                           function Cover(bottom, top, ignoreSize)
                            {
                              var location = Sys.UI.DomElement.getLocation(bottom);
                              top.style.position = 'absolute';
                              top.style.top = location.y + 'px';
                              top.style.left = location.x + 'px';
                              if (!ignoreSize)
                               {
                                  top.style.height = bottom.offsetHeight + 'px';
                                  top.style.width = bottom.offsetWidth + 'px';
                               }
                            }
                            
 
                    </script>
 
                    
                    <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: green;
                        border: solid 1px red;">
                    </div>
                    <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="????">
                                      
                        <Animations>
                        <OnClick>
                          <Sequence>
                          
                             <%-- Position the wire frame on top of the button and show it --%>
                                <ScriptAction Script="$find('modalBehavior').hide()" />
                                <ScriptAction Script="Cover($get('create'), $get('flyout'));" />
                                <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/> 
                            <%-- Move the wire frame from the button's bounds to the info panel's bounds --%>  
 
                           <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                              <Move Horizontal="300" Vertical="350" />
                              <Resize Width="260" Height="280" />
                              <Color PropertyKey="backgroundColor" StartValue="#ffffff" EndValue="#ffffff" />
                           </Parallel>
                           <ScriptAction Script="$find('modalBehavior').show()"/> 
                           <%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%>
                           <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                         </Sequence>
                      </OnClick>
                      </Animations>
                    </ajaxToolkit:AnimationExtender>
                </td>
            </tr>
        </table>
    </form>
</body>
 
 
 
 
 
This is my web User Control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CreateProfile.ascx.cs" Inherits="controls_CreateProfile" %>
<table border="1"  bordercolor=red cellpadding="0" cellspacing="0">
  <tr>
    <td>
        <asp:ImageButton ID="create"  ImageUrl="~/images/CreateProfile.png" runat="server" 
        />
    </td>
    </tr>
    <tr>
    <td>
     <asp:ImageButton ID="return"  ImageUrl="~/images/BacktoBcWebsite_On.png" runat="server" />
    </td>
  </tr>
   <tr>
     <td>
     <asp:ImageButton ID="ImageButton1"  ImageUrl="~/images/BackToBC.png" runat="server" />
     </td>
   </tr>
</table>

Open in new window

LVL 4
eddyperuAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CyrexCore2kCommented:
I don't think you can directly... at least without some major hack job.

Instead, just set the TargetControlID to your user control itself, then, add an event that is raised when the button inside the user control is clicked or whatever particular action you're waiting for.
0
eddyperuAuthor Commented:
Thanks,....I tried that but without any success, Inside my web User Control I have another buttons that also have events. Also, the TargetControl ID only is aksing for a control that trigger it.And it is triggering the AnimationExtender.

My attempt to do it from codebehind:
The main problem is when I am  trying to assign the id of the image button to animation extender control at that time during compilation process the user control may not have been loaded . So there is an exception saying control with ID 'create' could not be found . In order to avoid it the best possible way is to load the user control during the Page_init() method so that I can have full control on it during the Load() stage  . Which I DID..but still I have this error:

Exception Details: System.InvalidOperationException: The TargetControlID of 'OpenAnimation' is not valid. A control with ID 'create' could not be found.


Thanks for your help


The aspx from my page:
public partial class MadalPoppUpExtenderExample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        controls_CreateProfile myControl = (controls_CreateProfile)Page.LoadControl("controls/CreateProfile.ascx");
        Page.Controls.Add(myControl);
        OpenAnimation.TargetControlID = myControl.MyimageID.ID;
 
    }
 
    protected void Page_Init(object sender, EventArgs e)
    {
       controls_CreateProfile myControl = (controls_CreateProfile)Page.LoadControl("controls/CreateProfile.ascx");
        Page.Controls.Add(myControl);
    }    
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.