asp.net 服务器控件的 ID,ClientID,UniqueID 的区别 |
1、简述 ID是设计的时候自己所指定的ID,是我们分配给服务器控件的编程标识符,我们常常使用this.controlid来寻找控件,那么这个controlid就是这里所说的ID. ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问 。 UniqueID 服务器控件的唯一的、分层的形式限定的标识符 。 是当需要参与服务端回传的时候用的 。当将控件放置到重复控件(Repeater、DataList和DataGrid)中时,将可能生成多个服务器端的控件,这就需要区分服务器端的各个控件,以使它们的 ID 属性不冲突 。UniqueID 通过将子控件的父控件的 UniqueID 值与控件的 ID 值连接生成,各个部分之间以 IdSeparator 属性指定的字符连接 。默认情况下, IdSeparator 属性为冒号字符 (:) 。此属性为在 .Net Framework2.0种新增加 。 (UniqueID 的解释做了参照,本篇重点强调ID与ClientID) 2、代码示例解说 看看如下代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <script type="text/javascript"> function GetValue() { <SPAN style="COLOR: #0080c0"><STRONG>var t=document.getElementById(<%= TextBox1.ClientID %>);</STRONG></SPAN> t.innerText=2; } </script> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div> <input type="button" runat="server" id="button1" onclick="GetValue();" value="赋值" /> </form> </body> </html> 有人会问了:var t=document.getElementById("TextBox1");不是也运行的好好的吗? 答案:在一般的aspx中ID=ClientID(前提是你自己已经设置好了ID值) 看下面代码,设置了模板页 复制代码 代码如下: <%@ Page Language="C#" MasterPageFile="'/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="text/javascript"> function GetValue() { <SPAN style="COLOR: #0080c0"><STRONG>document.write(<%= TextBox1.ClientID %>)</STRONG></SPAN> } </script> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <input type="button" runat="server" id="button1" onclick="GetValue();" value="赋值" /> </asp:Content> 页面显示了<SPAN style="COLOR: #0080c0"><STRONG>ctl00_ContentPlaceHolder1_TextBox1</STRONG></SPAN> 。即TextBox1.ClientID =ctl00_ContentPlaceHolder1_TextBox1 。 此时把代码改成 复制代码 代码如下: <%@ Page Language="C#" MasterPageFile="'/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="text/javascript"> function GetValue() { <SPAN style="COLOR: #0080c0"><STRONG><SPAN style="TEXT-DECORATION: line-through">var t=document.getElementById("TextBox1");</SPAN></STRONG></SPAN> t.innerText=2; } </script> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <input type="button" runat="server" id="button1" onclick="GetValue();" value="赋值" /> </asp:Content> 出错了,t=null,也就是找不到TextBox1,所以需要改成<SPAN style="COLOR: #0080c0"><STRONG>var t=document.getElementById(<%=TextBox1.ClientID%>);</STRONG></SPAN> 3、综述 view sourceprint?1 对于服务器控件,在客户端调时使用ClientID属性,在服务端时使用ID属性 。 |