Dynamicznie odświeżanie wierszy w tabeli HTML przy użyciu UpdatePanel

Question

Używam ostatnio kontrolki ASP.NET AJAX UpdatePanel dla niektórych aplikacji intranetowych, nad którymi pracowałem, i w większości przypadków używam go do dynamicznie odświeżaj dane lub ukrywaj i wyświetlaj formanty na podstawie działań użytkownika.

Jest jedno miejsce, w którym miałem trochę problemów i zastanawiam się, czy ktoś ma jakąkolwiek radę. Moja forma używa dość typowego układu opartego na tabeli, w którym tabela służy do wyświetlania siatki etykiet i pól do wypełnienia przez użytkownika. (Wiem już, że niektóre układy są odrzucane przez układy tabelaryczne i rozumiem zalety i wady, ale to jest wybór, który podjąłem, więc proszę nie odpowiadać "Nie używaj układu opartego na tabelach".)

Teraz moim problemem jest to, że chciałbym jak zawinąć UpdatePanel wokół zestawu wierszy, tak, że mogę ukryć i pokazać je dynamicznie, ale UpdatePanel tak naprawdę nie pozwala tego zrobić. Podstawowym problemem jest to, że otacza je div, i o ile wiem, nie można zawijać div wokół wierszy tabeli. To nie jest prawidłowy HTML.

Sposób, w jaki sobie z tym poradziłem, polega na tym, że moje dynamiczne rzędy całkowicie wchodzą w skład zupełnie nowego stołu, co jest w porządku, ale musisz poradzić sobie z wyrównaniem wszystkich kolumn ręcznie z tabelą nad nim i to jest prawdziwy ból i dość kruchy.

Pytanie brzmi: czy ktoś wie o jakiejkolwiek technice dynamicznego generowania lub odświeżania wierszy za pomocą UpdatePanel lub czegoś podobnego? Mamy nadzieję, że rozwiązanie będzie prawie tak proste, jak opuszczenie UpdatePanel na stronie, ale nawet jeśli nie, nadal chciałbym to usłyszeć.

Answer 1

Odpowiedź: W końcu, nie ma sposobu, aby to zrobić za pomocą UpdatePanel. Najlepsze, co możesz osiągnąć, to odświeżenie całej tabeli, ale nie poszczególnych wierszy.

Answer 2

Moduł UpdatePanel renderuje się jako znacznik DIV i dlatego jest nieprawidłowy między wierszami tabeli. Jeśli chcesz to ukryć zawartość zachowując swoją (bardzo złe) układ tabeli, zawierać tag stylu w rzędzie z krytym var ASP tam na wartości widzialności jak ten:

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

Wtedy manipulować widoczna zmienna w razie potrzeby.

To powiedziawszy, odejście od właściwego układu cię tu krzywdzi.

Answer 3

Jeśli dynamicznie tworzysz formanty, możesz decydować, które elementy mają być wyświetlane lub ukrywane podczas generowania formantów.

Można również robić rzeczy tak:

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

iz kodem za:

row1.visible = false; 

Modyfikacja odpowiedzi @Rob Allena, to zrobić:

CSS

.hidden_row { 
    display: none; 
} 

ASP X

<tr class="<%= variable %>"> 

Taki sam pomysł, wystarczy użyć klasy zamiast kodowania CSS bezpośrednio do tabeli.

Answer 4

UpdatePanels (lub ogólnie postbacks AJAX) nie powinny być używane do ukrywania lub wyświetlania elementów. Jeśli chcesz zaktualizować dane, to jedna rzecz ... ale poza tym po prostu użyj javascript, aby zmienić właściwość display css.

Jeśli używasz ramy klienta jak jQuery, który sprawia, że ​​nawet łatwiej - można zrobić coś takiego:

<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

W naszym projekcie znaleźliśmy rozwiązanie tego problemu. Musieliśmy tworzyć złożone raporty z wieloma aktywnymi elementami w każdym wierszu (przyciski do edycji, akceptowania itp.).

Utworzono div, który jest umieszczony w updatepanel (do aktualizacji całego stołu w razie potrzeby). W tym dziale stworzyliśmy tabelę z definicją nagłówka i osobnymi tabelami dla eaach wierszy (te tabele są umieszczane w panelach aktualizacji). Aby utworzyć równe kolumny w każdym rzędzie, musimy użyć klas css dla każdej komórki tabeli.

Tak, mamy coś takiego (w każdym rzędzie mamy kilka przycisków, listy rozwijanej, podpowiedzi itp ale aby zrozumieć ideę mam obcięty go do pojedynczej kolumny):

<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> 

Nie elegancki i generuje duży HTML, ale działa.

Answer 6

Miałem ten sam problem i wpadłem na rozwiązanie.

Możesz zaktualizować części TD tabeli, jeśli cała tabela znajduje się wewnątrz Updatepanel!

Nie wiem dlaczego. Mi to pasuje. Kod

<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:

<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> 

kod Klasa:

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; 
}