Es gibt hier auf DevTrain bereits einen Artikel der zeigt wie man mit ASP.NET 2.0 und einem Gridview Steuerelement relationale Daten auch verschachtelt darstellen kann.

Nun wird dieses Beispiel um einen dynamischen Faktor erweitert. Die Kind Tabellen werden dabei nur bei Bedarf und Mausclick dargestellt. Das ganze funktioniert ohne ASP.NET Code und ohne Postback im Client, ist also fast schon AJAX.

Das setzt natürlich ein wenig JScirpt vorraus. Im Templatefield wird dabei das Gridview in ein SPAN oder DIV Element eingebettet. Diesem wird eine Script Funktion zugewiesen die für das schliessen des Elements zuständig ist. Per Standard wird das Element zwar zum Browser übertragen, aber über das Style Attribut ausgeblendet.

Um das den Kind Bereich wieder einzublenden wird ein extra Element benötigt. In diesem Fall wird das Plus Zeichen eingebaut und mit einem JScript versehen. Entscheidend ist dabei auch das das SPAN Element eine ID erhält die dieses Script wiederum benötigt. Dabei wird dies ID aus dem Wert DETAIL und der OrderID zusammengesetzt.

<asp:TemplateField HeaderText="Details"> <ItemTemplate> <a href='javascript:showdetails("<%#eval("orderid","DETAIL{0}") %>");'>+</a> <span ID='<%#eval("orderid","DETAIL{0}") %>' onclick="hideDetails(this)" style="display:none;" > <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("OrderID") %>' /> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="dsDetails" >

Ein bischen Code braucht man dann noch, aber eben Jscript. Die Funktion hideDetails blendet das Kind Gridview aus. Für das einblenden ist die Funktion showdetails zuständig ist die dafür als Parameter die ID des SPAN benötigt. Dann wird per JScript Funktion getElementByID das Elemetn im HTML DOM lokalisiert und das Style auf Block gesetzt. Dies hat zru Folge das der Bereich wieder sichtbar ist.

<script language=javascript> function showdetails(id) {document.getElementById(id).style.display="block"; } function hideDetails(me){ me.style.display="none"; } </script>

Diese Methode bietet sich an wenn die Datenmenge eher gering ist und viele der Detail Datensätze vom Benutzer gesichtet werden. Es werden alle Daten zum Browser übertragen und dies dauert seine Zeit. Dafür ist die Reaktion im Browser dann schnell, da kein Postback durchgeführt wird.