Practical Approach I have created a web project and placed the following code in the webform
01."pnl" runat="server" ClientIDMode="Static">02. "server" ID="gvEmp" AutoGenerateColumns="False" ClientIDMode="Predictable"03. ClientIDRowSuffix="EMPID">
04.
06.
07. Employee ID
08.
09.
10. "server" ID="Label2" Text='<%# Bind("EmpID") %>' />11.
12.
14.
15. Employee Name
16.
17.
18. "server" ID="Label1" ClientIDMode="AutoID" Text='<%# Bind("Name") %>' />19.
20.
21.
22.
23.
I have created Employee class that has Employee Name and Employee ID as parameters.
01.public class Employee
02. {
03. public String EmpID
04. {
05. get;
06. set;
07. }
08. public String Name
09. {
10. get;
11. set;
12.
13. }
14. }
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.
01.protected void GetEmployees()
02. {
03. List Employees =
04. new List
05. {
06. new Employee{ Name = "Hima", EmpID = "101" },
07. new Employee{ Name = "Jacob", EmpID = "102" },
08. new Employee{ Name = "Vamshi", EmpID = "103" },
09. new Employee{ Name = "Vijay", EmpID = "104" },
10. new Employee{ Name = "Pinal", EmpID = "105" },
11. new Employee{ Name = "Shiva", EmpID = "106" },
12. new Employee{ Name = "Sukanya", EmpID = "107" },
13. new Employee{ Name = "Ram", EmpID = "108" },
14. new Employee{ Name = "Leela", EmpID = "109" }
15. };
16. gvEmp.DataSource = Employees;
17. gvEmp.DataBind();
18. }
Build the solution and run the project ,we can see the gridview binds the Name and EMPID Columns as below.
How ClientIDMode works
01.<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
02. <tr>
03. <th scope="col">
04. Employee Name
05. th>
06. <th scope="col">
07. Employee ID
08. th>
09. tr>
10. <tr>
11. <td>
12. <span id="gvEmp_ctl02_Label1">Himaspan>
13. td>
14. <td>
15. <span id="gvEmp_Label2_101">101span>
16. td>
17. tr>
18. <tr>
19. <td>
20. <span id="gvEmp_ctl03_Label1">Jacobspan>
21. td>
22. <td>
23. <span id="gvEmp_Label2_102">102span>
24. td>
25. tr>
26. <tr>
27. <td>
28. <span id="gvEmp_ctl04_Label1">Vamshispan>
29. td>
30. <td>
31. <span id="gvEmp_Label2_103">103span>
32. td>
33. tr>
34. <tr>
35. <td>
36. <span id="gvEmp_ctl05_Label1">Vijayspan>
37. td>
38. <td>
39. <span id="gvEmp_Label2_104">104span>
40. td>
41. tr>
42. <tr>
43. <td>
44. <span id="gvEmp_ctl06_Label1">Pinalspan>
45. td>
46. <td>
47. <span id="gvEmp_Label2_105">105span>
48. td>
49. tr>
50. <tr>
51. <td>
52. <span id="gvEmp_ctl07_Label1">Shivaspan>
53. td>
54. <td>
55. <span id="gvEmp_Label2_106">106span>
56. td>
57. tr>
58. <tr>
59. <td>
60. <span id="gvEmp_ctl08_Label1">Sukanyaspan>
61. td>
62. <td>
63. <span id="gvEmp_Label2_107">107span>
64. td>
65. tr>
66. <tr>
67. <td>
68. <span id="gvEmp_ctl09_Label1">Ramspan>
69. td>
70. <td>
71. <span id="gvEmp_Label2_108">108span>
72. td>
73. tr>
74. <tr>
75. <td>
76. <span id="gvEmp_ctl10_Label1">Leelaspan>
77. td>
78. <td>
79. <span id="gvEmp_Label2_109">109span>
80. td>
81. tr>
82. 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
01.
02. "gvEmp" runat="server" autogeneratecolumns="False">03.
05.
06. Employee Name
07.
08.
09. "Label1" clientidmode="Static" runat="server" text="<%# Bind("Name") %>" />10.
11.
13.
14. Employee ID
15.
16.
17. "Label2" clientidmode="AutoID" runat="server" text="<%# Bind("EmpID") %>" />18.
19.
20.
21.
22.
The browser renders as follows.
1.<table id="Table1" style="border-collapse: collapse;" rules="all" border="1" cellspacing="0"><tbody><tr><th scope="col">Employee Name th><th scope="col">Employee ID th>tr><tr><td><span id="Label1">Himaspan> td><td><span id="gvEmp_ctl02_Label2">101span> td>tr><tr><td><span id="Label1">Jacobspan> td><td><span id="gvEmp_ctl03_Label2">102span> td>tr><tr><td><span id="Label1">Vamshispan> td><td><span id="gvEmp_ctl04_Label2">103span> td>tr><tr><td><span id="Label1">Vijayspan> td><td><span id="gvEmp_ctl05_Label2">104span> td>tr><tr><td><span id="Label1">Pinalspan> td><td><span id="gvEmp_ctl06_Label2">105span> td>tr><tr><td><span id="Label1">Shivaspan> td><td><span id="gvEmp_ctl07_Label2">106span> td>tr><tr><td><span id="Label1">Sukanyaspan> td><td><span id="gvEmp_ctl08_Label2">107span> td>tr><tr><td><span id="Label1">Ramspan> td><td><span id="gvEmp_ctl09_Label2">108span> td>tr><tr><td><span id="Label1">Leelaspan> td><td><span id="gvEmp_ctl10_Label2">109span> td>tr>tbody>table>
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
No comments:
Post a Comment