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

当ASP.NET控件呈现时,它们的ID有时会改变,就像它们在命名容器中一样。 Button1在渲染时可能实际上具有ctl00_ContentMain_Button1的标识。

我知道你可以把你的JavaScript作为string写在你的.cs文件中,获取控件的clientID并使用clientscript将脚本注入到你的页面中,但是有什么方法可以直接从使用ASP.NET Ajax的JavaScript引用一个控件?

我发现编写一个函数来recursion地parsingdom,并find一个包含我想要的id的控件是不可靠的,所以我正在寻找一个最佳实践而不是解决方法。

Dave Ward的这篇文章可能有你正在寻找的东西:

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

摘自文章:

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

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

现在引用正确的客户端元素ID,而不pipe页面的结构和控件的嵌套级别如何。 在我看来,这种方法的性能价格非常低,非常值得让你的客户端脚本更有弹性地改变。

以及来自该post的评论post的Dave的一些示例代码:

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

我上面链接的文章的评论线程也有一些很好的讨论。

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

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

将导致:

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

所以你有相同的ID。

几个想法在这:

1)我有很多运气通过css类而不是id的元素,因为asp.net id不像你说的那样可靠。 我使用这个function,它performance相当好:

 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以特定string结尾的元素。 虽然这不是“使用jQuery”的理由,但它绝对是一个优点。

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

哦,我也发现这个,以防其他人有这个问题。

为asp.net控件使用自定义的jQueryselect器: http : //john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

我不认为有这样一个“最佳做法”。 有很多不同的很好的做法。 这是我们的:

每个具有客户端function的控件都直接在控件的标记下面呈现内联脚本块:

 <span id="something_crazy_long"> control markup </span> <script type="text/javascript">new CustomControl('something_crazy_long');</script> 

每个控件都有一个伴随的JS,如:

 var CustomControl = function(id) { this.control = document.getElementByID(id); this.init(); }; CustomControl.prototype.init = function() { //do stuff to wire up relevant events }; 

在代码隐藏方面,我们执行如下操作:

 class CustomControl : Control override void Render(HtmlTextWriter writer) { writer.WriteBeginTag("span"); writer.WriteAttribute("id", this.ClientID); writer.Write(HtmlTextWriter.TagRightChar); //write control markup writer.WriteEndTag("span"); writer.WriteBeginTag("script"); writer.WriteAttribute("type", "text/javascript"); writer.Write(HtmlTextWriter.TagRightChar); writer.Write( string.Format("new CustomControl('{0}');", this.ClientID) ); writer.WriteEndTag("script"); } 

我做了一些类似于Rex M的东西,除了避免使用多个脚本标记,我在我的页面基类中使用了一个函数来注册我要使用clientside的控件,然后将它们吐出到html脚本标记中。

你甚至可以inheritance你的控件的子类,以自动注册该函数或使用布尔属性来设置你是否要在客户端使用它们。

您也可以使用document.getElementById方法来获取ID。

对于'ctl00_ContentMain_Button1' – 在asp.net中,当页面在浏览器中呈现时,第一部分保持相同'ctl00'。 第二部分是ContentPlaceHolder使用的“ContentMain”的ID。 第三个是控件“Button1”的ID

我喜欢这个http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html

我更喜欢在标记document.getElementById('<%#TextBox1.ClientID%>')。value中使用服务器端标记实现<%= TextBox1.ClientID%>中的数据绑定标记。

服务器端标签禁止你在后面的代码中添加控制到dom。 这种需求通常会在您构build应用程序时出现,而数据绑定方法可能使您无法进行重大改写。

当使用服务器端标签也被称为“代码块”执行这个共同的操作

this.Form.Controls.Add(myContorl);

在运行时产生这个错误:

控件集合不能被修改,因为控件包含代码块(即<%…%>)。

不幸的是,在你build立你的网站之后,这往往只会变得很明显。

当实现数据绑定控制时,“<%#TextBox1.ClientID%>”parsing标记中引用的控件属性的值,在适当的位置,比如Page_Load数据的结尾处这样绑定:

的Page.DataBind()

请记住,Page.DataBind()会导致页面上的子控件也是DataBind,如果页面分别处理某些子控件的数据绑定,则这可能是一个不需要的副作用。 如果是这种情况,可以像下面这样在单独的控件上执行数据绑定:

TextBox1.DataBind()

一个应用程序的演变最终会导致某种基本的网站广泛的function,你可能想要添加基本控件,一旦你把你的网站应用程序与服务器端标签replace它们与数据绑定变得有问题,尤其是当页面已被编码来处理数据绑定他们自己。