Asp controls Id generation inside repeater

Question

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

This is my page:

 <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.

Answer 1

Well as to why this is happening I'm not real sure. I suspect it may know that you used the ClientID so it didn't change it according to the naming container when the HTML was rendered.

As to what you can do to fix the problem, don't pass the ID to the javascript function. When an event fires in javascript the event object will be passed to the function for Firefox, IE has an explicit windows.event object. The event object will have a reference to the object that fired the event which you can then use to access the ID, but my guess is you were going to use the ID to get a reference to the element anyway.

Answer 2

An odd problem, can't say why this is happening, BUT... try moving this code to ItemDataBound instead of ItemCreated, I think you'll have more luck. I've written code exactly like this, but using OnItemDataBound and not had a problem.

Theoretically, any control inside a NamingContainer should get a unique ID, so there is definitely something fishy going on here.