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%>")
Tippfehler:
var i= document.getElementById(”);
Jscript ist case sensitiv
Danke für den Hinweis – hab’s gleich korrigiert
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.
Leider wurde der Ausdruck im letzten Kommentar etwas abgeschnitten.
nun ist er aber richtig
document.getElementById("<%# btnID %>");