在JavaScript中引用ID控件的ASP.NET控件？

Question

当ASP.NET控件呈现时,它们的ID有时会发生变化,就像它们位于命名容器中一样.Button1例如,实际上可能具有ctl00_ContentMain_Button1呈现时的id .

我知道您可以在.cs文件中将JavaScript编写为字符串,获取控件的clientID并使用clientscript将脚本注入到页面中,但有没有一种方法可以使用ASP.NET Ajax直接从JavaScript引用控件？

我发现编写一个函数以递归方式解析dom并找到一个控件来保存我想要的id是不可靠的,所以我一直在寻找最佳实践而不是解决方法.

Answer 1

Dave Ward的这篇文章可能有你想要的东西:

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

摘自文章:

的确有.更好的解决方案是使用内联ASP.NET代码注入控件的ClientID属性:

$get('<%= TextBox1.ClientID %>')

现在引用了正确的客户端元素ID,无论页面的结构和控件的嵌套级别如何.在我看来,这种方法的非常小的性能成本非常值得让您的客户端脚本更容易适应变化.

Dave的一些示例代码来自该帖子的评论帖子:

<script>
  alert('TextBox1 has a value of: ' + $get('<%= TextBox1.ClientID %>').value);
</script>

我上面链接的文章的评论主题也有一些很好的讨论.

Answer 2

您可以更改ClienIDMode控件的属性,'Static'这将导致您在.NET代码中为控件提供相同的ID.

<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox> 

将导致:

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

所以你有相同的ID.

Answer 3

对此有几点想法:

1)我有很多运气通过css类而不是id来获取元素,因为asp.net id并不像你所说的那样可靠.我使用这个功能,它表现得相当好:

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
    {
        node = document;
    }

 if ( tag == null )
    {
        tag = '*';
    }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

 for (i = 0, j = 0; i < elsLen; i++) 
    {
        if ( pattern.test(els[i].className) ) 
            {
                classElements[j] = els[i];
                j++;
            }
      }
 return classElements;
}

2)jQuery在这里有很多帮助.使用jQuery,您可以可靠地获取id以某个字符串结尾的元素.虽然这不是使用jQuery的"理由",但绝对是一个优势.

3)这将在asp.net 4.0中修复,所以挂在那里:-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview. ASPX

Answer 4

哦，我也发现了这个，以防其他人遇到这个问题。

对 asp.net 控件使用自定义 jQuery 选择器： http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/