Entre as novidades do ASP.NET 4.0 está o ClientIDMode, que é uma propriedade que altera a forma com que o ClientID do controle é renderizado na página, trazendo duas novas formas de escrever os id’s na página.

Essa propriedade tona mais fácil o uso de client script para manipular elementos html’s que são renderizados por controles ASP.NET.

O ClientIDMode pode ser configurado de três formas diferentes, alterando a maneira de como o ClientID é renderizado na página:

• AutoID, opção default da propriedade (caso a propriedade ClientIDMode não seja escolhida, essa será a utilizada), renderiza na página id’s como nas versõs anteriores do ASP.NET.
• StaticID, usa o ID como ele é escrito, ou seja o ClientID será igual o ID do controle.
• Predictable, deve ser utilizado em controles de dados, como o ListView, ele concatena os ID’s dos containers em que o controle se encontra, com o id do próprio controle junto de um número sequencial. Esse número sequencial pode ser controlado pelo ASP.NET, ao utilizar uma propriedade chamada ClientIDRowSuffix que altera esse sufixo para um valor vindo da coleção de dados.

Exemplos:

C# (carregando ListView)

Pessoa p1 = new Pessoa() { Nome = "Rodolfo", Codigo = 30 };
Pessoa p2 = new Pessoa() { Nome = "Fadino", Codigo = 35 };
Pessoa p3 = new Pessoa() { Nome = "Junior", Codigo = 40 };
List<Pessoa> pessoas = new List<Pessoa>();
pessoas.Add(p1);
pessoas.Add(p2);
pessoas.Add(p3);

lstTeste.DataSource = pessoas;
lstTeste.DataBind();

AutoID:

<asp:ListView ID="lstTeste" runat="server">
    <ItemTemplate>
        <asp:Label ID="lblNome" runat="server" Text='<%#Eval("Nome") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:ListView>

renderizará

<span id="MainContent_lstTeste_lblNome_0">Rodolfo</span>
<span id="MainContent_lstTeste_lblNome_1">Fadino</span>
<span id="MainContent_lstTeste_lblNome_2">Junior</span>

StaticID:

<asp:ListView ID="lstTeste" ClientIDMode="Static" runat="server">
    <ItemTemplate>
        <asp:Label ID="lblNome" runat="server" Text='<%#Eval("Nome") %>'></asp:Label>
    </ItemTemplate>
</asp:ListView>

renderizará

<span id="lblNome">Rodolfo</span>
<span id="lblNome">Fadino</span>
<span id="lblNome">Junior</span>

Predictable:

<asp:ListView ID="lstTeste" ClientIDMode="Predictable"
ClientIDRowSuffix="Codigo" runat="server">
    <ItemTemplate>
        <asp:Label ID="lblNome" runat="server" Text='<%#Eval("Nome") %>'></asp:Label>
    </ItemTemplate>
</asp:ListView>

renderizará

<span id="MainContent_lstTeste_lblNome_30">Rodolfo</span>
<span id="MainContent_lstTeste_lblNome_35">Fadino</span>
<span id="MainContent_lstTeste_lblNome_40">Junior</span>

Como vocês podem ver ele utilizou como sufixo a propriedade “Codigo” da minha coleção de pessoas.

Neste exemplo também mostro outra novidade do ASP.NET 4.0, agora não é mais preciso definir LayoutTemplate para o controle ListView.

Espero que este post seja útil,

estou a disposição para dúvidas, críticas e sugestão.

Rodolfo