Asp 控制转发器内的 Id 生成

我在中继器 itemtemplate 中定义了一些控件，问题出在自动生成的 Id 上。

这是我的页面：

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

现在我将尝试描述问题：

代码隐藏：

 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 + "');");
         }


    }

如果我按原样运行页面，生成的 html 将如下（我仅显示前 2 项）：

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

正如你所看到的，所有 div 都有相同的 ID，这是我不想要的！！！

但是如果我从 Item Created 事件中省略这一行：

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

生成的 HTML 如下：

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

所有div都得到唯一的 ID，这是我想要的

我的问题是：
1）为什么会发生？为什么这行代码弄乱了 ids？
2）如何拥有唯一的ID并在代码隐藏中分配javascript？
我可以将其添加到 aspx 上（它会起作用并且我将获得唯一的 id）：

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

但我必须在代码隐藏中执行此操作，因为仅当服务器验证某些内容时我才需要设置 javascript。

至于为什么会发生这种情况我不太确定。我怀疑它可能知道您使用了 ClientID，因此在渲染 HTML 时它没有根据命名容器更改它。

至于如何解决该问题，请不要将 ID 传递给 javascript 函数。当 JavaScript 中的事件触发时，事件对象将被传递给 Firefox 的函数，IE 有一个显式的 windows.event 对象。事件对象将具有对触发事件的对象的引用，然后您可以使用该引用来访问 ID，但我的猜测是您无论如何都会使用 ID 来获取对元素的引用。