使用记录计数确认删除弹出窗口

Question

一般信息：

Aspx 页面包含一个 Ascx 用户控件。在 User 控件中，Repeater 包含在 View 中，包含在 Multiview 中。 Asp.Net 2.0 框架/C#

详情：

我有一个显示记录的中继器（在 ascx 用户控件内），第一列是一个复选框。如果选中，该行将被删除。 在中继器之外，我有一个按钮，可以删除所有选中的行。

一切正常，但被要求添加一个弹出“确认删除”消息，其中包括如果用户在弹出窗口中单击“确定”将删除的记录数。

类似： “您即将删除 8 条记录”。

目前我的按钮如下所示：

    <asp:Button ID="btnDeleteAllRecords" runat="server" Text="Delete all Checked Records" Onclick="btnDeleteAllRecords_Click" OnClientClick="javascript:GetCbCount();" />

我有这个 javascript 代码块：

<script type="text/javascript">
function GetCbCount()   
{
var cb = document.getElementById("rptrVoicemail").getElementsByTageName("input");
  var cbCount;   
for(i = 0;  i < cb.lenght; i++)   
{   
    if(cb[i].type == "checkbox")   
    {   
        if(cb[i].checked)   
        {   
            cbCount =  cbCount + 1;   
        }               
    }       
}
return confirm('You are about to delete' + cbCount + 'records.');

} 
</script>

当我点击我的按钮时，我得到：

错误：'document.getElementById(...)' 为 null 或不是对象 在这一行：

var cb = document.getElementById("rptrVoicemail").getElementsByTageName("input");

为什么 JS 看不到我的中继器？是因为它被埋在 MultiView 中吗？ JS如何改正，让弹窗显示消息中的记录数？

更新： 我将脚本更改为：

function GetCbCount(){ 
   var inpt = document.getElementById("vmDiv"); 
   var checkboxes = inpt.getElementsByTagName("input"); 
   var cbCount; 
   for(i = 0; i<checkboxes.lenght;i++){ 
      if (checkboxes[i].type == "checkbox" && checkboxes[i].checked){ 
         cbCount = cbCount + 1;
      } 
   } 
   return confirm('You are about to delete ' + cbCount + ' Voicemails.'); 
} 

Answer 1

这应该可行：

document.getElementById('<%= rptrVoicemail.ClientID %>').getElementsByTageName("input");

另一种方法是这个返回 ClientID 的小脚本。您甚至可以将其添加到包含的 JS 文件中。

function GetClientId(strid)
{
     var count=document.forms[ 0 ].length ;
     var i = 0 ;
     var eleName;
     for (i = 0 ;  i < count ;  i++ )
     {
       eleName = document.forms [ 0 ].elements[ i ].id;
       pos=eleName.indexOf( strid ) ;
       if(pos >= 0)  break;          
     }
    return eleName;
 }

找到here。

Answer 2

如果您使用母版页或嵌套控件（在 ascx、视图等内部），框架将更改随元素呈现的 ID。

如果您执行“查看源代码”或使用 FireBug，您可能会看到 rptrVoicemail 变成了类似于 ctl00_ContentPlaceHolder1_someUserControl_ctl00_multiViewID_ctl28_rptrVoicemail。

您可以使用getElementById('<%= rptrVoicemail.ClientID %>') 获取元素的 ID，因为它将在客户端上呈现。

编辑：为了帮助调试，做这样的事情......你明白了。 var rptr = document.getElementById('<%= rptrVoicemail.ClientID %>'); rptr.borderColor = 'pink'; // draw a border to check it's the right element