ClientIDMode in CheckBox

Question

What is use of ClientIDMode attribute in asp:CheckBox control? I found the values AutoID, Inherit, Predictable, and Static for that.

Mainly I am looking for how it is rendered in HTML? Can anyone explain about the attribute and the values?

Answer 1

It is how MS calculates ID of a .net control name itself. MSDN

Since ASP.net pages are put together on a server and sent to the client MS Will name the ids, based off of a variable amount of conditions, are they in a master page , are they in a user controller, a repeater, and so on.

Since you cannot have duplicate ids what do you do with a .net control that is put inside of a repeater? You need to have a naming algorithm for it. Some people foolishly use the rendered ID (ct100_*) instead of using getElementID to manipulate the element through javascript. I dont know why they exposed these algorithms instead of just saying everything is going to be 1 algorithm. Maybe someone has the answer to why they exposed the different algorithms.

Answer 2

Example of id generation:

Web form:

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        lstMain.DataSource = new string[] { "a", "b" };
        lstMain.DataBind();
    }
</script>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ListView ID="lstMain" runat="server">
        <ItemTemplate>
            <asp:CheckBox ID="chkFour" runat="server" ClientIDMode="AutoID" />
            <asp:CheckBox ID="chkFive" runat="server" ClientIDMode="Predictable" />
            <asp:CheckBox ID="chkSix" runat="server" ClientIDMode="Static" />
        </ItemTemplate>
    </asp:ListView>
</asp:Content>

Result:

        <input id="ctl00_ContentPlaceHolder1_lstMain_ctrl0_chkFour" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl0$chkFour" />
        <input id="ctl00_ContentPlaceHolder1_lstMain_ctrl0_chkFive_0" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl0$chkFive" />
        <input id="chkSix" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl0$chkSix" />

        <input id="ctl00_ContentPlaceHolder1_lstMain_ctrl1_chkFour" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl1$chkFour" />
        <input id="ctl00_ContentPlaceHolder1_lstMain_ctrl1_chkFive_1" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl1$chkFive" />
        <input id="chkSix" type="checkbox" name="ctl00$ContentPlaceHolder1$lstMain$ctrl1$chkSix" />

Pass id to JS:

<script type="text/javascript">
    var autoId = '<%=someControl.ClientID%>';
    var predictableId = '<%=someControl.ClientID%>';
    var staticId = 'someControl';
</script>