ASP.Net 提供了代碼和頁面分離的機制，在大多數情況下，這種機制工作得非常好。但是，如果需要使用客戶端java腳本來做些工作，你就會遇到麻煩了。問題出在你在設計階段為server端控件設置的ID值和頁面運行時控件實際的ID值不一致。例如，新建一個Web site,增加一個 aspx page,在頁面上加入一個text box控件：

<asp:TextBox ID="mytext" Runat=server></asp:TextBox>

運行這個頁面，從View source中會看到運行時的結果：

<Input name="mytext" type="text" id="mytext" />

這時我們看到設計階段的ID值和運行時控件的ID值是一樣的，沒有問題，這是因為這是一個單純的aspx頁面。如果在頁面中包含一個用戶自定義的web control或使用了master pages (ASP.NET 2.0)，情況就不樂觀了。我們增加一個新的user control名為mycontrol.ascx. 在mycontrol.ascx中加入同樣的text box。再把這個自定義控件加入到一個aspx 頁面，將此控件的ID設置為myControl. 在瀏覽器中運行這個頁面，得到的html是這樣的：

<Input name="myControl:mytext" type="text" id="myControl_mytext" />

text box控件的設計階段ID= mytext，但運行時得到的ID=myControl_mytext。也就是在原來的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages時，所有的aspx 頁面都是被包含在一個容器中的，而且還常常會有容器的嵌套。如果在客戶端使用JavaScript去按照ID查找控件就會失敗。解決這個問題可以有多個方法。

最簡單的：

<script language="javascript" type ="text/javascript>
var x=<% Response.Write("'"+myControl.ClientId+"';" ) %>
function doSomething()
{
Var myControl=document.getElementById(x);
}
</script>

這種方法對于一個兩個控件比較適用。不過由于必須在aspx頁面中設置，不能將javascript集中起來管理了。

那么，有沒有可以不進行硬編碼的方法呢?本文提供了一種方法，可以使用ASP.Net現有技術實現，并且適合所有的ASP.Net framework版本。

解決方案

關鍵是創建一個不會被服務器端修改的客戶端控件。在自定義控件上增加一個hidden input，將它設為literal server side control：

<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='<asp:Literal Runat=server ID=ctrlPrefix></asp:Literal>'>

還要注意，這個hidden input控件需要加入到控件容器里面。因為我們后面要用它來得到控件的ID。在后臺代碼中對Page_Load 事件加入如下處理：

string []elm =ctrlPrefix.ClientID.Split('_'); ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");

我們得到控件的client id，包含了控件的ID加上控件容器的ID作為前綴。第二行代碼將ctrlPrefix.ClientID的后面一段去掉，得到容器的ID前綴，返回值包含了_。編譯后運行這個頁面，結果如下：

<input name="myControl:mytext" type="text" id="myControl_mytext" /> <input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>

現在，hidden input中已經保存了容器的ID前綴。下面，我們用JavaScript來利用hidden input處理控件查找。

增加一個新的方法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;
}

這個方法得到hidden input的值并返回，這樣我們就得到了ID的前綴。第二個方法用來查詢空間

function readValue(ctrlName) { var prefix = getCrtlPrefix(); var objCrtl = document.getElementById(prefix + ctrlName); if (objCrtl) alert ( "Prefix: " + prefix + " - value: " + objCrtl.value); else alert("not found!"); }

這個方法顯示textbox控件的值。你會注意到，這里調用了getCtrlPrefix來計算textbox控件的ClientID。我們可以增加一個按鈕來調用這個方法：

<input type=button value="Read Value" onclick="javascript:readValue('mytext')">

這個html button會調用readValue。最后，把這個javascript的js文件加入aspx中。

<script language="JavaScript" src="mycontrol.js"></script>

運行這個頁面，在text box中輸入寫數據，然后點擊按鈕，會出現一個消息對話框來顯示ID前綴以及text box中的數據

總結

以上是生活随笔為你收集整理的使用ClientID的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。