在传统ASP.NET WebForm开发中，控件的客户端可以说是ASP.NET最为开发者诟病的地方之一。客户端ID是由ASP.NET框架自动生成，为了保证控件的ID唯一，经常我们能够看到类似于这种形式的字符串：ctl00_MasterPageBody_ctl01_Textbox1，该值直到运行时才能够确定，然而开发过程中，经常需要在脚本时使用控件的客户端ID，所以不得已只能使用ClientID属性，如下示例代码：

<script type="text/javascript">
    function DoSomething() {
        alert('<%= Control.ClientID %>');
    }
</script>

这种方式虽然不失为一种优雅的解决方案，但是我们更希望能够完全控制客户端ID。现在在ASP.NET 4.0中对于控件增加了ClientIDMode属性，它可以允许我们更加方便的控制控件客户端ID。ClientIDMode属性有如下四个值：

Legacy：ClientIDMode的默认值，使用该值控件的客户端ID将会与ASP.NET 2.0、ASP.NET 3.5中一致。

Inherit：继承于父控件的ClientIDMode属性值。

Static：如果设置为Static值，最终产生的控件ID将保持我们原有的值，ASP.NET框架不再修改以确保ID唯一，而完全由开发者负责。

Predictable：如果设置为Predictable值，最终产生的控件ID我们是可以预测的，尤其在数据绑定控件中，它将会使用父控件ID及自身ID，再加上我们设置的ClientIDRowSuffix属性值而生成客户端ID。

1. 设置ClientIDMode属性值为Legacy：

<asp:TextBox ID="txtName" runat="server" ClientIDMode="Legacy"></asp:TextBox>

最终输出：

<input name="ctl00$BodyHolder$txtName" type="text" id="ctl00_BodyHolder_txtName" />

可以看到最终的输出仍然是原来的方式。

2. 设置ClientIDMode属性值为Inherit：

<asp:TextBox ID="txtName" runat="server" ClientIDMode="Inherit"></asp:TextBox>

最终输出：

<input name="ctl00$BodyHolder$txtName" type="text" id="ctl00_BodyHolder_txtName" />

可以看到仍然为原来的方式，因为我们并没有其父控件的ClientIDMode，所以仍然采用Legacy模式。

3. 设置ClientIDMode属性值为Static：

<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"/>

最终输出：

<input name="ctl00$BodyHolder$txtName" type="text" id="txtName" />

可以看到，此时输出的input元素id属性为我们在服务端定义的服务器控件ID，这种输出模式完全的静态的，可以自由的进行控制。

4. 设置ClientIDMode属性值为Predictable：

<asp:GridView ID="GridEmployee" runat="server" AutoGenerateColumns="false" 
              ClientIDMode="Predictable">
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="EmployeeID" runat="server" Text='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="EmployeeName" runat="server" Text='<%# Eval("Name") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

此时的输出为：

<table cellspacing="0" rules="all" border="1" id="GridEmployee">
    <tr>
        <th scope="col">ID</th><th scope="col">Name</th>
    </tr><tr>
        <td>
                <span id="GridEmployee_EmployeeID_0">1</span>
            </td><td>
                <span id="GridEmployee_EmployeeName_0">TerryLee</span>
            </td>
    </tr>
    <tr>
        <td>
                <span id="GridEmployee_EmployeeID_1">2</span>
            </td><td>
                <span id="GridEmployee_EmployeeName_1">Li Huijun</span>
            </td>
    </tr>
</table>

这里我们没有设置ClientIDRowSuffix属性，可以看到最终生成的控件ID是由父控件ID加上子控件的ID，再加上索引而成，下面的代码中我们设置ClientIDRowSuffix属性为ID，即后缀为指定的ID：

<asp:GridView ID="GridEmployee" runat="server" AutoGenerateColumns="false" 
              ClientIDMode="Predictable" ClientIDRowSuffix="ID">
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="EmployeeID" runat="server" Text='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="EmployeeName" runat="server" Text='<%# Eval("Name") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

最终的输出为：

<table cellspacing="0" rules="all" border="1" id="GridEmployee">
    <tr>
        <th scope="col">ID</th><th scope="col">Name</th>
    </tr><tr>
        <td>
                <span id="GridEmployee_EmployeeID_1">1</span>
            </td><td>
                <span id="GridEmployee_EmployeeName_1">TerryLee</span>
            </td>
    </tr>
    <tr>
        <td>
                <span id="GridEmployee_EmployeeID_2">2</span>
            </td><td>
                <span id="GridEmployee_EmployeeName_2">Li Huijun</span>
            </td>
    </tr>
</table>

本文简单介绍了ASP.NET 4.0中关于控件客户端ID的控制，该项功能也算是ASP.NET 4.0中为数不多的亮点之一。