Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

Clientseitiges "onchange" für ASP.Net CheckBoxList Items

Als net­ter ASP.Net Programmierer mutet man dem Anwender wegen eines Klicks in eine CheckBox (in die­sem Fall als Item einer CheckBoxList) kein Postback/Reload der Seite zu. Nun hat man ja aber viel­leicht doch den Wunsch, das eine oder andere beim Klick zu erle­di­gen – cli­ent­sei­tig per Javascript. Wenn mög­lich, will man den ein­zel­nen CheckBoxList Items noch ein paar Attribute mit­ge­ben, die in der Javascript-Funktion aus­ge­wer­tet wer­den kön­nen und im Idealfall weiß die Javascript-Funktion auch gleich, wel­cher Item geklickt wurde. Das sollte eigent­lich kein Problem sein – denkt man.

Also ver­sucht man es erst­mal ganz ein­fach mit fol­gen­dem Codeschnipsel im C# CodeBehind der Seite:

image

-> keine Reaktion 🙁

Das glei­che noch ein­mal mit "onclick" anstelle "onchange" -> sel­bes Ergebnis 🙁

Nun hilft alles nichts – man fängt an nach­zu­den­ken… Ein Blick in den Seitenquellcode ist ziem­lich auf­schluss­reich: Die CheckBoxList Items haben einen <span> um den eigent­li­chen <input>-Tag des Items ste­hen – und in die­sem lan­den unsere Attribute:

image

So funk­tio­niert das also lei­der nicht. Ein kur­zes Googlen zeigt nicht nur, dass andere das Problem auch schon hat­ten, son­dern auch eine Lösung: Das "onclick" darf nicht an die ein­zel­nen Items, son­dern muss an die CheckBoxList gebun­den wer­den:

image

Welcher Item geklickt wurde, kann man nun lei­der nicht mehr ein­fach an die Javascript-Funktion über­ge­ben. Dies muss man über eine for-Schleife her­aus­fin­den. Die Attribute für die ein­zel­nen Items kön­nen aber mit einem klei­nen Trick trotz­dem in der Javascript-Funktion abge­fragt wer­den: Man legt sich zusätz­lich zum Array mit den CheckBoxList Items (<input>-Tags) noch ein Array für die Attribute (<span>-Tags) an, das natür­lich die glei­che Länge hat und über den glei­chen Index abge­fragt wer­den kann.

Alles in allem sieht die Javascript-Funktion in der Seite dann so aus:

func­tion CheckboxChanged()
{
var checkBoxList = document.getElementById('<%= SampleCheckBoxList.ClientID %>');
//Array für die CheckBoxList Items
var check­bo­xes = checkBoxList.getElementsByTagName('input');
//Array für die Attribute der CheckBoxList Items
var checkboxAttributes = checkBoxList.getElementsByTagName('span');
for (var i=0; i<checkboxes.length;i++)
{
alert(checkboxes[i].checked);
alert(checkboxAttributes[i].code);
alert(checkboxAttributes[i].text);
}
}

Und der C# CodeBehind für das Hinzufügen des "onclick" und der Attribute so:

//set attri­bu­tes for the items of SampleCheckBoxList (reqi­red for java­script func­tion)
fore­ach (ListItem item in SampleCheckBoxList.Items)
{
item.Attributes.Add("code", item.Value);
item.Attributes.Add("text", item.Text);
}
//set the java­script func­tion to be cal­led at a check­box item click
SampleCheckBoxList.Attributes.Add("onclick", "CheckboxChanged()");

Das sollte wirk­lich kein Problem sein… 🙂

Related Posts

Pin It on Pinterest