Asp controls Id generation inside repeater

Posted by toraan on Stack Overflow See other posts from Stack Overflow or by toraan
Published on 2010-04-02T14:10:18Z Indexed on 2010/04/02 14:13 UTC
Read the original article Hit count: 236

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about JavaScript