在中继器内的单个单元格中插入表格答案

【问题标题】：Insert table in a single cell inside repeater在中继器内的单个单元格中插入表格
【发布时间】：2018-05-22 15:48:50
【问题描述】：

我正在尝试使用 asp.net 中继器构建一个表结构，如下所示：

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

但我在为 Row 2 添加 Table 1 和 Table 2 时遇到了困难。我不确定如何在中继器内的单个单元格中添加表格，并且数据需要从 DataTable 绑定。

下面是我的中继器代码：

<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

任何人都可以就这个问题提出任何想法，非常感谢我吗？

【问题讨论】：

标签： c# asp.net .net gridview repeater

【解决方案1】：

您可以在 Repeater 控件中嵌套不同的 asp.net 数据表示控件（例如 asp:Repeater、asp:DataList、asp:GridView 或 asp:Table 等）。我添加了一个快速示例，用于制作具有多个中继器控件的嵌套结构：

.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 代码：

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

演示图像是：

更新：

如果您不想重复整个结构，只需在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;
}

不重复整个结构图演示：

【讨论】：

【解决方案2】：

为什么要在转发器的第二项中添加这两个表？不需要Repeater==Table

相反，在中继器的<headertemplate> 中放置主表的第一行，第二行包含您想要的所有 2 个表。然后将中继器的<ItemTemplate> 保留在其余行（从第 3 行向下）

您可以通过后面的代码访问这两个表或使用属性或 Eval 设置值

您的 .aspx 可能如下所示：（我为转发器添加了XmlDataSource1，只是为了使绑定有效，我还使用了属性<%= this.ContentString %>，我将在后面的代码中声明并设置它）

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

这是后面的代码，注意属性ContentString。以及绑定转发器后如何访问第2行的表：

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

【讨论】：

刚刚更新了我的答案，我制作了 2 个内部表格 asp:Table 并从后面的代码中访问它们。此外，我向转发器添加了一个属性，作为使转发器动态化的另一种方式。跨度>

【解决方案3】：

如果你真的想在转发器的第二行有一个表，你可以这样做。

将两个PlaceHolder 添加到ItemTemplate。一个用于带有表格的第二行，一个用于其他行。根据ItemIndex 设置它们的可见性。请注意，使用 GridView 是因为它们成为 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>

如果您希望第 3 行再次成为这 2 个文本框，然后第 4 行是表格等，请在 PlaceHolder 的可见属性中使用 Container.ItemIndex % 2 == 0 和 Container.ItemIndex % 2 == 1，因为上面的演示假定中继器中只有 2 行。

接下来，将OnItemDataBound 事件添加到中继器。

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

然后在后面的代码中查看被绑定的项目是否是第二行，找到 GridView 并将数据绑定到它们。我为此演示创建了一个虚拟DataTable，但您可以在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();
    }
}

【讨论】：

【解决方案4】：

我会告诉你如何做的逻辑，而不是因为我最近很忙。

1) 将 ItemDataBound 事件添加到您的父中继器（假设 id="parentrepeater"。

2) 在 aspx 文件中的中继器项目模板中添加子中继器（假设 id="childrepeater"。

3) 在父级中继器ItemDataBound中，找到你的子级中继器并绑定数据源。

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

使用此方法，可以实现无限多级嵌套中继器。

【讨论】：