【转】ASP.NET4.0的ClientIDMode属性

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在ASP.NET 4.0之前我们总是要为控件的ClientID头疼，比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后，在页面上改Label的ID就变成了诸如grd_clt02_lblName的一长串字符串，如果我们在前台想在使用JS的时候找到该Label，我们不得不用到C#脚本来获得该Label在前台的确切ID，诸如：

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

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

1，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：

<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>

该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="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>

可以看到GirdView里面的Label形成了诸如grd_Account_ctl02_Label1格式的ClientID，而这正是：父容器ID（grd_Account）+"_"+行号格式(ctl02)+"_"+控件自身ID（ClientID）这种格式生成的。

2，Static:

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

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

<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>

看到了吗，GridView里每行的Label1的ClientID都以自身ID的值出现了，不会受到父级容器控件的ID影响，这样在前台使用JS时我们就能通控件本身的ID值找到我们想要的控件了。

此外使用Static后势必页面中会出现很多同名的控件ID，只要这些同名ID的控件处于页面的不同层次（比如某一容器控件的内部和外部就是不同层次）上那么就不会出现问题，但是如果页面同一层次上有多个同ID的控件，那么页面就会报错。

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

4，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后面加上一个后缀字符串。

下面将几种情况逐一列出来单独解释：

<1>如果父容器控件的ClientIDMode值为AutoID

如果父容器控件或祖先容器控件为显示多个数据行的容器控件，那么该控件的ClientID格式为：[父/祖先容器控件的ID+"_"+[行号格式+"_"]]+该控件自身ID+"_"+[ClientIDRowSuffix],其中ClientIDRowSuffix部分是什么后面会单独说明，其中：[父/祖先容器控件的ID+"_"+[行号格式+"_"]]，就是该控件自身ClientIDMode值继承父容器控件ClientIDMode值AutoID生成的ClientID结果，其中的[行号格式+"_"]部分是否存在依赖于[父/祖先容器控件]部分是否是显示多个数据行的容器控件(这里不明白请看前面的AutoID部分)。
如果父容器控件或祖先容器控件都不是显示多个数据行的容器控件，那么该控件的ClientID格式为：[父/祖先容器控件的ID+"_"]+该控件自身ID，可见这个格式就是该控件自身ClientIDMode值继承父容器控件ClientIDMode值AutoID生成的ClientID结果(这里不明白请看前面的AutoID部分)。

下面我就举一个父容器控件是多数据行容器控件且其ClientIDMode为AutoID的例子,将上面的代码再做更改，将Label1的ClientIDMode属性值改为Predictable，并且设置其父容器控件grd_Account的ClientIDMode为AutoID:

<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="Logged" ClientIDMode="Predictable"></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="grd_Account_ctl02_Label1_0">Logged</span>
        </td>
    </tr>
    <tr>
    <td>
            <span id="grd_Account_ctl03_Label1_1">Logged</span>
        </td>
    </tr>
    <tr>
    <td>
            <span id="grd_Account_ctl04_Label1_2">Logged</span>
        </td>
    </tr>
</table>

可以看到生成的Label的控件的ID诸如：grd_Account_ctl02_Label1_0正是上面所述格式：父容器控件的ID(grd_Account)+"_"+行号格式(ctl02)+"_"+该控件自身ID(Label1)+"_"+[ClientIDRowSuffix](0)。

<2>如果父容器控件的ClientIDMode值为Static

如果父容器控件或祖先容器控件为显示多个数据行的容器控件，那么该控件的ClientID格式为：该控件自身ID+"_"+[ClientIDRowSuffix],其中ClientIDRowSuffix部分是什么后面会单独说明，其中：该控件自身ID，就是该控件自身ClientIDMode值继承父容器控件ClientIDMode值Static生成的ClientID结果(这里不明白请看前面的Static部分)。
如果父容器控件或祖先容器控件都不是显示多个数据行的容器控件，那么该控件的ClientID格式为：该控件自身ID，可见这个格式就是该控件自身ClientIDMode值继承父容器控件ClientIDMode值Static生成的ClientID结果(这里不明白请看前面的Static部分)。

下面我就举一个父容器控件是多数据行容器控件且其ClientIDMode为Static的例子,将上面的代码再做更改，将Label1的ClientIDMode属性值改为Predictable，并且设置其父容器控件grd_Account的ClientIDMode为Static:

<asp:GridView ID="grd_Account" runat="server" AllowPaging="True"
    AutoGenerateColumns="False"
    DataKeyNames="Account Number" DataSourceID="sds_account" Height="63px"
    Width="676px" PageSize="5" ClientIDMode="Static" >
    <Columns>
        <asp:TemplateField HeaderText="Account Number" SortExpression="Account Number">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text