C# Warum steigt die Anzahl der Zeilen in meinem <table> nicht? (ASP.NET)

[IKäsebrot]

Hallo zusammen,

ich habe volgenden table definiert:

<table id="zutatenTable" runat="server">
        <thead>
            <tr>
                <th>Zutat:</th>
                <th>Menge:</th>
            </tr>
        </thead>
    </table>

Jedes mal wenn ein Button gedrückt wird, füge ich der Tabelle eine neue Zeile hinzu:

                function InsertZutat() {
                var table = document.getElementById('<%=zutatenTable.ClientID%>');
                //Get values
                var zutat = document.getElementById('<%=tbZutat.ClientID%>');
                var menge = document.getElementById('<%=tbMenge.ClientID%>');

                // Create an empty <tr> element and add it to the 1st position of the table:
                var row = table.insertRow(table.childNodes.length - 1);

                // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);

                // Add some text to the new cells:
                cell1.innerHTML = zutat.value;
                cell2.innerHTML = menge.value;
            }

Diese Zeilen werden auch angezeigt! Jetzt möchte ich aber irgendwann auch die Zeilen wieder auslesen. Das passiert serverside in C#.

        foreach (System.Web.UI.HtmlControls.HtmlTableRow row in zutatenTable.Rows)
        {
                  //Code...
        }

Leider wird die Anzahl der Zeilen in meinem Table nie erhöht. Diese bleibt = 1 egal wieviele Zeilen ich im Clientcode generiert habe. Ich glaube diese eine Zeile die immer drin ist müsste die sein die ich von Anfang an manuell in die aspx reingeschrieben habe.

Jemand eine Idee wie ich die Zeilen am Besten auslesen kann?

Gruß

 

[BlooDFreeZe]

Also wenn ich das richtig verstanden habe fügst du die Zeile per JS am Client hinzu? Da hat der Server dann keinen Zugriff drauf. Der Server generiert die Website einmal und schickt sie an den Client. Der manipuliert dann lokal seine eigene Tabelle. Der Client muss die Inhalte dann noch an den Server schicken. Oder hat ASP.NET Webforms da einen automatischen Mechanismus?

 

[IKäsebrot]

Also wenn ich das richtig verstanden habe fügst du die Zeile per JS am Client hinzu? Da hat der Server dann keinen Zugriff drauf. Der Server generiert die Website einmal und schickt sie an den Client. Der manipuliert dann lokal seine eigene Tabelle. Der Client muss die Inhalte dann noch an den Server schicken. Oder hat ASP.NET Webforms da einen automatischen Mechanismus?

Jetzt wo du es sagst klingt es plausibel. Hast eine Idee oder einen Verweis wie man das am geschicktesten implementiert?

 

[BlooDFreeZe]

Ich hab bis jetzt nur mit ASP.NET MVC gearbeitet. Das unterscheidet sich schon gut von Webforms, ich kann dir also nicht wirklich direkt weiterhelfen. Das dürfte aber prinzipiell nicht schwer sein. Gibt's nen Grund warum du nicht auf ASP.NET MVC setzt?

*edit*
Hier ist ein Beispiel zum Manipulieren von Daten https://code.msdn.microsoft.com/Emp...6ba7/sourcecode?fileId=18865&pathId=666260186
*edit2*
Ich glaube was du suchst ist sowas http://msdn.microsoft.com/en-us/library/ms228214.aspx

 

[IKäsebrot]

Gibt's nen Grund warum du nicht auf ASP.NET MVC setzt?

Naja ich komme aus der Winforms Ecke und wollte in Webentwicklung einsteigen. Also dachte ich ASP.NET Webforms qürde sich da anbieten. Kannst du in zwei Sätzen erklären was ASP.NET MVC von WebForms unterscheidet/abhebt?

 

[BlooDFreeZe]

Ich versuchs mal^^
ASP.NET Webforms versucht möglichst viel vom Web zu abstrahieren. Z.B. mit diesen "serverseitigen" Controls, die schon mit wenig Code sehr viel Automatisch machen, und Features, wie den State der letzten Seite speichern (Http ansich ist ja stateless), soll das ganze recht einfach werden bzw. eine gewohnte Umgebung sein. Also quasi das Wohlfühlpaket für Windows Forms Entwickler =) Das ganze kostet aber auch was an einigen Stellen wie z.B. Performance, Testability, Übersichtlichkeit mit den Codebehind Dateien, Einschränkungen bei Routing (URLs Mappen...)...

ASP.NET MVC ist das neuste Konzept, dass momentan stark vorangetrieben wird. Projekte sind standardmäßig in MVC Struktur eingeteilt, man programmiert eher klassisch Webanwendungen, hat mehr Kontrolle über Routing, SEO und es ist schneller und hat ne sehr gute Testability. Nachteil: Mehr Lernaufwand für Windows Forms Entwickler und an manchen Stellen mehr Code =)

 

[IKäsebrot]

Danke!

 

[DecentMan]

Du verwendest einen HTML-Table. Wenn du neue Zeilen per Javascript addierst, sind diese für den Server nicht bekannt. Selbst mit einem PostBack funktioniert das nicht, weil dein HTML-Table eben kein Server-Control ist...

Es gäbe vielleicht die Möglichkeit, anstelle eines HTML-Tables ein serverseitiges GridView oder ListView zu verwenden.
Oder aber falls du dich mit AJAX gut auskennst, könntest du es mit Hilfe von asynchronen Calls versuchen.
Das würde aber alles nur einen Sinn machen, wenn du die Daten in eine Datenbank einfügst, damit beim neuen Rendern des Bereichs der Seite die Daten ausgelesen werden und die "Tabelle" dementsprechend abgeändert an den Client geschickt wird.

Ich glaube nicht, dass deine jetzige Methode irgendwie mit ASP.Net machbar ist. Im Grunde genommen ist es ja nur normales Javascript, das du verwendest. Dazu bräuchtest du ja auch keinen Webserver...

Wenn ich dir einen Tipp geben darf, dann befasse dich wirklich von Anfang an mit MVC. Ich war jahrelang als WebForms-Entwickler tätigt und bereue den Umstieg nicht! Es ist zwar schon eine Umstellung, klar, aber es ist wirklich jede Mühe wert!

Das Einzige, was mir bei MVC nicht gut gefällt, ist RAZOR. Das ist eine Technik, mit der du direkt in HTML serverseitigen Code (C#, VB.Net) einfügen kannst. Also wieder back to the roots à la ASP der ersten Generation. Bei ASP.Net wurde ursprünglich ja Wert darauf gelegt, dass alle möglichen codeseitigen Berechnungen in die dafür geschaffenen Code-Behind-Seiten ausgelagert werden sollten.

 

[IKäsebrot]

Hey vielen Dank für eure Ratschläge! Falls aber doch jemand auf das gleiche Problem soßen sollte möchte ich die Lösung des Problems zeigen. Diese hier scheint gängig zu sein unter ASP.NET:

Wie ihr schon richtig erkannt habt hat mein serverseitiger Code keine Ahnung von dem was in meiner GridView oder meinem Table steht. Was ich übrigens echt seltsam finde weil ich in meinem C#-Code durchaus lesen kann was in TextBoxen steht (Aber nicht in meinem Table ). Also geht man hier folgendermaßen vor:

Zuerst braucht man ein Input (Hidden) Steuerelement weleches man seinem HTML hinzufügt:

<input id="hiddenZutatValues" type="hidden" runat="server" value="" enableviewstate="true"/>

In dem Clientseitigen JavaScript-Code muss man die Daten jetzt nicht nur in die Tabelle einfügen sondern auch in eben dieses Input(Hidden) Element:

                function InsertZutat() {

                var table = document.getElementById('<%=zutatenTable.ClientID%>');
                //Get values
                var zutat = document.getElementById('<%=tbZutat.ClientID%>');
                var menge = document.getElementById('<%=tbMenge.ClientID%>');

                // Create an empty <tr> element and add it to the 1st position of the table:
                //var row = table.insertRow(table.childNodes.length - 1);
                var row = table.insertRow(1);

                // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);

                // Add some text to the new cells:
                cell1.innerHTML = zutat.value;
                cell2.innerHTML = menge.value;

                //Write to hidden field
                var zutatenItems = document.getElementById('<%=hiddenZutatValues.ClientID%>').value;
                zutatenItems = zutat.value + "," + menge.value + "|" + zutatenItems.toString();
                document.getElementById('<%=hiddenZutatValues.ClientID%>').value = zutatenItems.toString();

                //Clean up
                document.getElementById('<%=tbZutat.ClientID%>').innerText = "";
                document.getElementById('<%=tbMenge.ClientID%>').innerText = "";

            }

Da eine Zeile in der Tabelle aus jeweils einer Zutat und der dazugehörigen Menge besteht müssen die Daten so formatiert werden, dass sie auf serverseite wieder sinnvoll ausgelesen werden können. Das Problem ist nämlich, dass die Daten in das Input-feld als String geschrieben werden. Also sehen die Daten dann wie folgt aus:

(a,b|c,d|....|x,y) -> Zutat,Menge|Zutat,Menge|....

So werden die Daten nämlich jedes Mal geschrieben wenn eine neue Zeile entsteht. Jetzt muss auf Serverseite das ganze natürlich wieder in sinnvolle Daten zerlegt werden, was aber sehr leicht per Lambda-Abfragen gemacht werden kann:

string hiddenZutaten = hiddenZutatValues.Value; //Hole den String aus Input (Hidden)
        List<string> zutatRowList = hiddenZutaten.Split('|').ToList(); //Trenne einzelne Datensätze die durch '|' getrennt sind und speicher diese in eine Liste

       //Iteriere durch die Liste
        foreach(string s in zutatRowList)
        {
            RezeptZutaten z = new RezeptZutaten();
            List<string> zutat = s.Split(',').ToList(); //Trenne jeden Datensatz durch ',' auf, dann ist....
            z.Name = zutat[0]; //Element [0] immer die Zutat selbst und....
            z.Menge = zutat[1]; // Element [1] immer die dazugehörige Menge...

        }

Trotzdem vielen Dank für eure Hilfe!

Gruß,
Käsebrot

Btw, kann das ganze natürlich auch zu 100% im C# Code passieren und man bräuchte genau 0 JavaScript Code und auch keine versteckten Input-Elemente. Das würde dann aber zu einem Postback führen was zumindest in meiner Anforderung ein 'Nono' war

 

[DecentMan]

Freut mich, sieht nicht schlecht aus...

Okay, wenn du PostBack nicht verwenden kannst oder darfst, dann war mein Hinweis wegen GridView/ListView wohl überflüssig.
Du hast es jetzt mit einem hidden field gelöst, das ist allerdings wieder reines Javascript. Klar kannst du Variablen aus C# einlesen und ausgeben, allerdings weiß der Server in Wirklichkeit immer noch nichts von den neuen Zeilen. Die Anzeige funktioniert nur rein clientseitig.

Ich hatte das ursprünglich so verstanden, dass die Tabelle bei jedem neuen Aufruf der Seite zukünftig "automatisch" die bereits hinzugefügten Zeilen enthalten soll. Daher mein Hinweis wegen der Datenbank...

Trotzdem, klasse gemacht!