在A(yíng)SP.NET 的服務(wù)器端控件中有三種關(guān)于 ID 的屬性，即 ID, ClientID 和 UniqueID。
ID 表示控件的服務(wù)器端編程的標識符，我們寫(xiě)"服務(wù)器端的代碼"，就要用到這個(gè) ID, 通過(guò)這個(gè) ID 可以在服務(wù)器端對服務(wù)器端控件的屬性、方法和時(shí)間進(jìn)行編程訪(fǎng)問(wèn)。（可寫(xiě)）
ClientID 表示由服務(wù)器端生成的客戶(hù)端控件的ID,"經(jīng)常用于在客戶(hù)端腳本中訪(fǎng)問(wèn)服務(wù)器控件所呈現的 HTML 元素"。一般情況下與服務(wù)器端的 ID 相同，有時(shí)，不能為控件生成唯一的名稱(chēng)，例如，如果Repeater 空間在它的某個(gè)模板中包含一個(gè) Label 控件，則將在客戶(hù)端生成多個(gè)該 Lable 的 HTML 元素, 為防止命名沖突，ASP.NET 為各個(gè)服務(wù)器控件生成一個(gè)唯一的 ClientID ,ClientID 通過(guò)將子控件的父控件的 UniqueID 值與控件的 ID 值連接生成，各個(gè)部分之間以下劃線(xiàn) _ 連接。（只讀）
UniqueID 用于獲取服務(wù)器控件的唯一的、以分層方式表示的標識符。當將控件放置到重復控件（Repeater、DataList和DataGrid）中時(shí)，將可能生成多個(gè)服務(wù)器端的控件，這就需要區分服務(wù)器端的各個(gè)控件，以使它們的 ID 屬性不沖突。UniqueID 通過(guò)將子控件的父控件的 UniqueID 值與控件的 ID 值連接生成，各個(gè)部分之間以IdSeparator 屬性指定的字符連接。默認情況下， IdSeparator 屬性為冒號字符 (:)。此屬性為在 .Net Framework2.0種新增加。js與aps.net交互一般情況下使用<%=控件ID.ClientID%>就OK了,但如果用到母版頁(yè)(MasterPage)則要使用UniqueID獲得獲值。（只讀）
例如，創(chuàng )建以下 ASP.NET 服務(wù)器控件：
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />
ClientID 屬性被設置為 TextBox1，在基于 HTML 的瀏覽器中，其結果元素與以下所示類(lèi)似：
<input name="TextBox1" type="text" value="Sample Text" id="Text1" />
可以使用這些屬性在客戶(hù)端腳本中引用服務(wù)器控件。通常，必須在客戶(hù)端腳本中用完全限定引用來(lái)引用控件；如果控件是頁(yè)面中 form 元素的子控件，則一般使用document.forms[0].TextBox1.value = "New value"在客戶(hù)端腳本中引用控件。
有些控件將子控件呈現在頁(yè)面中。這些控件中包括數據列表控件（如GridView、DetailsView、FormView、DataList 和 Repeater 控件）、用戶(hù)控件和 Web 部件控件?？梢钥吹?，在這些情況下，子控件可能不具有唯一的 ID，這可能是因為子控件是在某個(gè)模板中定義的，該模板會(huì )為每個(gè)數據行（數據列表控件）生成新的控件實(shí)例，也可能是因為可以從外部源（用戶(hù)控件和 Web 部件控件）將父控件添加到頁(yè)面中對于每個(gè)子控件：控件的 UniqueID 被呈現為 name?？丶?ClientID 被呈現為 id 屬性。
ClientID 和 UniqueID 屬性都基于原始的 ID 屬性，并用足夠的信息進(jìn)行了修改，以保證頁(yè)面中結果的唯一性。ClientID的值可在客戶(hù)端腳本中引用。如果在瀏覽器中顯示一個(gè)具有命名容器的頁(yè)面，則可以查看該頁(yè)面的源文件，從中找到唯一的 ID，這些 ID 作為命名容器子控件的 name 屬性和 id 屬性生成。但是，建議不要依賴(lài)于直接引用在瀏覽器中看到的 ID。因為用于生成子控件唯一ID 的公式可能會(huì )發(fā)生變化，應當獲取子控件的 ClientID 屬性值，并用該值來(lái)引用該子控件。例如，您可能會(huì )在頁(yè)面中動(dòng)態(tài)創(chuàng )建客戶(hù)端腳本。如果客戶(hù)端腳本引用一個(gè)子控件，則應獲取該子控件的 ClientID 屬性，并將其嵌入到動(dòng)態(tài)腳本中。
例2：
假設有子控件：
<asp:TextBox ID = "textboxInfo" runat ="server" Text = "Test Text box" name="haha"></asp:TextBox>
那么我們可以在腳本中這樣寫(xiě)
var tempt = '<%=textboxInfo.ClientID%>';
var controlname = document.getElementById(tempt).name;
var controlid = document.getElementById(tempt).id;
還有一個(gè)問(wèn)題我們需要注意：在使用UniqueID和ClientID的時(shí)候要小心點(diǎn)，千萬(wàn)不要“迫不及待”地使用了這些屬性，在運行的過(guò)程中可能會(huì )碰到一些讓人頭疼的問(wèn)題.
注意
除了用來(lái)分隔 ID 值的是下劃線(xiàn)字符而不是 IdSeparator 屬性指定的字符以外，為控件生成的 ClientID 值與 UniqueID 值相同。默認情況下，IdSeparator 屬性設置為冒號字符 (:)。由于 ClientID 值不包含冒號字符，因此，它可以用于不支持包含冒號的 ID 的 ECMAScript。ClientID 值經(jīng)常用于以編程方式訪(fǎng)問(wèn)為客戶(hù)端腳本中的控件呈現的 HTML 元素。有關(guān)詳細信息，請參見(jiàn) ASP.NET 網(wǎng)頁(yè)中的客戶(hù)端腳本。
總結：
ID，用于server端編程引用控件，沒(méi)有對應的client值，即不呈現到html中。
UniqueID，
asp.net引擎按控件樹(shù)層次生成的分層形式限定的標志符，連接符默認為 $ （美元符號）【注：MSDN說(shuō)默認為 : （冒號），實(shí)際是 $ ，可能文檔有誤吧】，此連接符在asp.net 2.0 中由屬性 IdSeparator 指定，在client中呈現為html元素的name屬性
此屬性主要用來(lái)提交（PostBack）客戶(hù)端數據，如Request.Form[someControl.UnqiueID]
ClientID，
由父控件的UnqiueID連接本身ID而成，但是連接符不一樣，默認為 _ （下劃線(xiàn)），此連接符在asp.net 2.0 中由屬性 ClientIDSeparator 指定，在client中呈現為html元素的id屬性，此屬性主要在客戶(hù)端教本中使用，如 var o = document.getElementById('<% = someControl.ClientID %>');
關(guān)于 UniqueID的層次分隔符號，1.x 中為 :（冒號），而 2.0 已實(shí)現為 $（美元符），主要原因可能是 javas
ASP.NET 使用的回發(fā)機制（簡(jiǎn)單版本）是通過(guò)一個(gè)原型為 __doPostBack(<ControlUniqueID>, <CommandArgs>) 的 javas
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.on
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
此函數的第一個(gè)參數 <ControlUniqueID> 對應引起頁(yè)面回發(fā)控件的客戶(hù)端 name 屬性/服務(wù)端 UniqueID 屬性，當用戶(hù)引發(fā)一個(gè)事件，如點(diǎn)擊按鈕，選擇列表框的某一項，首先通過(guò) _doPostBack 函數將此值存在隱藏域中，然后提交頁(yè)面。
在服務(wù)器端，ASP.NET 引擎通過(guò) HttpRequest.HttpMethod 確定請求是否為 post 方式，若是，則檢索HttpRequest.Request.Form["__EVENTTARGET']， 獲取引發(fā)回發(fā)的控件唯一標識符，并在頁(yè)面控件集合層次中查找，若找到此控件，則將在適當階段引發(fā)服務(wù)器端事件。
另補充控件變化規律如下:
控件名字發(fā)生變化是因為 INamingContainer這個(gè)接口。這個(gè)接口沒(méi)有任何方法，僅只作為一個(gè)標記。ASP.NET維護控件name和id生成的規律是:NamingContainer爺爺$NamingContainer爸爸$該控件的ID。id則一般將$換為"_"。
你把控件直接放到form下，它頭頂唯一一個(gè)NamingContainer是Page，但是這個(gè)是特殊的邏輯，不會(huì )生成__Page_控件名，所以就只?？丶?，于是ID看起來(lái)沒(méi)有變化。
當你把控件放到Repeater中時(shí)，Repeater自己被INamingContainer標記，同時(shí)，每一次循環(huán)，它會(huì )把模板內的控件重新生成一遍，同時(shí)生成一個(gè)RepeaterItem， 把這些根據模板生成的控件加入RepeaterItem的子控件。這個(gè)RepeaterItem也是一個(gè)NamingContainer. 于是控件中就會(huì )帶有:
RepeaterID(Da
不過(guò)非runat=server控件因為不由ASP.NET維護, 不會(huì )發(fā)生變化. UserControl.ascx由于其基類(lèi)也是一個(gè)NamingContainer, 所以如果你把控件放入.ascx, 然后在頁(yè)面上引用, 則前面又會(huì )多一層UserControl的ID.
通過(guò)controls集合訪(fǎng)問(wèn)服務(wù)器控件：
在VS2005中新建一個(gè).aspx文件，打開(kāi)HTML頁(yè)會(huì )發(fā)現一個(gè)原先的聲明從
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
變成了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">!
很早以前就稱(chēng)的HTML的接班人XHTML，現在MS終于要將它扶正了..
這樣在寫(xiě)HTML代碼時(shí)就要注意了,
如:
<font>
<div>
</font>
</div>
是無(wú)法在Vs2005中的Design模式中正確顯示的[很明顯的錯誤，但在HTML可以正常顯示].. ,XHTML的語(yǔ)法比HTML嚴格的
多
而關(guān)于XHTML和HTML的區別，如果不是非常明白http://www.blueidea.com/tech/site/2004/1911.asp這個(gè)文章可以參考一下。
Form
Form新添加了幾個(gè)功能比較有用的是defaultbutton、defaultfocus。從字面的意思大家就可以理解了以前在A(yíng)SP.NET中讓人頭痛的默認提交表單按鈕和設置焦點(diǎn)在A(yíng)SP.NET 2.0已經(jīng)提供了，不用象以前那樣自己寫(xiě)javas
關(guān)于焦點(diǎn)在也可以代碼中通過(guò) this.SetFocus()來(lái)設置了,看得出來(lái)ASP.NET2.0是設計是多么的細致。
Header
在代碼中可能通過(guò)
this.Header.Metadata.Add("taye", "value");
this.Header.Title = "value";
this.Header.LinkedStyleSheets.Add("style.css");
來(lái)控制Title,Meta,Style等[好象LinkedStyleSheets只能是text/css???]
this.Header.StyleSheet.RegisterStyle()
方法將一個(gè)style內嵌到網(wǎng)頁(yè)中去.
這樣頁(yè)面幾乎所以部分都可以得到控制了
有些人也許會(huì )想那<html>和<body>呢
我們先來(lái)運行一下面這個(gè)代碼.
private void Page_Load(object sender, EventArgs e)
{
foreach (Control ctl in Page.Controls)
{
Response.Write(ctl.ToString() + "<BR/>");
LiteralControl lc = ctl as LiteralControl;
if (lc != null)
{
Response.Write(lc.Text);
}
}
}
你將會(huì )看到一個(gè)正常頁(yè)的有如下五個(gè)控件
System.Web.UI.LiteralControl
System.Web.UI.HtmlControls.HtmlHead
System.Web.UI.LiteralControl
System.Web.UI.HtmlControls.HtmlForm
System.Web.UI.LiteralControl
而三個(gè)LiteralControl的控件的內容分別為
System.Web.UI.LiteralControl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
System.Web.UI.LiteralControl
<body>
System.Web.UI.LiteralControl
</body>
</html>
所以如果你要對body或<!DOCTYPE..>或<html>進(jìn)行控制那你就找到這相應的控件以后再進(jìn)行相應的修改吧。只要對
LiteralControl.Text進(jìn)行修改就可以.
--------------------------------------------------------------------------
從外部的js文件中獲取ASPX頁(yè)面的控件ClientID
前言
當使用MasterPage、UserControl等容器時(shí)，為了避免控件的重復命名，asp.net會(huì )自動(dòng)將容器中的控件生成一個(gè)ClientID（Control Tree中的可生成，否則不會(huì )生成）。
例如：ContentPlaceHolder1中的Button1默認情況下會(huì )生“ctl00_ContentPlaceHolder1_Button1”的ClientID。我們在Render出來(lái)的mark up中看到的也是這些ClientID。所以，當我們使用JavaS
Inline情況下的解決方案
如果JavaS
-->document.getElementById("<%=Me.txtTest.ClientID %>" )
來(lái)獲取一個(gè)控件的真實(shí)引用，當然，FindControl等方法也可以寫(xiě)在<%=...%>中用來(lái)綁定服務(wù)端數據到客戶(hù)端。
external JS情況下的解決方案
然而，部分情況下，為了解耦，我們常常把JavaS
此時(shí)簡(jiǎn)單點(diǎn)的解決方案就是直接在JavaS
我常用的方法有兩種，在此拋磚引玉：
案例：
Default5.aspx是MasterPage.master 的內容頁(yè)，本例中的主要文件。
JScript.js是一個(gè)外部的js文件，用來(lái)處理JavaS
Button1是Default5.aspx中的一個(gè)<ASP:Button>，用來(lái)顯示效果。
Button2是Default5.aspx中的一個(gè)<input type=button>，用來(lái)觸發(fā)JavaS
需求：點(diǎn)擊Button2，將Button1上的文本改成“from extended js”
方案一：使用內聯(lián)JS訪(fǎng)問(wèn)器
要想在外部JS中獲得ASPX動(dòng)態(tài)生成的ClientID，可以通過(guò)在A(yíng)SPX頁(yè)面中添加訪(fǎng)問(wèn)器的方式來(lái)實(shí)現，類(lèi)似OO語(yǔ)言中的屬性：
我們在Default5.aspx中添加如下代碼：作用：①聲明getClientId訪(fǎng)問(wèn)器，并注冊Button1的ClientID。②引用JScript.js文件
--><script type="text/javas
function getClientId()
{
var paraId1 = '<%= Button1.ClientID %>';
return {Id1:paraId1};
}
</script>
<script type="text/javas
接下來(lái)，我們在JScript.js中，就可以這樣來(lái)實(shí)現需求：
-->function ChangeText()
{
var btn=document.getElementById(getClientId().Id1);
btn.value="from extended js";
}
getClientId().Id1 貌似很OO，而且還支持VS2008很蹩腳的JS智能提示，打上“.”之后就可以在提示中選擇Id1了。
如果有多個(gè)控件需要注冊，只需將他們注冊到訪(fǎng)問(wèn)器中即可，下面是一個(gè)完整的Demo代碼：
></script>//引用外部js
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<input id="Button2" type="button" value="button" on
</asp:Content>
function ChangeText()
{
var btn=document.getElementById(getClientId().Id1);
btn.value="from extended js";
var btn=document.getElementById(getClientId().Id2);
btn.value="from extended js";
}
方案二：使用JS全局變量
還有一種方法也比較OO，就是使用JS全局變量，同樣，也需要在Default5.aspx中添加一段JS代碼，作為全局變量，來(lái)提供ClientID：
--><script type="text/javas
var globals = {};
globals.controlIdentities = {};
globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>';
globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>';
</script>
<script type="text/javas
接下來(lái)，我們在JScript.js中，就可以這樣來(lái)實(shí)現需求：
-->function ChangeText()
{
var btn=document.getElementById(globals.controlIdentities.someControl1);
btn.value="from extended js";
}
globals.controlIdentities.someControl1，同樣，也支持VS2008很蹩腳的JS智能提示，打上“.”之后就可以在提示中選擇someControl1了。下面是一個(gè)完整的Demo代碼：
></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<input id="Button2" type="button" value="button" on
</asp:Content>
function ChangeText()
{
var btn=document.getElementById(globals.controlIdentities.someControl1);
btn.value="from extended js";
var txt=document.getElementById(globals.controlIdentities.someControl2);
btn.value="from extended js";
}
結束語(yǔ)：
在上面兩種方法中，也沒(méi)有真正的實(shí)現aspx和js的完全解耦，所以，在js文件中，最好還是加上：
-->///<reference path="Default5.aspx"/>
上面的方法是我常用的，今天倉促的總結了一下，希望在此能夠拋磚引玉，謝謝！
--------------------------------------------------------------------------
ASP.Net中如何使用ClientID
ASP.Net 提供了代碼和頁(yè)面分離的機制，在大多數情況下，這種機制工作得非常好。但是，如果需要使用客戶(hù)端java腳本來(lái)做些工作，你就會(huì )遇到麻煩了。問(wèn)題出在你在設計階段為server端控件設置的ID值和頁(yè)面運行時(shí)控件實(shí)際的ID值不一致。例如，新建一個(gè)Web site,增加一個(gè) aspx page,在頁(yè)面上加入一個(gè)text box控件：
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>
運行這個(gè)頁(yè)面，從View source中會(huì )看到運行時(shí)的結果：
<Input name="mytext" type="text" id="mytext" />
這時(shí)我們看到設計階段的ID值和運行時(shí)控件的ID值是一樣的，沒(méi)有問(wèn)題，這是因為這是一個(gè)單純的aspx頁(yè)面。如果在頁(yè)面中包含一個(gè)用戶(hù)自定義的web control或使用了master pages (ASP.NET 2.0)，情況就不樂(lè )觀(guān)了。
我們增加一個(gè)新的user control名為mycontrol.ascx. 在mycontrol.ascx中加入同樣的text box。再把這個(gè)自定義控件加入到一個(gè)aspx 頁(yè)面， 將此控件的ID設置為myControl. 在瀏覽器中運行這個(gè)頁(yè)面，得到的html是這樣的：
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的設計階段ID= mytext，但運行時(shí)得到的ID=myControl_mytext。也就是在原來(lái)的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages時(shí)，所有的aspx 頁(yè)面都是被包含在一個(gè)容器中的， 而且還常常會(huì )有容器的嵌套。如果在客戶(hù)端使用JavaS
最簡(jiǎn)單的：
<script language="javas
var x=<% Response.Write("'"+myControl.ClientId+"';" ) %>
function doSomething()
{
Var myControl=document.getElementById(x);
}
</script>
這種方法對于一個(gè)兩個(gè)控件比較適用。不過(guò)由于必須在aspx頁(yè)面中設置，不能將javas
那么，有沒(méi)有可以不進(jìn)行硬編碼的方法呢?本文提供了一種方法，可以使用ASP.Net現有技術(shù)實(shí)現，并且適合所有的ASP.Net framework版本。
解決方案
關(guān)鍵是創(chuàng )建一個(gè)不會(huì )被服務(wù)器端修改的客戶(hù)端控件。在自定義控件上增加一個(gè)hidden input，將它設為literal server side control：
<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='<asp:Literal Runat=server ID=ctrlPrefix></asp:Literal>'>
還要注意，這個(gè)hidden input控件需要加入到控件容器里面。因為我們后面要用它來(lái)得到控件的ID。在后臺代碼中對Page_Load 事件加入如下處理：
string []elm =ctrlPrefix.ClientID.Split('_');
ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");
我們得到控件的client id，包含了控件的ID加上控件容器的ID作為前綴。第二行代碼將ctrlPrefix.ClientID的后面一段去掉，得到容器的ID前綴，返回值包含了_。編譯后運行這個(gè)頁(yè)面，結果如下：
<input name="myControl:mytext" type="text" id="myControl_mytext" /><input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>
現在，hidden input中已經(jīng)保存了容器的ID前綴。下面，我們用JavaS
增加一個(gè)新的方法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;
}
這個(gè)方法得到hidden input的值并返回，這樣我們就得到了ID的前綴。第二個(gè)方法用來(lái)查詢(xún)空間
function readValue(ctrlName)
{
var prefix = getCrtlPrefix();
var objCrtl = document.getElementById(prefix + ctrlName);
if (objCrtl) alert ( "Prefix: " + prefix + " - value: " + objCrtl.value);
else alert("not found!");
}
這個(gè)方法顯示textbox控件的值。你會(huì )注意到，這里調用了getCtrlPrefix來(lái)計算textbox控件的ClientID。 我們可以增加一個(gè)按鈕來(lái)調用這個(gè)方法：
<input type=button value="Read Value" on
這個(gè)html button會(huì )調用readValue。最后，把這個(gè)javas
<script language="JavaS
運行這個(gè)頁(yè)面，在text box中輸入寫(xiě)數據，然后點(diǎn)擊按鈕，會(huì )出現一個(gè)消息對話(huà)框來(lái)顯示ID前綴以及text box中的數據。
聯(lián)系客服
