Dynamisch Aktualisieren von Zeilen in einer HTML-Tabelle mit einem UpdatePanel

Question

Ich habe das ASP.NET AJAX UpdatePanel-Steuerelement in letzter Zeit häufig für einige Intranet-Apps verwendet, an denen ich gearbeitet habe, und größtenteils habe ich es bereits verwendet dynamisches Aktualisieren von Daten oder Ausblenden und Anzeigen von Steuerelementen in einem Formular basierend auf den Aktionen des Benutzers

Es gibt einen Ort, wo ich ein paar Probleme hatte, und ich frage mich, ob jemand einen Rat hat. Mein Formular verwendet ein hübsches typisches tabellenbasiertes Layout, in dem die Tabelle ein Raster mit Beschriftungen und Feldern anzeigt, die der Benutzer ausfüllen kann. (Ich weiß bereits, dass tabellenbasierte Layouts von einigen Leuten gemieden werden, und ich verstehe die Vor- und Nachteile. Aber das ist die Wahl, die ich getroffen habe, also bitte nicht mit "Kein Tabellenbasiertes Layout" antworten.)

Jetzt ist mein Problem, dass es Zeiten gibt, wenn ich wie ein UpdatePanel um eine Reihe von Zeilen wickeln würde, so dass ich sie ausblenden und anzeigen kann, aber das UpdatePanel lässt Sie das nicht wirklich tun. Das grundlegende Problem ist, dass es ein div um sie herum wickelt, und soweit ich weiß, können Sie ein div nicht um Tabellenzeilen wickeln. Es ist kein gültiges HTML.

Die Art, wie ich damit umgegangen bin, besteht darin, meine dynamischen Zeilen vollständig in eine ganz neue Tabelle einzufügen, was in Ordnung ist, aber dann müssen Sie alle Spalten manuell mit der darüber liegenden Tabelle ausrichten Das ist ein echter Schmerz und ziemlich zerbrechlich.

Also, die Frage ist ... kennt jemand irgendeine Technik zum dynamischen Generieren oder Aktualisieren von Zeilen mit einem UpdatePanel oder etwas ähnliches? Ich hoffe, die Lösung wäre fast so einfach wie ein UpdatePanel auf die Seite zu legen, aber selbst wenn nicht, würde ich es trotzdem gerne hören.

Answer 1

Antwort: Am Ende gibt es keine Möglichkeit, dies ein Update mit zu tun. Das Beste, was Sie erreichen können, ist das Aktualisieren der gesamten Tabelle, aber nicht einzelner Zeilen.

Answer 2

Ein UpdatePanel wird als DIV-Tag dargestellt und ist daher zwischen Tabellenzeilen ungültig. Wenn alles, was Sie wollen, ist, den Inhalt zu verbergen, während die (sehr sehr schlecht) Tabellen-Layout beibehalten wird, umfassen einen Stil-Tag in der Zeile mit einem var ASP dort für die Sichtbarkeit Wert wie folgt aus:

<tr style="display: <%= visible %>"> 
    <td></td> 
</tr> 

Dann manipulieren Sie die sichtbare Variable nach Bedarf.

Das gesagt, das richtige Layout beiseite zu bürsten tut dir weh.

Answer 3

Wenn Sie Ihre Steuerelemente dynamisch erstellen, können Sie entscheiden, welche Elemente beim Generieren der Steuerelemente ein- oder ausgeblendet werden sollen.

Sie können auch Dinge tun, wie folgt aus:

<table> 
    <tr id="row1" runat="server"> 
     <td>Label</td><td>Field</td> 
    </tr> 
</table> 

Und von Code hinter:

row1.visible = false; 

Eine Modifikation @ Rob Allens Antwort, dies zu tun:

CSS

.hidden_row { 
    display: none; 
} 

ASP X

Gleiche Idee, nur mit einer Klasse statt der Codierung der CSS direkt in die Tabelle.

Answer 4

UpdatePanels (oder AJAX-Postbacks im Allgemeinen) sollten nicht nur zum Ausblenden oder Anzeigen von Elementen verwendet werden. Wenn Sie Daten aktualisieren müssen, ist das eine Sache, aber ansonsten, verwenden Sie einfach Javascript, um die Anzeige CSS-Eigenschaft zu ändern.

Wenn Sie einen Client Framework wie jQuery verwenden, die es noch einfacher macht - man so etwas tun könnte:

<button onclick="$('.inactive').toggle();">Toogle Inactive</button> 

<table> 
<tr class="inactive"><td>Inactive 1</td></tr> 
<tr class="inactive"><td>Inactive 2</td></tr> 
<tr><td>Active 1</td></tr> 
<tr><td>Active 2</td></tr> 
</table> 

Answer 5

In unserem Projekt haben wir eine Lösung für dieses Problem gefunden. Wir mussten komplexe Rports mit vielen aktiven Elementen in jeder Zeile erstellen (Schaltflächen zum Bearbeiten, Akzeptieren usw.).

Wir erstellt div, die in updatepanel (für die Aktualisierung der gesamten Tabelle bei Bedarf) platziert wird. In diesem div haben wir eine Tabelle mit Header-Definition und separaten Tabellen für jede Zeile erstellt (diese Tabellen werden in Update-Panels abgelegt). Um in jeder Zeile gleiche Spalten zu erzeugen, müssen wir für jede Tabellenzelle CSS-Klassen verwenden.

Also, wir haben so etwas wie diese (in jeder Zeile wir einige Tasten haben, Dropdown-Listen, Tooltips, etc., aber Idee zu verstehen, ich habe es auf einzelne Säule gekürzt):

<UpdatePanel> 
<DIV> 
    <TABLE> 
    <TR> 
    <TH class="h1">Name</TH> 
    </TR> 
    </TABLE> 

    <UpdatePanel Id='InnerPanel1'> 
     <TABLE> 
     <TR> 
     <TD class="h1">John</TD> 
     </TR> 
     </TABLE> 
    </UpdatePanel> 
</DIV> 
</UpdatePanel> 

Es ist nicht elegant und generiert großen HTML-Code, funktioniert aber.

Answer 6

Ich hatte das gleiche Problem und ich stopped auf eine Lösung.

Sie können TD-Teile einer Tabelle aktualisieren, wenn sich die gesamte Tabelle selbst in einem Update-Panel befindet !!

Ich weiß nicht warum. Für mich geht das.

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> <table ID="Table1"> 
<tr> 
<td > 
... 
</td> 
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<td > 
.... 
</td> 
<td > 
... 
</td> 
<td > 
... 
</td> 
</ContentTemplate> 
</asp:UpdatePanel> 

</tr> 

</table></ContentTemplate></asp:UpdatePanel> 

Answer 7

Asp Code:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<table width="100%"> 
    <tr> 
     <td style="width: 300px"> 
      Employee First Name 
     </td> 
     <td> 
      <asp:TextBox ID="txtFname" runat="server"></asp:TextBox> 
     </td> 
    </tr> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <tbody> 
       <tr> 
        <td style="width: 300px"> 
         Date Of Birth 
        </td> 
        <td> 
         <asp:TextBox ID="txtDOB1" runat="server" OnTextChanged="txtDOB_TextChanged" AutoPostBack="true"></asp:TextBox> 
         <asp:CalendarExtender ID="txtDOB1_CalendarExtender" runat="server" Enabled="True" 
          TargetControlID="txtDOB1"> 
         </asp:CalendarExtender> 
        </td> 
       </tr> 
       <tr> 
        <td style="width: 300px"> 
         Age 
        </td> 
        <td> 
         <asp:TextBox ID="txtAge" Style="font-weight: bold; font-size: large" runat="server" 
          Enabled="false"></asp:TextBox> 
        </td> 
       </tr> 
      </tbody> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <tr> 
     <td align="right" style="width: 300px"> 
      <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" /> 
     </td> 
     <td> 
      <asp:Button ID="btnClear" runat="server" CssClass="button" Text="Reset" /> 
     </td> 
    </tr> 
</table> 

Class Code:

protected void txtDOB_TextChanged(object sender, EventArgs e) 
{ 
    try 
    { 
     DateTime Today = DateTime.Now; 
     DateTime DOB = Convert.ToDateTime(txtDOB1.Text); 
     ArrayList arr = new ArrayList(); 
     arr = span(Today, DOB); 
     arr[0].ToString();//For Years 
     arr[1].ToString();//For Months 
     arr[2].ToString();//For Days 
     txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString(); 

    } 
    catch (Exception ex) 
    { 

     lblError.Text = "Error : " + ex.Message ; 
    } 
} 
public ArrayList span(DateTime f, DateTime l) 
{ 
    int days; 
    int months; 
    int years; 

    int fird = f.Day; 
    int lasd = l.Day; 

    int firm = f.Month; 
    int lasm = l.Month; 

    if (fird >= lasd) 
    { 
     days = fird - lasd; 
     if (firm >= lasm) 
     { 
      months = firm - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 
    else 
    { 
     days = (fird + 30) - lasd; 
     if ((firm - 1) >= lasm) 
     { 
      months = (firm - 1) - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm - 1 + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 


    if (days < 0) 
    { 
     days = 0 - days; 
    } 
    if (months < 0) 
    { 
     months = 0 - months; 
    } 
    ArrayList ar = new ArrayList(); 
    ar.Add(years.ToString()); 
    ar.Add(months.ToString()); 
    ar.Add(days.ToString()); 
    return ar; 
}