An Examination of ClientIDMode in ASP.NET4

If you are intrested to know What is ClientIDMode and how to set read my previous article on it.

Practical Approach

I have created a web project and placed the following code in the webform

<asp:Panel ID="pnl" runat="server" ClientIDMode="Static">
             <asp:GridView runat="server" ID="gvEmp" AutoGenerateColumns="False" ClientIDMode="Predictable"
            ClientIDRowSuffix="EMPID">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Employee ID
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="Label2" Text='<%# Bind("EmpID") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Employee Name
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="Label1" ClientIDMode="AutoID" Text='<%# Bind("Name") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </asp:Panel>

I have created Employee class that has Employee Name and Employee ID as parameters.

 
public class Employee
    {
        public String EmpID
        {
            get;
            set;
        }
        public String Name
        {
            get;
            set;

        }
    }

I have created a method called GetEmplyees() and called this method in code behind of webform. I am binding grid that has EmployeeName and EmployeeID as Grid Columns. Here employee is generic List Data Type.

 protected void GetEmployees()
        {
            List Employees =
  new List
                 {
                     new Employee{ Name = "Hima", EmpID = "101" },
                     new Employee{ Name = "Jacob", EmpID = "102" },
                     new Employee{ Name = "Vamshi", EmpID = "103" },
                     new Employee{ Name = "Vijay", EmpID = "104" },
                     new Employee{ Name = "Pinal", EmpID = "105" },
                     new Employee{ Name = "Shiva", EmpID = "106" },
                     new Employee{ Name = "Sukanya", EmpID = "107" },
                     new Employee{ Name = "Ram", EmpID = "108" },
                     new Employee{ Name = "Leela", EmpID = "109" }
                 };
            gvEmp.DataSource = Employees;
            gvEmp.DataBind();
        }

Build the solution and run the project ,we can see the gridview binds the Name and EMPID Columns as below.

How ClientIDMode works

<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
        <tr>
            <th scope="col">
                Employee Name
            </th>
            <th scope="col">
                Employee ID
            </th>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl02_Label1">Hima</span>
            </td>
            <td>
                <span id="gvEmp_Label2_101">101</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl03_Label1">Jacob</span>
            </td>
            <td>
                <span id="gvEmp_Label2_102">102</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl04_Label1">Vamshi</span>
            </td>
            <td>
                <span id="gvEmp_Label2_103">103</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl05_Label1">Vijay</span>
            </td>
            <td>
                <span id="gvEmp_Label2_104">104</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl06_Label1">Pinal</span>
            </td>
            <td>
                <span id="gvEmp_Label2_105">105</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl07_Label1">Shiva</span>
            </td>
            <td>
                <span id="gvEmp_Label2_106">106</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl08_Label1">Sukanya</span>
            </td>
            <td>
                <span id="gvEmp_Label2_107">107</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl09_Label1">Ram</span>
            </td>
            <td>
                <span id="gvEmp_Label2_108">108</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="gvEmp_ctl10_Label1">Leela</span>
            </td>
            <td>
                <span id="gvEmp_Label2_109">109</span>
            </td>
        </tr>
    </table>

When you examine the above code for the first label I have sepecifed Auto as ClientIDMode, hence lLabel1 Id name has assigned automatically incerementing by one for each row as gvEmp_ctXXX_Label1. For the second label when nothing is assinged , it will take the defualt value as inherited and its ClientIDMode gets inherited from the parent control. Hence the ClientIDMode is taken as predictiable and it gets predicted at runtime as gvEmp_Label2_XXX Now I have changed the code as

 
<!--ASP.NET 4 ClientIDMode property assigned as Static and AutoID and clientIdRowSuffix is not set.-->
        <asp:gridview id="gvEmp" runat="server" autogeneratecolumns="False">
            <columns>
                <asp:templatefield>
                    <headertemplate>
                        Employee Name
                    </headertemplate>
                    <itemtemplate>
                        <asp:label id="Label1" clientidmode="Static" runat="server" text="&lt;%# Bind(&quot;Name&quot;) %&gt;" />
                    </itemtemplate>
                </asp:templatefield>
                <asp:templatefield>
                    <headertemplate>
                        Employee ID
                    </headertemplate>
                    <itemtemplate>
                        <asp:label id="Label2" clientidmode="AutoID" runat="server" text="&lt;%# Bind(&quot;EmpID&quot;) %&gt;" />
                    </itemtemplate>
                </asp:templatefield>
            </columns>
        </asp:gridview>
    </asp:panel>
       

The browser renders as follows.

Employee Name 
Employee ID 
Hima 
101 
Jacob 
102 
Vamshi 
103 
Vijay 
104 
Pinal 
105 
Shiva 
106 
Sukanya 
107 
Ram 
108 
Leela 
109 

Please note that when ClientIDMode as static is given the ID is rendered as Label1 always. For the second label I have specified it as AutoID with clientIdRowSuffix property not set, and it is rendered as gvEmp_ctxx_Label2

If you like this article,  Subscribe in a reader or Subscribe by Email. Show your support by sharing this article with your friends through the services given below.

Share

Comments