ASP.NET服务器控件的ClientID

 ASP.NET服务器控件的ClientID

转自http://blog.csdn.net/dreamliner/article/details/2201237

如果创建一个普通的HTML页面（不包含任何ASP.NET服务器控件），那么在创建HTML控件时，你会为它指定一个id属性，在呈现HTML页面时，此控件的id与你编写HTML页面时赋予控件id相同，不会发生变化。

但是如果创建一个ASP.NET Web页面，并且使用了某些ASP.NET 服务器控件（例如母版页，GridView等）时，那么你为服务器控件设置的ID属性可能与最终呈现的HTML页面中的控件id属性不同。这是因为在ASP.NET中，微软为用户提供了丰富的控件，因此可以构建更加灵活，生动和交互性更强的web页面。但是这也引入了另一层复杂性。例如我们经常使用JavaScript脚本与用户进行交互，但是JavaScript在对DOM元素进行操作时，一般首先使用$get方法获取DOM元素。其中，$get方法以html控件的id属性作为参数。在ASP.NET中，呈现给用户的HTML页面中的控件的id属性（在ASP.NET中使用术语ClientID）是根据服务器控件的ID生成的。

ASP.NET框架在呈现一个ASP.NET服务器控件时，控件的ClientID属性呈现为元素的id和name属性。（ClientID根据你为控件设置的ID属性自动生成。）例如，你可能创建如下的ASP.NET服务器控件：

<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

ClientID被设置为TextBox1，在基于HTML的浏览器中，它最终看起来可能就像这样：

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

注意form元素仅仅呈现一个ID属性，没有name属性。

于是，你可以在客户端脚本使用这些属性来引用服务器控件。一般，你必须在客户端脚本中使用一个全限定的引用来寻址控件；如果此控件是form元素的一个孩子，你一般可以这样引用它：

document.forms[0].TextBox1.value = "New value";

引用一个服务器控件的确切语法依赖于你正在使用什么控件和它是否是另一个控件的孩子。如果你不确定如何引用它，那么运行web页面，查看它的源代码，以决定控件是如何被呈现的。

虽然我们知道ASP.NET服务器控件的ClientID属性与最终呈现的HTML控件的id属性相同，但是它只能在服务器端获取，方法有两种：

1.      在aspx.cs文件中，使用btnInContentPage.ClientID即可。

2.       在aspx文件中，使用脚本块
    <script type="text/javascript">
        var btnInContentPageID = '<%= btnInContentPage.ClientID %>';
    </script>

如果想在客户端获取ClientID，则需要使用一些技巧。

我们可以在aspx文件中获取控件的ClientID，并将它赋给一个全局的javascript变量，然后在包含的javascript文件中引用这个全局变量即可。