• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1101
  • Last Modified:

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

0
eddyperu
Asked:
eddyperu
1 Solution
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now