Jugando con jQuery: emulando el FindControl de ASP.NET

06 oct. 2008
Esto de jQuery es divertido. Igual de divertido que javascript pero más fácil.

Hace unos días di una primero introducción a jQuery e hice mi primer plugin que llamé macEmulator.

Ahora presento un nuevo plugin que responde a una necesidad real y casi diaria de todo programador en ASP.NET (a no ser que trabaje con MVC).

Se trata de emular el FindControl de ASP.NET pero con javascript. Vayamos a un ejemplo:

Tenemos un DataList con un ItemTemplate que tiene dos Panels y un Label en cada Panel

<asp:DataList ID="DataList1" runat="server">
    <ItemTemplate>
        <asp:Panel ID="Panel1" runat="server">
            <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server">
            <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
        </asp:Panel>
    </ItemTemplate>
</asp:DataList>


Esto generará un código HTML que convertirá las Label en elementos <span /> con un identificador de este estilo: DataList1_ctl00_Label1

Pero yo lo que quiero es acceder a las Label1 por jQuery... ¿cómo lo hago?

No hay una forma directa porque los IDs los genera ASP.NET, pero con el plugin que presento podremos hacer algo como esto:

var controls = $(document).findControl('Label1');
for (i = 0; i < controls.length; i++) { alert(controls[i].innerHTML); }


El plugin no es que sea una obra de arte. Más bien es sencillito, jeje. Lo autoexplican los comentarios:

jQuery.fn.findControl = function(clientId) {
    var ids = new Array();
   
    // Para cada elemento que tenga un atributo ID dentro de "this"
    $(this).find('*[id]').each(function(i) {
        // Si el ID del elemento termina como el clientId, lo añadimos al array
        if (this.id &&
            (this.id.lastIndexOf(clientId) >= 0) &&
            (this.id.lastIndexOf(clientId) == (this.id.length - clientId.length))) {
                ids.push(this);
            }
        });
       
    // Devolvemos el array
    return ids;
}


El plugin ya viene con bugs por defecto, como el hecho de que si otro elemento se llamara MyLabel1, el plugin se creería que es Label1... pero bueno, es una primera aproximación.

comments powered by Disqus
subir