ASP.NET: Client Control ID ermitteln

Ich will auf dem Client – per JavaScript-Funktion – ein Element (Button, Label, <div>, x-beliebiges Control) manipulieren. Also zum Beispiel einen Button deaktivieren, ohne dass dafür ein PostBack zum Server notwendig ist.

Die Lösung dafür erscheint im Prinzip recht simpel: Per

document.getElementById("ID_MEINES_CONTROLS")

hole ich mir das Element und kann dann damit tun und lassen, was ich will. Die ID des Elementes kenne ich ja – schließlich habe ich die selbst festgelegt:

<asp:Button ID="buttonFoo" runat="server" />

Das JavaScript dafür müsste also im Prinzip so aussehen:

document.getElementById("buttonFoo").disabled = true;

Der Haken bei der Sache: Das wird so selten funktionieren. Nämlich immer dann nicht, wenn ich verschachtelte Control in meiner Seite habe. Das ist z.B. schon dann der Fall, wenn ich MasterPages benutze. Die IDs der Controls auf dem Client werden dann nämlich nach folgendem Muster generiert:

<parentControl.parentControl.ID>_<parentControl.ID>_<myControl.ID>

Weil ich dass weiß kann ich jetzt auch mein Control ermitteln:

document.getElementById("ctl000_ContentPlaceholder1_buttonFoo")

("ctl000" ist übrigens immer die ID der Master-Seite)

Soweit – so gut: Ändert sich aber nun das Layout meiner Seite, weil ich den Button z.B. noch in ein Panel verschiebe, dann ändert sich auch seine ID und ich muss das JavaScript wieder anpassen. Und um genau das zu verhindern gibt es in ASP.NET für die ASPX-Seiten eine Art schlaue Präprozessor-Funktion, die mir für ein Control immer die korrekte Client-ID zurück liefert. Das sieht dann (in der ASPX-Seite) so aus:

document.getElementById("<%= buttonFoo.ClientID%>")

4 Kommentare

  1. Heinz Georg Spengler 20. Februar 2007 um 18:31

    Ein kleiner workaround.

    einfach in der cs Datei für das Control ein
    Propertie nach folgenden Schema einbauen.

    public string btnID
    {

    get
    {
    return btn.UniqueID;
    }
    }

    in deinem Javascript Code die ID
    durch diesen Ausdruck ersetzen
    document.getElementById(‘");

    DataBind in der Load Methode nicht vergessen.

  2. Heinz Georg Spengler 20. Februar 2007 um 18:34

    Leider wurde der Ausdruck im letzten Kommentar etwas abgeschnitten.

    nun ist er aber richtig
    document.getElementById("<%# btnID %>");