ASP.NET 4.0的ID,ClientID,UniqueID及ClientIDMode属性篇

ASP.NET 4.0的ID,ClientID,UniqueID及ClientIDMode属性篇（ID,ClientID,UniqueID及ClientIDMode属性）

ID

^{ID是设计的时候自己所指定的ID,是我们分配给服务器控件的编程标识符，我们常常使用this.controlid来寻找控件，那么这个controlid就是这里所说的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" οnclick="GetValue();" value="赋值" />
</asp:Content>
页面显示了<SPAN style="COLOR: #0080c0"><STRONG>ctl00_ContentPlaceHolder1_TextBox1</STRONG></SPAN>。即TextBox1.ClientID =ctl00_ContentPlaceHolder1_TextBox1。 

UniquelD

UniqueID 服务器控件的唯一的、分层的形式限定的标识符。 是当需要参与服务端回传的时候用的。当将控件放置到重复控件（Repeater、DataList和DataGrid）中时，将可能生成多个服务器端的控件，这就需要区分服务器端的各个控件，以使它们的 ID 属性不冲突。UniqueID 通过将子控件的父控件的 UniqueID 值与控件的 ID 值连接生成，各个部分之间以 IdSeparator 属性指定的字符连接。默认情况下， IdSeparator 属性为冒号字符 (:)。此属性为在 .Net Framework2.0种新增加。 （UniqueID 的解释做了参照，本篇重点强调ID与ClientID

<%@ 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" οnclick="GetValue();" value="赋值" />
</asp:Content>
出错了，t=null,也就是找不到TextBox1，所以需要改成<SPAN style="COLOR: #0080c0"><STRONG>var t=document.getElementById('<%=TextBox1.ClientID%>');</STRONG></SPAN> 

ClientID

有时，不能为控件分配唯一的名称。例如，如果 Repeater 控件在它的某个模板中包含一个 Label 控件，则为Repeater 控件中的各个项呈现该Label 控件的一个实例。在呈现控件的多个实例时，为防止出现命名冲突，ASP.NET 为页上的各个服务器控件自动生成一个唯一的ClientID 值。ClientID 值是通过连接控件的 ID 值和它的父控件的 UniqueID 值生成的。如果未指定控件的ID 值，则使用自动生成的值。生成的 ID 的各个部分以下划线字符 (_) 分隔。

ClientIDMode

在ASP.NET 4.0中的每个控件上都多了一个叫做ClientIDMode的属性，这就是解决上面获取控件ID难的解决方案。这个属性有四个可选值，根据所选值的不同它可以控制页面上生成控件的ID格式。

 

下面就让我们来了解下ClientIDMode属性的四个值

AutoID

当控件的ClientIDMode选中为AutoID时，该控件的ClientID 值是通过串联每个祖先容器控件（诸如GridView、ListView、LoginView等就是容器性控件）的ID和父容器控件的ID和其本身的ID 值生成的，当然如果该控件没有在任何容器控件中其ClientID 值就是其本身的ID值，不会做任何更改。 另外如果该控件所在的父容器控件或祖先容器控件有些是显示多个数据行的容器控件（例如GridView、ListView就是显示多数据行的容器控件），那么还将在这些容器控件的ID值的后面会插入一个递增的行号格式。 各部分之间以下划线字符 (_) 分隔。 可见在 ASP.NET 4 之前的版本中使用的就是AutoID方案来生成控件的ClientID 值。

 

比如下面这个GridView里面就有一个名叫Label1的ID，我们将Label1的ClientIDMode设置为了AutoID

<span style="color:#000000;">Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><asp:GridView ID="grd_Account" runat="server" AllowPaging="True" 
    AutoGenerateColumns="False" 
    DataKeyNames="Account Number" DataSourceID="sds_account" Height="63px" 
    Width="676px" PageSize="5" ClientIDMode="AutoID" >
    <Columns>
        <asp:TemplateField HeaderText="Account Number" SortExpression="Account Number">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("[Account Number]") %>' ClientIDMode="AutoID"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
HTML：
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><table cellspacing="0" rules="all" border="1" id="grd_Account" style="height:63px;width:676px;border-collapse:collapse;">
    <tr>
        <th scope="col">Account Number</th>
    </tr>
        <tr>
    <td>
            <span id="grd_Account_ctl02_Label1">1060</span>
        </td>
    </tr>
        <tr>
    <td>
            <span id="grd_Account_ctl03_Label1">1200</span>
        </td>
    </tr>
        <tr>
    <td>
            <span id="grd_Account_ctl04_Label1">1510</span>
        </td>
    </tr>
</table></span>

Static

当控件的ClientIDMode选中为Static时，该控件的ClientID 值就是其本身设置的 ID 属性值，其ClientID值不会受到父容器控件的影响。

比如我们把上面的代码稍作修改，将Label1的ClientIDMode属性改为Static：

<span style="color:#000000;"><asp:GridView ID="grd_Account" runat="server" AllowPaging="True" 
    AutoGenerateColumns="False" 
    DataKeyNames="Account Number" DataSourceID="sds_account" Height="63px" 
    Width="676px" PageSize="5"  >
    <Columns>
        <asp:TemplateField HeaderText="Account Number" SortExpression="Account Number">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("[Account Number]") %>' ClientIDMode="Static"></asp:Label>
            </ItemTemplate>               
        </asp:TemplateField>
    </Columns>
</asp:GridView>
HTML：
<table cellspacing="0" rules="all" border="1" id="grd_Account" style="height:63px;width:676px;border-collapse:collapse;">
    <tr>
        <th scope="col">Account Number</th>
    </tr><tr>
        <td>
            <span id="Label1">1060</span>
        </td>
    </tr><tr>
        <td>
            <span id="Label1">1200</span>
        </td>
    </tr><tr>
        <td>
            <span id="Label1">1510</span>
        </td>
    </tr>
</table></span>

Inherit

这个属性其实没什么好说的，如果控件的ClientIDMode选中为Inherit，那么表示该控件的ClientIDMode会使用父级容器控件的ClientIDMode值，如果父级容器控件的ClientIDMode也为Inherit，那么会使用更上层容器控件的ClientIDMode值，直到回溯到页面的ClientIDMode值为止，页面的ClientIDMode值默认为Predictable ，你可以在页面上的<%@ Page%>指令中对该值做更改。此外Inherit也是ASP.NET 4.0中所有控件的ClientIDMode属性的默认值。

 

Predictable

首先我先说明下之所以最后写Predictable，是因为我发现控件的ClientIDMode为Predictable时生成ClientID的机制会非常复杂，要分好几个部分分别进行讨论，其中还有特殊情况，所以我在这里只能说尽量将我发现的Predictable生成ClientID的机制阐述清楚。

 

当控件的ClientIDMode选中为Predictable时，该控件的ClientID 值是通过串联父容器控件（诸如GridView、ListView、LoginView等就是容器性控件）的 ClientID 值生成的。另外如果该控件是在显示多个数据行的父容器控件或祖先容器控件中（例如GridView、ListView就是显示多数据行的容器控件），则还会在该控件ClientID 值的末尾添加 ClientIDRowSuffix 属性中指定的数据字段的值。 对于 GridView 控件，ClientIDRowSuffix 属性可以指定多个数据字段。 如果 ClientIDRowSuffix 属性为空白，则在末尾添加递增的行号，而非数据字段值。 各部分之间以下划线字符 (_) 分隔。

 

以上是MSDN的说法，但是经过试验，我发现Predictable的特性更应该是用这么个式子来表达

Inherit[+"_"+ClientIDRowSuffix]

意思就是说，如果一个控件的ClientIDMode选中为Predictable，那么在ASP.NET生成该控件的ClientID时首先会去看该控件所属的父容器控件的ClientIDMode是什么值，然后先用该控件父容器控件的ClientIDMode规则生成该控件本身的ClientID，最后如果该控件所属的父容器控件或祖先容器控件是显示多个数据行的容器控件，还会根据父容器控件或祖先容器控件的ClientIDRowSuffix属性的值在该控件已生成的ClientID后面加上一个后缀字符串。