【转】 ID,ClientID和UniqueID
在ASP.NET 的服務(wù)器端控件中有三種關(guān)于 ID 的屬性,即 ID, ClientID 和 UniqueID。
ID 表示控件的服務(wù)器端編程的標(biāo)識(shí)符,我們寫"服務(wù)器端的代碼",就要用到這個(gè) ID, 通過這個(gè) ID 可以在服務(wù)器端對(duì)服務(wù)器端控件的屬性、方法和時(shí)間進(jìn)行編程訪問。(可寫)
ClientID 表示由服務(wù)器端生成的客戶端控件的ID,"經(jīng)常用于在客戶端腳本中訪問服務(wù)器控件所呈現(xiàn)的 HTML 元素"。一般情況下與服務(wù)器端的 ID 相同,有時(shí),不能為控件生成唯一的名稱,例如,如果Repeater 空間在它的某個(gè)模板中包含一個(gè) Label 控件,則將在客戶端生成多個(gè)該 Lable 的 HTML 元素, 為防止命名沖突,ASP.NET 為各個(gè)服務(wù)器控件生成一個(gè)唯一的 ClientID ,ClientID 通過將子控件的父控件的 UniqueID 值與控件的 ID 值連接生成,各個(gè)部分之間以下劃線 _ 連接。(只讀)
UniqueID 用于獲取服務(wù)器控件的唯一的、以分層方式表示的標(biāo)識(shí)符。當(dāng)將控件放置到重復(fù)控件(Repeater、DataList和DataGrid)中時(shí),將可能生成多個(gè)服務(wù)器端的控件,這就需要區(qū)分服務(wù)器端的各個(gè)控件,以使它們的 ID 屬性不沖突。UniqueID 通過將子控件的父控件的 UniqueID 值與控件的 ID 值連接生成,各個(gè)部分之間以IdSeparator 屬性指定的字符連接。默認(rèn)情況下, IdSeparator 屬性為冒號(hào)字符 (:)。此屬性為在 .Net Framework2.0種新增加。js與aps.net交互一般情況下使用<%=控件ID.ClientID%>就OK了,但如果用到母版頁(MasterPage)則要使用UniqueID獲得獲值。(只讀)
?
例如,創(chuàng)建以下 ASP.NET 服務(wù)器控件:
<asp:textbox id="TextBox1" runat="server" text="Sample Text" />
ClientID 屬性被設(shè)置為 TextBox1,在基于 HTML 的瀏覽器中,其結(jié)果元素與以下所示類似:
<input name="TextBox1" type="text" value="Sample Text" id="Text1" />
?
可以使用這些屬性在客戶端腳本中引用服務(wù)器控件。通常,必須在客戶端腳本中用完全限定引用來引用控件;如果控件是頁面中 form 元素的子控件,則一般使用document.forms[0].TextBox1.value = "New value"在客戶端腳本中引用控件。
有些控件將子控件呈現(xiàn)在頁面中。這些控件中包括數(shù)據(jù)列表控件(如GridView、DetailsView、FormView、DataList 和 Repeater 控件)、用戶控件和 Web 部件控件。可以看到,在這些情況下,子控件可能不具有唯一的 ID,這可能是因?yàn)樽涌丶窃谀硞€(gè)模板中定義的,該模板會(huì)為每個(gè)數(shù)據(jù)行(數(shù)據(jù)列表控件)生成新的控件實(shí)例,也可能是因?yàn)榭梢詮耐獠吭?#xff08;用戶控件和 Web 部件控件)將父控件添加到頁面中對(duì)于每個(gè)子控件:控件的 UniqueID 被呈現(xiàn)為 name。控件的 ClientID 被呈現(xiàn)為 id 屬性。
ClientID 和 UniqueID 屬性都基于原始的 ID 屬性,并用足夠的信息進(jìn)行了修改,以保證頁面中結(jié)果的唯一性。ClientID的值可在客戶端腳本中引用。如果在瀏覽器中顯示一個(gè)具有命名容器的頁面,則可以查看該頁面的源文件,從中找到唯一的 ID,這些 ID 作為命名容器子控件的 name 屬性和 id 屬性生成。但是,建議不要依賴于直接引用在瀏覽器中看到的 ID。因?yàn)橛糜谏勺涌丶ㄒ籌D 的公式可能會(huì)發(fā)生變化,應(yīng)當(dāng)獲取子控件的 ClientID 屬性值,并用該值來引用該子控件。例如,您可能會(huì)在頁面中動(dòng)態(tài)創(chuàng)建客戶端腳本。如果客戶端腳本引用一個(gè)子控件,則應(yīng)獲取該子控件的 ClientID 屬性,并將其嵌入到動(dòng)態(tài)腳本中。
例2:
?
假設(shè)有子控件:
<asp:TextBox ID = "textboxInfo" runat ="server" Text = "Test Text box" name="haha"></asp:TextBox>
那么我們可以在腳本中這樣寫
var tempt = '<%=textboxInfo.ClientID%>';
var controlname = document.getElementById(tempt).name;
var controlid = document.getElementById(tempt).id;
還有一個(gè)問題我們需要注意:在使用UniqueID和ClientID的時(shí)候要小心點(diǎn),千萬不要“迫不及待”地使用了這些屬性,在運(yùn)行的過程中可能會(huì)碰到一些讓人頭疼的問題.
?
注意
除了用來分隔 ID 值的是下劃線字符而不是 IdSeparator 屬性指定的字符以外,為控件生成的 ClientID 值與 UniqueID 值相同。默認(rèn)情況下,IdSeparator 屬性設(shè)置為冒號(hào)字符 (:)。由于 ClientID 值不包含冒號(hào)字符,因此,它可以用于不支持包含冒號(hào)的 ID 的 ECMAScript。ClientID 值經(jīng)常用于以編程方式訪問為客戶端腳本中的控件呈現(xiàn)的 HTML 元素。有關(guān)詳細(xì)信息,請(qǐng)參見 ASP.NET 網(wǎng)頁中的客戶端腳本。
總結(jié):
ID,用于server端編程引用控件,沒有對(duì)應(yīng)的client值,即不呈現(xiàn)到html中。
UniqueID,
asp.net引擎按控件樹層次生成的分層形式限定的標(biāo)志符,連接符默認(rèn)為 $ (美元符號(hào))【注:MSDN說默認(rèn)為 : (冒號(hào)),實(shí)際是 $ ,可能文檔有誤吧】,此連接符在asp.net 2.0 中由屬性 IdSeparator 指定,在client中呈現(xiàn)為html元素的name屬性
此屬性主要用來提交(PostBack)客戶端數(shù)據(jù),如Request.Form[someControl.UnqiueID]
ClientID,
由父控件的UnqiueID連接本身ID而成,但是連接符不一樣,默認(rèn)為?? _ (下劃線),此連接符在asp.net 2.0 中由屬性 ClientIDSeparator 指定,在client中呈現(xiàn)為html元素的id屬性,此屬性主要在客戶端教本中使用,如 var o = document.getElementById('<% = someControl.ClientID %>');
關(guān)于 UniqueID的層次分隔符號(hào),1.x 中為 :(冒號(hào)),而 2.0 已實(shí)現(xiàn)為 $(美元符),主要原因可能是 javascript 中標(biāo)識(shí)符是允許 $,而不允許 : 的。(當(dāng)你偷懶的時(shí)候,可以在 js 中直接使用表單元素的 name屬性應(yīng)用該表單元素,而不用 document.getElementsByName 或者 document.getElementById,不推薦:)
ASP.NET 使用的回發(fā)機(jī)制(簡單版本)是通過一個(gè)原型為 __doPostBack(<ControlUniqueID>, <CommandArgs>) 的 javascript 函數(shù)
function __doPostBack(eventTarget, eventArgument) {
??? if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
???????? theForm.__EVENTTARGET.value = eventTarget;
???????? theForm.__EVENTARGUMENT.value = eventArgument;
???????? theForm.submit();
???? }
}
此函數(shù)的第一個(gè)參數(shù) <ControlUniqueID> 對(duì)應(yīng)引起頁面回發(fā)控件的客戶端 name 屬性/服務(wù)端 UniqueID 屬性,當(dāng)用戶引發(fā)一個(gè)事件,如點(diǎn)擊按鈕,選擇列表框的某一項(xiàng),首先通過 _doPostBack 函數(shù)將此值存在隱藏域中,然后提交頁面。
在服務(wù)器端,ASP.NET 引擎通過 HttpRequest.HttpMethod 確定請(qǐng)求是否為 post 方式,若是,則檢索HttpRequest.Request.Form["__EVENTTARGET'], 獲取引發(fā)回發(fā)的控件唯一標(biāo)識(shí)符,并在頁面控件集合層次中查找,若找到此控件,則將在適當(dāng)階段引發(fā)服務(wù)器端事件。
另補(bǔ)充控件變化規(guī)律如下:
控件名字發(fā)生變化是因?yàn)?INamingContainer這個(gè)接口。這個(gè)接口沒有任何方法,僅只作為一個(gè)標(biāo)記。ASP.NET維護(hù)控件name和id生成的規(guī)律是:NamingContainer爺爺$NamingContainer爸爸$該控件的ID。id則一般將$換為"_"。
你把控件直接放到form下,它頭頂唯一一個(gè)NamingContainer是Page,但是這個(gè)是特殊的邏輯,不會(huì)生成__Page_控件名,所以就只剩控件名了,于是ID看起來沒有變化。
當(dāng)你把控件放到Repeater中時(shí),Repeater自己被INamingContainer標(biāo)記,同時(shí),每一次循環(huán),它會(huì)把模板內(nèi)的控件重新生成一遍,同時(shí)生成一個(gè)RepeaterItem, 把這些根據(jù)模板生成的控件加入RepeaterItem的子控件。這個(gè)RepeaterItem也是一個(gè)NamingContainer. 于是控件中就會(huì)帶有:
RepeaterID(Data)_RepeaterItemID(ctl + 號(hào)碼)_控件ID.
不過非runat=server控件因?yàn)椴挥葾SP.NET維護(hù), 不會(huì)發(fā)生變化. UserControl.ascx由于其基類也是一個(gè)NamingContainer, 所以如果你把控件放入.ascx, 然后在頁面上引用, 則前面又會(huì)多一層UserControl的ID.
通過controls集合訪問服務(wù)器控件:
在VS2005中新建一個(gè).aspx文件,打開HTML頁會(huì)發(fā)現(xiàn)一個(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">!
很早以前就稱的HTML的接班人XHTML,現(xiàn)在MS終于要將它扶正了..
這樣在寫HTML代碼時(shí)就要注意了,
如:
<font>
??? <div>
??? </font>
??? </div>
是無法在Vs2005中的Design模式中正確顯示的[很明顯的錯(cuò)誤,但在HTML可以正常顯示].. ,XHTML的語法比HTML嚴(yán)格的
多
而關(guān)于XHTML和HTML的區(qū)別,如果不是非常明白http://www.blueidea.com/tech/site/2004/1911.asp這個(gè)文章可以參考一下。
Form
Form新添加了幾個(gè)功能比較有用的是defaultbutton、defaultfocus。從字面的意思大家就可以理解了以前在ASP.NET中讓人頭痛的默認(rèn)提交表單按鈕和設(shè)置焦點(diǎn)在ASP.NET 2.0已經(jīng)提供了,不用象以前那樣自己寫javascript來控制了
關(guān)于焦點(diǎn)在也可以代碼中通過 this.SetFocus()來設(shè)置了,看得出來ASP.NET2.0是設(shè)計(jì)是多么的細(xì)致。
Header
在代碼中可能通過
this.Header.Metadata.Add("taye", "value");
this.Header.Title = "value";
this.Header.LinkedStyleSheets.Add("style.css");
來控制Title,Meta,Style等[好象LinkedStyleSheets只能是text/css???]
this.Header.StyleSheet.RegisterStyle()
方法將一個(gè)style內(nèi)嵌到網(wǎng)頁中去.
這樣頁面幾乎所以部分都可以得到控制了
有些人也許會(huì)想那<html>和<body>呢
我們先來運(yùn)行一下面這個(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è)正常頁的有如下五個(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的控件的內(nèi)容分別為
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>
所以如果你要對(duì)body或<!DOCTYPE..>或<html>進(jìn)行控制那你就找到這相應(yīng)的控件以后再進(jìn)行相應(yīng)的修改吧。只要對(duì)
LiteralControl.Text進(jìn)行修改就可以.
--------------------------------------------------------------------------
?
從外部的js文件中獲取ASPX頁面的控件ClientID
?
?
前言
當(dāng)使用MasterPage、UserControl等容器時(shí),為了避免控件的重復(fù)命名,asp.net會(huì)自動(dòng)將容器中的控件生成一個(gè)ClientID(Control Tree中的可生成,否則不會(huì)生成)。
例如:ContentPlaceHolder1中的Button1默認(rèn)情況下會(huì)生“ctl00_ContentPlaceHolder1_Button1”的ClientID。我們?cè)赗ender出來的mark up中看到的也是這些ClientID。所以,當(dāng)我們使用JavaScript對(duì)控件元素進(jìn)行操作的時(shí)候,必須使用ClientID來對(duì)控件進(jìn)行查找。
?
Inline情況下的解決方案
如果JavaScript代碼寫在.aspx文件中時(shí),也就是Inline Script時(shí)。在頁面生成的時(shí)候,我們能夠通過綁定機(jī)制將控件的ClientID綁定到頁面Mark up中,故可使用:
-->document.getElementById("<%=Me.txtTest.ClientID %>" )
來獲取一個(gè)控件的真實(shí)引用,當(dāng)然,FindControl等方法也可以寫在<%=...%>中用來綁定服務(wù)端數(shù)據(jù)到客戶端。
?
external JS情況下的解決方案
然而,部分情況下,為了解耦,我們常常把JavaScript單獨(dú)寫在.js文件中,再引用到aspx文件中去。這種情況下,.js文件內(nèi)的代碼不能通過<%=...%>來進(jìn)行服務(wù)端數(shù)據(jù)的綁定,所以上面的方法是不能用的。
此時(shí)簡單點(diǎn)的解決方案就是直接在JavaScript中寫控件的ClientID,但這樣增加了JS文件和ASPX的耦合度,非常不推薦使用。
我常用的方法有兩種,在此拋磚引玉:
?
案例:
Default5.aspx是MasterPage.master 的內(nèi)容頁,本例中的主要文件。
JScript.js是一個(gè)外部的js文件,用來處理JavaScript操作。
Button1是Default5.aspx中的一個(gè)<ASP:Button>,用來顯示效果。
Button2是Default5.aspx中的一個(gè)<input type=button>,用來觸發(fā)JavaScript。
需求:點(diǎn)擊Button2,將Button1上的文本改成“from extended js”
?
方案一:使用內(nèi)聯(lián)JS訪問器
要想在外部JS中獲得ASPX動(dòng)態(tài)生成的ClientID,可以通過在ASPX頁面中添加訪問器的方式來實(shí)現(xiàn),類似OO語言中的屬性:
我們?cè)贒efault5.aspx中添加如下代碼:作用:①聲明getClientId訪問器,并注冊(cè)Button1的ClientID。②引用JScript.js文件
--><script type="text/javascript">
??? function getClientId()
??? {
???? var paraId1 = '<%= Button1.ClientID %>';
???? return {Id1:paraId1};
??? }
</script>
<script type="text/javascript" src="JScript.js"></script>
接下來,我們?cè)贘Script.js中,就可以這樣來實(shí)現(xiàn)需求:
-->function ChangeText()
{
??? var btn=document.getElementById(getClientId().Id1);
??? btn.value="from extended js";
}
getClientId().Id1 貌似很OO,而且還支持VS2008很蹩腳的JS智能提示,打上“.”之后就可以在提示中選擇Id1了。
如果有多個(gè)控件需要注冊(cè),只需將他們注冊(cè)到訪問器中即可,下面是一個(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" οnclick="ChangeText();" />
</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代碼,作為全局變量,來提供ClientID:
--><script type="text/javascript">
??? var globals = {};
??? globals.controlIdentities = {};
??? globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>';
??? globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>';
</script>
<script type="text/javascript" src="JScript.js"></script>
接下來,我們?cè)贘Script.js中,就可以這樣來實(shí)現(xiàn)需求:
-->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" οnclick="ChangeText();" />
</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";
}
結(jié)束語:
在上面兩種方法中,也沒有真正的實(shí)現(xiàn)aspx和js的完全解耦,所以,在js文件中,最好還是加上:
-->///<reference path="Default5.aspx"/>
上面的方法是我常用的,今天倉促的總結(jié)了一下,希望在此能夠拋磚引玉,謝謝!
?
--------------------------------------------------------------------------
?
ASP.Net中如何使用ClientID
?
ASP.Net 提供了代碼和頁面分離的機(jī)制,在大多數(shù)情況下,這種機(jī)制工作得非常好。但是,如果需要使用客戶端java腳本來做些工作,你就會(huì)遇到麻煩了。問題出在你在設(shè)計(jì)階段為server端控件設(shè)置的ID值和頁面運(yùn)行時(shí)控件實(shí)際的ID值不一致。例如,新建一個(gè)Web site,增加一個(gè) aspx page,在頁面上加入一個(gè)text box控件:
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>???
運(yùn)行這個(gè)頁面,從View source中會(huì)看到運(yùn)行時(shí)的結(jié)果:
<Input name="mytext" type="text" id="mytext" />
這時(shí)我們看到設(shè)計(jì)階段的ID值和運(yùn)行時(shí)控件的ID值是一樣的,沒有問題,這是因?yàn)檫@是一個(gè)單純的aspx頁面。如果在頁面中包含一個(gè)用戶自定義的web control或使用了master pages (ASP.NET 2.0),情況就不樂觀了。
我們?cè)黾右粋€(gè)新的user control名為mycontrol.ascx. 在mycontrol.ascx中加入同樣的text box。再把這個(gè)自定義控件加入到一個(gè)aspx 頁面, 將此控件的ID設(shè)置為myControl. 在瀏覽器中運(yùn)行這個(gè)頁面,得到的html是這樣的:
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的設(shè)計(jì)階段ID= mytext,但運(yùn)行時(shí)得到的ID=myControl_mytext。也就是在原來的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages時(shí),所有的aspx 頁面都是被包含在一個(gè)容器中的, 而且還常常會(huì)有容器的嵌套。如果在客戶端使用JavaScript去按照ID查找控件就會(huì)失敗。解決這個(gè)問題可以有多個(gè)方法。
最簡單的:
<script language="javascript" type ="text/javascript>
??????? var x=<% Response.Write("'"+myControl.ClientId+"';" ) %>
??????? function doSomething()
??????? {
??????? Var myControl=document.getElementById(x);
??????? }
</script>
這種方法對(duì)于一個(gè)兩個(gè)控件比較適用。不過由于必須在aspx頁面中設(shè)置,不能將javascript集中起來管理了。
那么,有沒有可以不進(jìn)行硬編碼的方法呢?本文提供了一種方法,可以使用ASP.Net現(xiàn)有技術(shù)實(shí)現(xiàn),并且適合所有的ASP.Net framework版本。
解決方案
關(guān)鍵是創(chuàng)建一個(gè)不會(huì)被服務(wù)器端修改的客戶端控件。在自定義控件上增加一個(gè)hidden input,將它設(shè)為literal server side control:
<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='<asp:Literal Runat=server ID=ctrlPrefix></asp:Literal>'>
還要注意,這個(gè)hidden input控件需要加入到控件容器里面。因?yàn)槲覀兒竺嬉盟鼇淼玫娇丶腎D。在后臺(tái)代碼中對(duì)Page_Load 事件加入如下處理:
string []elm =ctrlPrefix.ClientID.Split('_');??????????
ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");???
我們得到控件的client id,包含了控件的ID加上控件容器的ID作為前綴。第二行代碼將ctrlPrefix.ClientID的后面一段去掉,得到容器的ID前綴,返回值包含了_。編譯后運(yùn)行這個(gè)頁面,結(jié)果如下:
<input name="myControl:mytext" type="text" id="myControl_mytext" /><input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>
現(xiàn)在,hidden input中已經(jīng)保存了容器的ID前綴。下面,我們用JavaScript來利用hidden input處理控件查找。
增加一個(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è)方法用來查詢空間
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ì)注意到,這里調(diào)用了getCtrlPrefix來計(jì)算textbox控件的ClientID。 我們可以增加一個(gè)按鈕來調(diào)用這個(gè)方法:
<input type=button value="Read Value" οnclick="javascript:readValue('mytext')">
這個(gè)html button會(huì)調(diào)用readValue。最后,把這個(gè)javascript的js文件加入aspx中。
<script language="JavaScript" src="mycontrol.js"></script>
運(yùn)行這個(gè)頁面,在text box中輸入寫數(shù)據(jù),然后點(diǎn)擊按鈕,會(huì)出現(xiàn)一個(gè)消息對(duì)話框來顯示ID前綴以及text box中的數(shù)據(jù)。
本文來自CSDN博客,轉(zhuǎn)載請(qǐng)標(biāo)明出處:http://blog.csdn.net/jamestaosh/archive/2009/07/22/4370127.aspx
| I this post I will try to explain the difference between those three commonly used properties. Each property is described in a separate section. Attached you can find a sample web site as well as two screenshots visually depicting the difference between the ID, ClientID and UniqueID properties. ID UniqueID For example if a Label with ID="Label1" is defined in a user control with ID = "UserControl1" the UniqueID of the Label will be "UserControl1$Label1". Adding another instance of the same user control (with ID = "UserControl2") will make the UniqueID of its child label to be "UserControl2$Label1". The UniqueID property is also used to provide value for the HTML "name" attribute of input fields (checkboxes, dropdown lists, and hidden fields). UniqueID also plays major role in postbacks. The UniqueID property of a server control, which supports postbacks, provides data for the __EVENTTARGET hidden field. The ASP.NET Runtime then uses the __EVENTTARGET field to find the control which triggered the postback and then calls its RaisePostBackEvent method. Here is some code which illustrates the idea: IPostBackEventHandler postBackInitiator = Page.FindControl(Request.Form["__EVENTTARGET") As IPostBackEventHandler; if (postBackInitiator != null) You can use the UniqueID property to find any control no matter how deep it is nested in the control hierarchy. Just pass its value to the FindControl method of the Page. ClientID <asp:Label ID="Label1" Text="Label" /> will render as this: <span id="Label1">Label</span> That's why you often use the following JavaScript statement to access the DOM element corresponding to some ASP.NET server control: var label = document.getElementById("<%= Label1.ClientID%>"); which in turn renders as: var label = document.getElementById("Label1"); It is worth mentioning that the values of the ID, UniqueID and ClientID will be the same if the control is defined in the master page (or the page). This however can often lead to unexpected errors. If the ID of the control is hardcoded inside the JavaScript statement (e.g. "Label1") this code will only work provided the control is defined in the Page or master page. Moving the control and the JavaScript code into a userc control with ID "UserControl1" will fail at runtime because the control will now render as:
var control = $find("<%= MyControl1.ClientID %>"); |
轉(zhuǎn)載于:https://www.cnblogs.com/gossip/archive/2011/11/25/2262648.html
總結(jié)
以上是生活随笔為你收集整理的【转】 ID,ClientID和UniqueID的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 德才装饰股票代码
- 下一篇: word打印版面自动缩小的问题解决