--------------------------------------------------------------------------

ASP.Net中如何使用ClientID

ASP.Net 提供了代码和页面分离的机制，在大多数情况下，这种机制工作得非常好。但是，如果需要使用客户端java脚本来做些工作，你就会遇到麻烦了。问题出在你在设计阶段为server端控件设置的ID值和页面运行时控件实际的ID值不一致。例如，新建一个Web site,增加一个 aspx page,在页面上加入一个text box控件：

<asp:TextBox ID="mytext" Runat=server></asp:TextBox>   
运行这个页面，从View source中会看到运行时的结果：

<Input name="mytext" type="text" id="mytext" />
这时我们看到设计阶段的ID值和运行时控件的ID值是一样的，没有问题，这是因为这是一个单纯的aspx页面。如果在页面中包含一个用户自定义的web control或使用了master pages (ASP.NET 2.0)，情况就不乐观了。

我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中加入同样的text box。再把这个自定义控件加入到一个aspx 页面， 将此控件的ID设置为myControl. 在浏览器中运行这个页面，得到的html是这样的：

<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的设计阶段ID= mytext，但运行时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages时，所有的aspx 页面都是被包含在一个容器中的， 而且还常常会有容器的嵌套。如果在客户端使用JavaScript去按照ID查找控件就会失败。解决这个问题可以有多个方法。

最简单的：

<script language="javascript" type ="text/javascript>
        var x=<% Response.Write("'"+myControl.ClientId+"';" ) %>
        function doSomething()
        {
        Var myControl=document.getElementById(x);
        }
</script>

这种方法对于一个两个控件比较适用。不过由于必须在aspx页面中设置，不能将javascript集中起来管理了。

那么，有没有可以不进行硬编码的方法呢?本文提供了一种方法，可以使用ASP.Net现有技术实现，并且适合所有的ASP.Net framework版本。

解决方案
关键是创建一个不会被服务器端修改的客户端控件。在自定义控件上增加一个hidden input，将它设为literal server side control：

<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='<asp:Literal Runat=server ID=ctrlPrefix></asp:Literal>'>
还要注意，这个hidden input控件需要加入到控件容器里面。因为我们后面要用它来得到控件的ID。在后台代码中对Page_Load 事件加入如下处理：

string []elm =ctrlPrefix.ClientID.Split('_');          

ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");   
我们得到控件的client id，包含了控件的ID加上控件容器的ID作为前缀。第二行代码将ctrlPrefix.ClientID的后面一段去掉，得到容器的ID前缀，返回值包含了_。编译后运行这个页面，结果如下：

<input name="myControl:mytext" type="text" id="myControl_mytext" /><input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>
现在，hidden input中已经保存了容器的ID前缀。下面，我们用JavaScript来利用hidden input处理控件查找。

增加一个新的方法getCrtlPrefix()
//returns the container prefix as all controls have that on their ids

function getCrtlPrefix()
{
           var prefix;            
           var        objCrtlPrefix = document.getElementById("ctrlPrefix");

           if (objCrtlPrefix)

                 prefix = objCrtlPrefix.value;                

           return prefix;

 5/7   首页 上一页 3 4 5 6 7 下一页 尾页