ClientID Mode:
Client ID mode property
can be used ID generate using Master page. While master page using content
place holder used a controls the generate id is different so some confusing
.The can used ClientID mode.
We can set ClientIDmode
three ways the below following:
1. Application Level
2. PageLevel
3. Control Level
Application Level
We can use web.config file
to set <System.Web> inside.
Example
<pages clientIDMode="Predictable"></pages>
PageLevel:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WINDOWS8._Default" ClientIDMode="AutoID"%>
Control Level
<asp:Button ID="btn_Add" runat="server” Text="ClickME" ClientIDMode="AutoID" />
ClientIDMode=" Static/AutoID/Inherit/Predictable/”
Static:
<asp: Button ID="btn_Add" runat="server Text="ClickMe" ClientIDMode="Static
"/>
OUTPUT:
<input type="submit" name="ctl00$MainContent$btn_Add" value="ClickME" id="btn_Add" />
AutoID:
<asp:Button ID="btn_Add" runat="server” Text="ClickME" ClientIDMode="AutoID"/>
OUTPUT:
<input type="submit" name="ctl00$MainContent$btn_Add" value="ClickME" id="ctl00_MainContent_btn_Add" />
Inherit:
<asp:Button ID="btn_Add" runat="server" Text="ClickME" ClientIDMode="Inherit"/>
Output:
<input type="submit" name="ctl00$MainContent$btn_Add" value="ClickME" id="MainContent_btn_Add" />
Predictable:
Predictable is the important mode of the Client ID Mode and it is mainly
used for controls that are in data-bound controls.We can generate the ClientID
value by concatenating the ClientID value of the parent naming container with
the ID value of the current control.ClientIDRowSuffix
is a property of the control which can be added at the end of a databound
control that generates the multiple rows.Best example is the GridView Control
where multiple data fileds can be specified and if the ClientIDRowSuffix property is blank
then it will automatically add a sequential number at the end of the databound
control id.This number begins at zero and is incremented by 1 for each row and
each segment is separated by an underscore character (_).
Given below examples demonstrate how the
databound control id renders in both the case(without ClientIDRowSuffix
and with ClientIDRowSuffix )
<asp:GridView ID="Maxmun" runat="server"
AutoGenerateColumns="false" ClientIDMode="Predictable" >
<Columns>
<asp:TemplateField
HeaderText="ID">
<ItemTemplate>
<asp:Label
ID="lblID" runat="server" Text='<%# Eval("ID")
%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField
HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName"
runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField
HeaderText="Company Name">
<ItemTemplate>
<asp:Label ID="lblOrganisation" runat="server"
Text='<%# Eval("CompName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Note: ClientIDRowSuffix is blank by default
in the above gridview declaration and just follow the given below syntax
for adding the ClientIDRowSuffix in the gridview declaration
<asp:GridView ID="Maxmun" runat="server"
AutoGenerateColumns="false"
ClientIDMode="Predictable" ClientIDRowSuffix="ID" >
Output without ClientIDRowSuffix
<table id="Maxmun" style="border-collapse:
collapse" cellspacing="0" rules="all"
border="1">
<tbody>
<tr>
<th
scope="col">ID</th>
<th
scope="col">Name</th>
<th
scope="col">Company Name</th>
</tr>
<tr>
<td><span id="Maxmun_lblID_0">001</span></td>
<td><span id="Maxmun_lblName_0">Srikanta</span></td>
<td><span id="Maxmun_lblOrganisation_0">Coimbatore</span></td>
</tr>
<tr>
<td><span id="Maxmun_lblID_1">007</span></td>
<td><span id="Maxmun_lblName_1">Kaushik</span></td>
<td><span id="Maxmun_lblOrganisation_1">Coimbatore</span></td>
</tr>
.........
.........
</tbody>
</table>
Output with ClientIDRowSuffix
<table id="Maxmun" style="border-collapse:
collapse" cellspacing="0" rules="all"
border="1">
<tbody>
<tr>
<th
scope="col">ID</th>
<th
scope="col">Name</th>
<th
scope="col">Company Name</th>
</tr>
<tr>
<td><span id="Maxmun_lblID_001">001</span></td>
<td><span id="Maxmun_lblName_001">Srikanta</span></td>
<td><span id="Maxmun_lblOrganisation_001">Coimbatore</span></td>
</tr>
<tr>
<td><span id="Maxmun_lblID_007">007</span></td>
<td><span id="Maxmun_lblName_007">Kaushik</span></td>
<td><span id="Maxmun_lblOrganisation_007">Coimbatore</span></td>
</tr>
......
</tbody>
</table>