control - Cómo crear una tabla de tres columnas en ASP.Net Repeater

repeater databound

Question

Me gustaría poder usar el control Repetidor de ASP.Net para crear una tabla HTML que tenga tres columnas y tantas filas como necc.

Por ejemplo, si los datos se vieran así

"Phil Hughes"

"Andy Petite"

"CC Sabathia"

"AJ Burnett"

"Javier vazquez"

Me gustaría que la tabla resultante fuera como

<table>
 <tr>
  <td>Phil Hughes</td>
  <td>Andy Petite</td>
  <td>CC Sabathia</td>
 </tr>
 <tr>
  <td>AJ Burnett</td>
  <td>Javier Vazquez</td>
  <td></td>
 </tr>
</table>

¿Cómo puedo hacer esto?

Answer 1

Es mejor utilizar un intstead de control DataList ya que tiene las propiedades interesantes RepeatColumns y RepeatDirection .

Answer 2

Mucho más simple que todos los ejemplos enumerados aquí; No necesita usar una vista de lista ni hacer nada en el código que está detrás.

  <asp:Repeater ID="ExampleRepeater" runat="server" >
    <HeaderTemplate>
        <table>
            <tr>
                <th>   Column 1
                </th>
                <th>   Column 2
                </th>
                <th>   Column 3
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:LinkButton ID="RemoveButton" runat="server" Text=''Remove'' CommandName="Remove"
                    CommandArgument=''<%# Eval("ID") %>'' CausesValidation="false"></asp:LinkButton>
            </td>
            <td>

                <asp:LinkButton ID="EditLink" runat="server" Text=''<%# Eval("Name")  %>''
                    CommandName="Edit" CommandArgument=''<%# Eval("ID") %>'' CausesValidation="false"></asp:LinkButton>

            </td>
            <td>
                <asp:Label ID="CommentTextBox" runat="server" Text=''<%# Eval("Comment")  %>'' />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Answer 3

O simplemente use un div en el repetidor y luego resuelva los problemas de alto / ancho con CSS.

Answer 4

Repetidor no es el control ideal para hacer eso. Si está utilizando .NET 3.5, debería usar ListView lugar. Aquí hay un ejemplo que hace lo que estás pidiendo.

<asp:ListView ID="myListView" runat="server" 
   DataSourceID="YOURDATASOURCE" GroupItemCount="3">

   <LayoutTemplate>
      <table>
         <tr>
            <td>
               <table border="0" cellpadding="5">
                  <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
               </table>
            </td>
         </tr>
      </table>
   </LayoutTemplate>

   <GroupTemplate>
      <tr>
         <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
      </tr>
   </GroupTemplate>

   <ItemTemplate>
      <td>
         <%# Eval("FullName") %>
      </td>
   </ItemTemplate>
</asp:ListView>

Answer 5

Supongo que tiene todos esos nombres en 5 filas de datos y desea distribuirlos en 3 columnas en un repetidor y no tener 2 filas de datos con 3 campos que serían sencillos. Según mi suposición, sus datos son algo así como:

DataTable (o cualquiera que sea su fuente):

ID      Name
---------------
1       Bob
2       John
3       Joe
4       Mary
5       Mike

Puede hacerlo usando un Repeater y un Literal con un poco de lógica en el evento OnDataBinding del Literal .

Primero define tu Repeater :

<asp:Repeater ID="repeater" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Literal ID="litItem" runat="server" OnDataBinding="litItem_DataBinding" />
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

A continuación, necesitará una constante para el total de columnas que desea y dos variables globales para realizar un seguimiento de la operación de enlace. Defínelos así:

public partial class _YourPage : System.Web.UI.Page
{
    private const int _repeaterTotalColumns = 3;
    private int _repeaterCount = 0;
    private int _repeaterTotalBoundItems = 0;

Luego, deberá implementar OnDataBinding para realizar todo el trabajo personalizado:

protected void litItem_DataBinding(object sender, System.EventArgs e)
{
    Literal lt = (Literal)(sender);
    _repeaterCount++;            
    if (_repeaterCount % _repeaterTotalColumns == 1)
    {
        lt.Text = "<tr>";
    }

    lt.Text += string.Format("<td>{0}</td>", Eval("Name").ToString());

    if (_repeaterCount == _repeaterTotalBoundItems)
    {
        // Last item so put in the extra <td> if required
        for (int i = 0;
             i < (_repeaterTotalColumns - (_repeaterCount % _repeaterTotalColumns));
             i++)
        {
            lt.Text += "<td></td>";
        }
        lt.Text += "</tr>";
    }

    if (_repeaterCount % _repeaterTotalColumns == 0)
    {
        lt.Text += "</tr>";
    }
}

Luego, asegúrese de que cuando enlace su Repeater esté guardando el recuento total:

 _repeaterTotalBoundItems = yourDataTable.Rows.Count;
 repeater.DataSource = yourDataTable;
 repeater.DataBind();

La salida producida sería:

<table>    
<tr><td>Bob</td>
<td>John</td>
<td>Joe</td></tr>
<tr><td>Mary</td>
<td>Mike</td><td></td></tr>
</table>

Probablemente podría mejorar el código de DataBinding , pero lo recité para dar la premisa básica de cómo lograr su objetivo. Si el DataBinding necesita realizar muchas operaciones de concat de cadena, probablemente debería cambiar a utilizar un StringBuilder y luego asignar el Literal en la última operación.

Answer 6

<asp:Repeater runat="server" DataSourceID="testds">
   <HeaderTemplate>
       <table class="items">
   </HeaderTemplate>
   <ItemTemplate>
       <%# (Container.ItemIndex + 3) % 3 == 0 ? "<tr>" : string.Empty%>
           <td><img src=''/blablabla/<%# Eval("id") %>.jpg'' alt="" /></td>
       <%# (Container.ItemIndex + 3) % 3 == 2 ? "</tr>" : string.Empty%>
   </ItemTemplate>
   <FooterTemplate>
       </table>
   </FooterTemplate>
</asp:Repeater>