Filas dinámicamente refrescantes en una tabla HTML usando un UpdatePanel

Question

Últimamente he estado usando mucho el control ASP.NET AJAX UpdatePanel para algunas aplicaciones de intranet en las que he estado trabajando y, en general, las he estado usando para actualizar dinámicamente datos u ocultar y mostrar controles en un formulario en función de las acciones del usuario.

Hay un lugar donde he estado teniendo problemas y me pregunto si alguien tiene algún consejo. Mi formulario utiliza un diseño bastante típico basado en tablas donde la tabla se usa para mostrar una grilla de etiquetas y campos para que el usuario complete. (Ya sé que los diseños basados ​​en tablas son evitados por algunas personas, y entiendo los pros y los contras. Pero esa es la opción que he elegido, así que no respondas con "No uses un diseño basado en tablas".)

Ahora mi problema es que hay veces en que me gustaría como para envolver un UpdatePanel alrededor de un conjunto de filas para que pueda ocultarlas y mostrarlas dinámicamente, pero UpdatePanel realmente no te deja hacer eso. El problema básico es que envuelve un div alrededor de ellos, y hasta donde yo sé, no se puede ajustar un div alrededor de las filas de la tabla. No es HTML válido.

Así que la forma en que he estado tratando es hacer que mis filas dinámicas formen parte de una tabla completamente nueva, lo cual está bien, pero luego tiene que tratar de alinear todas las columnas manualmente con la tabla que está encima de ella, y eso es un dolor real y bastante frágil.

Entonces, la pregunta es ... ¿alguien sabe de alguna técnica para generar dinámicamente o refrescar filas utilizando un UpdatePanel o algo similar? Afortunadamente, la solución sería casi tan fácil como dejar caer un UpdatePanel en la página, pero incluso si no, aún me gustaría escucharlo.

Answer 1

Respuesta: Al final, no hay manera de hacer esto usando un UpdatePanel. Lo mejor que puede lograr es actualizar toda la tabla, pero no las filas individuales.

Answer 2

Un UpdatePanel se representa como una etiqueta DIV y, por lo tanto, no es válido entre las filas de la tabla. Si lo que quieres es ocultar el contenido, mientras que el mantenimiento de su (muy malo) diseño de la mesa, incluir una etiqueta de estilo en la fila con una var ASP en allí por el valor de visibilidad de esta manera:

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

Entonces se manipula la variable visible según sea necesario.

Dicho esto, dejar de lado el diseño adecuado te está perjudicando aquí.

Answer 3

Si crea dinámicamente sus controles, puede decidir qué cosas mostrar u ocultar al generar sus controles.

También puede hacer cosas como esta:

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

Y de código subyacente:

row1.visible = false; 

Una modificación de la respuesta de @ Rob Allen, haga lo siguiente:

CSS

.hidden_row { 
    display: none; 
} 

ASP X

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

La misma idea, simplemente usar una clase en lugar de codificar el CSS directamente en la tabla.

Answer 4

UpdatePanels (o las devoluciones de mensajes AJAX en general) no deberían usarse para simplemente ocultar o mostrar elementos. Si necesita actualizar datos, eso es una cosa ... pero, de lo contrario, solo use javascript para cambiar la propiedad css de la pantalla.

Si utiliza un marco cliente como jQuery, que hace que sea aún más fácil - se podría hacer algo como esto:

<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

En nuestro proyecto encontramos alguna solución a este problema. Tuvimos que crear raports complejos con muchos elementos activos en cada fila (botones para editar, aceptar, etc.).

Creamos div que se coloca en el panel de actualización (para actualizar toda la tabla cuando sea necesario). En este div creamos tabla con definición de encabezado y tablas separadas para filas eaach (esas tablas se ponen en paneles de actualización). Para crear columnas iguales en cada fila, tenemos que usar clases css para cada celda de la tabla.

Por lo tanto, tenemos algo como esto (en cada fila tenemos unos botones, menús desplegables, información sobre herramientas, etc., pero para comprender idea que he truncada a una sola columna):

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

No es elegante y genera HTML grande, pero funciona.

Answer 6

Tuve el mismo problema y me topé con una solución.

¡PUEDE actualizar partes TD de una tabla si toda la tabla misma está dentro de un Panel de actualización también!

No sé por qué. Esto funciona para mi. código

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

Código de clase:

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