ClientID Mode in asp.net

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>

Browse More Articles

Tweet

Written by Test

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.