c# - Insertar tabla en una sola celda dentro del repetidor

asp.net .net

Question

Estoy tratando de construir una estructura de tabla usando asp.net Repeater como este a continuación:

 column 1 | Column 2
Row1 cell1 cell2
---------------------------------------
TABLE 1 TABLE 2
----------------------------------
col1|Col2|Col3_ same column and rows are here as well
Row2 row1____|____|____
row2___ |____|_____
row3____|____|_____

Pero me quedé atascado al agregar la Tabla 1 y la Tabla 2 para la Fila 2 . No estoy seguro de cómo agregar la tabla en una sola celda dentro del Repetidor y los datos deben vincularse desde el DataTable.

Y debajo está mi código para Repeater:

<asp:Repeater ID="Repeaterp" runat="server">
<HeaderTemplate>
<table>
<tr><th>usedcount</th><th>notUsedCount</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox runat="server" ID="txtAvai" Text=''<%#Eval("Count") %>'' ReadOnly="true"></asp:TextBox></td>
<td><asp:TextBox runat="server" ID="txtConv" Text='''' ReadOnly="true"></asp:TextBox></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater

¿Alguien podría sugerir alguna idea sobre este que me lo agradecería?

Answer 1

¿Por qué molestarse en agregar las dos tablas en el segundo elemento del repetidor? No es necesario que Repeater == Table

En su lugar, en la <headertemplate> del repetidor, coloque la primera fila de la tabla maestra y la segunda fila con todas las 2 tablas que desee dentro. Luego, mantenga la <ItemTemplate> del repetidor para el resto de las filas (de la 3ª fila hacia abajo)

Puede acceder a las dos tablas a través de su código detrás o establecer valores con propiedades o Eval

Aquí es cómo puede verse su .aspx: (agregué XmlDataSource1 para el repetidor solo para hacer que el enlace funcione, también usé la propiedad <%= this.ContentString %> que declararé y estableceré en el código que se encuentra detrás)

 <asp:Repeater ID="Repeaterp" runat="server" DataSourceID="XmlDataSource1">
<HeaderTemplate>
<table>
<%--------Your Master Table--------%>
<tr>
<th>usedcount
</th>
<th>notUsedCount
</th>
</tr>
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
</tr>
<tr>
<td>
<%----------------First Inner Table------------------%>
<asp:Table ID="Table1" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<%---Add your conents as properties----%>
<%= this.ContentString %>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</td>
<td>
<%----------------Second Inner Table------------------%>
<asp:Table ID="Table2" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<%---Add your conents as properties----%>
<%= this.ContentString %>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</td>
</tr>
<%-- Closing the second row of master table --%>
<%-- Everything is completed in the repeater''s header! --%>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%--continue master table as usual--%> </td>
<td></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:Repeater>

Aquí está el código detrás, note la propiedad ContentString . y cómo acceder a las tablas en la fila 2 después de enlazar el repetidor:

 public partial class _Default : Page
{
private string strContent;
// notice the property that the tables can read as in the aspx code above
public String ContentString
{
get { return strContent; }
}
protected void Page_Load(object sender, EventArgs e)
{
strContent = "Your Content";
Repeaterp.DataBind();
// here''s how to access the two tables
Table Table1 = (Table)Repeaterp.Controls[0].FindControl("Table1");
Table Table2 = (Table)Repeaterp.Controls[0].FindControl("Table2");
}
}

Answer 2

Puede anidar diferentes controles de representación de datos asp.net (por ejemplo, asp:Repeater , asp:DataList , asp:GridView o asp:Table etc.) dentro de un control Repeater. He agregado un ejemplo rápido para hacer una estructura anidada con múltiples controles de Repetidor:

Código .Aspx:

<asp:Repeater ID="RepeaterTable" OnItemDataBound="RepeaterTable_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="PanelTextBoxes" runat="server">
<tr>
<td>
<asp:TextBox ID="txtAvai" Text=''<%# Eval("Count") %>'' runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtConv" Text='''' runat="server"></asp:TextBox>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="PanelTables" runat="server">
<tr>
<td>
<asp:Repeater ID="RepeaterTable1" OnItemDataBound="RepeaterTable1_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>T1 Col 1</th>
<th>T1 Col 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCol1" runat="server" Text=''<%# Eval("Col1") %>''></asp:Label>
</td>
<td>
<asp:Label ID="lblCol2" runat="server" Text=''<%# Eval("Col2") %>''></asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
<td>
<asp:Repeater ID="RepeaterTable2" OnItemDataBound="RepeaterTable2_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>T2 Col 1</th>
<th>T2 Col 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCol1" runat="server" Text=''<%# Eval("Col1") %>''></asp:Label>
</td>
<td>
<asp:Label ID="lblCol2" runat="server" Text=''<%# Eval("Col2") %>''></asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

.Aspx.cs Código:

DataTable TempDT = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getData();
}
}
// create DataTable 3 x 2
public void getData()
{
TempDT = new DataTable();
TempDT.Columns.Add("Col1");
TempDT.Columns.Add("Col2");
TempDT.Columns.Add("Count");
TempDT.Rows.Add("Temp", "Temp", 100);
TempDT.Rows.Add("Temp", "Temp", 100);
TempDT.Rows.Add("Temp", "Temp", 100);
// store DataTable into ViewState from lost on PostBack
ViewState["DT"] = TempDT;
RepeaterTable.DataSource = TempDT;
RepeaterTable.DataBind();
}
// Calls parent Repeater on Binding Data
protected void RepeaterTable_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
DataTable dt = new DataTable();
// get and set DataTable from ViewState
dt = ViewState["DT"] as DataTable;
Repeater RepeaterTable1 = e.Item.FindControl("RepeaterTable1") as Repeater;
Repeater RepeaterTable2 = e.Item.FindControl("RepeaterTable2") as Repeater;
RepeaterTable1.DataSource = dt;
RepeaterTable1.DataBind(); // calls RepeaterTable1_ItemDataBound event
RepeaterTable2.DataSource = dt;
RepeaterTable2.DataBind(); // // calls RepeaterTable2_ItemDataBound event
Panel PanelTextBoxes = e.Item.FindControl("PanelTextBoxes") as Panel;
Panel PanelTables = e.Item.FindControl("PanelTables") as Panel;
// show only first structure
if (e.Item.ItemIndex != 0)
{
PanelTextBoxes.Visible = false;
PanelTables.Visible = false;
}
}
}
// Calls child Repeater on Binding Data
protected void RepeaterTable1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
//.. here is code when child repeater is binding
}
}
// Calls child Repeater on Binding Data
protected void RepeaterTable2_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
//.. here is code when child repeater is binding
}
}

Una imagen de demostración es:

Actualizar:

Si no desea repetir toda la estructura, simplemente agregue el siguiente código en el evento RepeaterTable_ItemDataBound :

Panel PanelTextBoxes = e.Item.FindControl("PanelTextBoxes") as Panel;
Panel PanelTables = e.Item.FindControl("PanelTables") as Panel;
if (e.Item.ItemIndex != 0)
{
PanelTextBoxes.Visible = false;
PanelTables.Visible = false;
}

No repitiendo toda la demo de la imagen de la estructura:

Answer 3

Si realmente desea tener una tabla en la segunda fila del repetidor, puede hacer lo siguiente.

Agregue dos PlaceHolder al ItemTemplate . Uno para la segunda fila con las tablas y otro para las otras filas. Establecer sus bases de visibilidad en el ItemIndex . Tenga en cuenta que GridViews se utilizaron ya que se convierten en elementos de tabla en HTML.

<ItemTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible=''<%# Container.ItemIndex != 1 %>''>
<tr>
<td>
<asp:TextBox runat="server" ID="txtAvai" Text=''<%#Eval("Count") %>'' ReadOnly="true">
</asp:TextBox>
</td>
<td>
<asp:TextBox runat="server" ID="txtConv" Text='''' ReadOnly="true">
</asp:TextBox>
</td>
</tr>
</asp:PlaceHolder>
<asp:PlaceHolder ID="PlaceHolder2" runat="server" Visible=''<%# Container.ItemIndex == 1 %>''>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
</td>
<td>
<asp:GridView ID="GridView2" runat="server"></asp:GridView>
</td>
</tr>
</asp:PlaceHolder>
</ItemTemplate>

Si desea que la fila 3 vuelva a ser esos 2 cuadros de texto y luego la fila 4 de las tablas, etc., use Container.ItemIndex % 2 == 0 y Container.ItemIndex % 2 == 1 en la propiedad visible de PlaceHolder, porque la demostración anterior asume Sólo 2 filas en el repetidor.

A continuación, agregue el evento OnItemDataBound al Repeater.

<asp:Repeater ID="Repeaterp" runat="server" OnItemDataBound="Repeaterp_ItemDataBound">

Y luego, en el código detrás, vea si el elemento que se está enlazando es la segunda fila, busque GridViews y enlace los datos a ellos. He creado un DataTable ficticio para esta demostración, pero puede enlazar cualquier fuente con el método Repeaterp_ItemDataBound

protected void Repeaterp_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//check if it is the second row
if (e.Item.ItemIndex == 1)
{
//find the gridviews in the repeater item using findcontrol
GridView gv1 = e.Item.FindControl("GridView1") as GridView;
GridView gv2 = e.Item.FindControl("GridView2") as GridView;
//create a dummy datatable for this demo
DataTable table = new DataTable();
table.Columns.Add("Col1", typeof(int));
table.Columns.Add("Col2", typeof(string));
table.Columns.Add("Col3", typeof(string));
//add some rows to the table
table.Rows.Add(0, "Row 1", "AAA");
table.Rows.Add(1, "Row 2", "BBB");
table.Rows.Add(2, "Row 3", "CCC");
//bind the data to the gridviews in the second row
gv1.DataSource = table;
gv2.DataSource = table;
gv1.DataBind();
gv2.DataBind();
}
}

Answer 4

Te daré la lógica de cómo hacerlo en lugar de codificar, ya que estoy ocupado en estos días.

1) agregue el evento ItemDataBound a su repetidor principal (suponga que id = "parentrepeater".

2) agregue el repetidor secundario en la plantilla del elemento repetidor en el archivo aspx (suponga que id = "childrepeater".

3) en el elemento repetidor de datos de los padres, encuentre su repetidor hijo y enlace la fuente de datos.

protected void parent_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Repeater childRepeater = e.Item.FindControl("childrepeater") as Repeater;
childRepeater.DataSource = "Get Your Datasource here";
childRepeater.DataBind();
}
}

Usando este método, puede lograr un repetidor anidado multinivel ilimitado.