asp.net 伺服器控制項的 ID,ClientID,UniqueID 的區別

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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屬性。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More