Asp controls Id generation inside repeater

[toraan]

I define some controls inside repeater itemtemplate, the problem is with the Id that are generated automatically.

<asp:Repeater ID="rptThreads" runat="server"            
           onitemcreated="rptThreads_ItemCreated"> 
        <HeaderTemplate> 
           <table  cellpadding="0px" cellspacing="0">              
        </HeaderTemplate> 
 
        <ItemTemplate>         
           <tr style="height:50px">             
             <td> 
                <asp:PlaceHolder ID="plcItemTitle" runat="server">                
                  <asp:Panel id="titleContainer" runat="server" style="position:absolute;"> 
                     <asp:HyperLink  ID="lnkTitle" runat="server" style="float:left;padding-right:10px;" Text='<%# Container.DataItem%>'/>             
                     <asp:Panel id="pnlEditButtons" runat="server" Visible="false" style="vertical-align:middle;z-index:100;display:none;float:left;" >                                                                                         
                       <asp:ImageButton ID="imgbtn1" runat="server"  ImageUrl="~/Images/misc/edit.png"   />                    
                       <asp:ImageButton ID="imgbtn2" runat="server" ImageUrl="~/Images/misc/Rename.png" />                  
                     </asp:Panel>                            
                  </asp:Panel>                
               </asp:PlaceHolder> 
            </td>               
           </tr> 
        </ItemTemplate>         
        <FooterTemplate> 
           </table>  
        </FooterTemplate>  
    </asp:Repeater> 
 

Now I will try to describe the problem:

code-behind:

protected void Page_Load(object sender, EventArgs e) 
    { 
       int [] array = {1,2,3,4,5}; 
       rptThreads.DataSource = array; 
       rptThreads.DataBind();      
    } 
 
    protected void rptThreads_ItemCreated(object sender, RepeaterItemEventArgs e) 
    { 
        if (e.Item.ItemType == ListItemType.Item || 
               e.Item.ItemType == ListItemType.AlternatingItem) 
        { 
 
            Panel editButtonsPanel = e.Item.FindControl("pnlEditButtons") as Panel; 
            editButtonsPanel.Visible = true; 
            Panel containerPanel = e.Item.FindControl("titleContainer") as Panel; 
 
           //Point of Interest!!!! 
           containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');"); 
         } 
 
 
    } 

If I run the page as is, the generated html will be the following (I show only the first 2 items):

  <table  cellpadding="0px" cellspacing="0">                             
           <tr style="height:50px">             
             <td> 
                <div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;">    
                     <a id="lnkTitle" style="float:left;padding-right:10px;">1</a>             
                     <div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">                                                                                                
                       <input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />                    
                       <input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />                                       
                    </div>                                              
                </div> 
            </td>               
           </tr> 
 
           <tr style="height:50px">             
             <td> 
                <div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;"> 
 
                     <a id="lnkTitle" style="float:left;padding-right:10px;">2</a>             
                     <div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">                                                                                                
                       <input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />                    
                       <input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />                                       
                        </div>                                              
                 </div> 
              </td>               
           </tr> 

As you can see all divs get the SAME ID, THIS I DONT WANT!!!

But If I omit this line form the ItemCreated event:

containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');"); 

The generated HTML will be the following:

<table  cellpadding="0px" cellspacing="0">                             
           <tr style="height:50px">             
             <td> 
                <div id="rptThreads_ctl01_titleContainer" style="position:absolute;"> 
 
                     <a id="rptThreads_ctl01_lnkTitle" style="float:left;padding-right:10px;">1</a>             
                     <div id="rptThreads_ctl01_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> 
 
                       <input type="image" name="rptThreads$ctl01$imgbtn1" id="rptThreads_ctl01_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />                    
                       <input type="image" name="rptThreads$ctl01$imgbtn2" id="rptThreads_ctl01_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />                                       
                </div>                                              
              </div> 
            </td>               
           </tr>                 
           <tr style="height:50px">             
             <td> 
                <div id="rptThreads_ctl02_titleContainer" style="position:absolute;">    
                     <a id="rptThreads_ctl02_lnkTitle" style="float:left;padding-right:10px;">2</a>             
                     <div id="rptThreads_ctl02_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;"> 
 
                       <input type="image" name="rptThreads$ctl02$imgbtn1" id="rptThreads_ctl02_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />                    
                       <input type="image" name="rptThreads$ctl02$imgbtn2" id="rptThreads_ctl02_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />                                       
                        </div>                                              
                </div> 
             </td>               
           </tr> 

All divs get unique IDs, and this I do want

My questions are:
1)why it happens? why this line of code messup the ids?
2)how can have the unique ID's and assign javascript in codebehind?
I can add this on aspx (it will wotk and I will get unique ids):

 onmouseover='<%# "javascript:ShowEditButtons(\""+ Container.FindControl("pnlEditButtons").ClientID+ "\");" %>'  

But I must do it in codebehind because I need to set the javascript only if server validate some things.

[Frinavale]

You're doing things correctly.
Something is messing up your IDs and I think it's the PlaceHolder.
You don't need the Placeholder so try deleting it and see if this fixes things.

-Frinny