Asp 控制中继器内的 ID 生成答案

【问题标题】：Asp controls Id generation inside repeaterAsp 控制中继器内的 ID 生成
【发布时间】：2010-04-02 14:10:18
【问题描述】：

我在repeater 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，我不想这样做！！！

但如果我在 ItemCreated 事件中省略这一行：

 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）为什么会发生？为什么这行代码会弄乱 id？
2）如何在代码隐藏中拥有唯一 ID 并分配 javascript？
我可以在 aspx 上添加这个（它会工作，我会得到唯一的 id）：

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

但我必须在代码隐藏中进行，因为只有在服务器验证某些内容时我才需要设置 javascript。

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

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

至于你可以做些什么来解决这个问题，不要将 ID 传递给 javascript 函数。当在 javascript 中触发事件时，事件对象将被传递给 Firefox 的函数，IE 有一个明确的 windows.event 对象。事件对象将具有对触发事件的对象的引用，然后您可以使用它来访问 ID，但我猜您将使用 ID 来获取对元素的引用。

【讨论】：

如果我只传递 Id（而不是 clientID），生成的 id 很好，但生成的 javascript 事件不是。 onmouseover="ShowEditButtons('pnlEditButtons');"
应该在哪里

【解决方案2】：

一个奇怪的问题，不能说明为什么会发生这种情况，但是...尝试将此代码移动到 ItemDataBound 而不是 ItemCreated，我想你会更幸运。我已经像这样完全编写了代码，但是使用 OnItemDataBound 并没有遇到问题。

理论上，NamingContainer 中的任何控件都应该有一个唯一的 ID，所以这里肯定有什么问题。

【讨论】：