asp.net 服务器控件的 ID,ClientID,UniqueID 的区别
程序员文章站
2024-03-07 19:04:39
1、简述 id是设计的时候自己所指定的id,是我们分配给服务器控件的编程标识符，我们常常使用this.controlid来寻找控件，那么这个controlid就是这里所说的...
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属性。
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属性。
推荐阅读
-
asp.net Page.EnableEventValidation 属性验证服务器控件的回发和回调事件出现的错误
-
递归输出ASP.NET页面所有控件的类型和ID的代码
-
递归输出ASP.NET页面所有控件的类型和ID的代码
-
ASP.NET的HtmlForm控件学习及Post与Get的区别概述
-
ASP.NET的HtmlForm控件学习及Post与Get的区别概述
-
ASP.NET笔记之 控件与母板的区别分析
-
ASP.NET笔记之 控件与母板的区别分析
-
HTML服务器控件和WEB服务器控件的区别和联系介绍
-
ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法
-
HTML服务器控件和WEB服务器控件的区别和联系介绍