在 C# 中生成动态表内容

Question

我在创建以下内容时遇到了一些挑战：

我需要在 ASP.NET 中基于 xml 内容生成许多固定大小的 2 列和 4 行表。所以我的 html 容器是一个固定大小的 2 列 x 4 行表格的倍数。在每个表中，每列将保存 xml 中的一个 [item]，其中该列的顶部单元格是 [category] ​​标记，下面的 3 个单元格保存 [make#] 标记；因此，该列中总共 4 行，每个 [make#] 对应一个。所以一个 Table 可以容纳 2 个 [item] ；每列一个。

假设我的源来自 XML 文件：

<items>
<item>
<category>Cat 1</category>
<make1>101</make1>
<make2>102</make2>
<make3>103</make3>
</item>
<item>
<category>Cat 2</category>
<make1>201</make1>
<make2>202</make2>
<make3>203</make3>
</item>
<item>
<category>Cat 3</category>
<make1>301</make1>
<make2>302</make2>
<make3>303</make3>
</item>
<item>
<category>Cat 4</category>
<make1>401</make1>
<make2></make2>
<make3></make3>
</item>
<item>
<category>Cat 5</category>
<make1>501</make1>
<make2>502</make2>
<make3</make3>
</item>
</items>

并且我想要的 5 个类别的输出（其中每个类别在 html 中最多可以有 3 个项目）是：

<table> 
<tr> <td>Cat 1</td> <td>Cat 2</td> </tr> 
<tr> <td>101</td> <td>201</td> </tr> 
<tr> <td>102</td> <td>202</td> </tr> 
<tr> <td>103</td> <td>203</td> </tr> 
</table>
<table> 
<tr> <td>Cat 3</td> <td>Cat 4</td> </tr> 
<tr> <td>301</td> <td>401</td> </tr> 
<tr> <td>302</td> <td>&nbsp;</td> </tr> 
<tr> <td>303</td> <td>&nbsp;</td> </tr> 
</table>
<table> 
<tr> <td>Cat 5</td> <td>&nbsp;</td> </tr> 
<tr> <td>501</td> <td>&nbsp;</td> </tr> 
<tr> <td>502</td> <td>&nbsp;</td> </tr> 
<tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> 
</table>

我将如何实现这一点？

请注意，我需要表格，因为我正在使用带有具有该结构的硬编码轮播的轮播......

Answer 1

经过一番讨论，我认为我们得出的结论是，中继器方法不是最好的路线。这里的基本问题是如何并排输入两个实体。有一个为此构建的 ASP.NET 控件：DataList。

使用DataList，您可以设置重复项目的最大数量以及重复项目的方向（水平/垂直）。

因此，您需要将以下 DataList 代码添加到您的 aspx 页面中：

<asp:DataList ID="DataList1" runat="server" DataSourceID="XmlDataSource1" RepeatColumns="2" RepeatDirection="Horizontal">
    <HeaderTemplate>Items</HeaderTemplate>
    <ItemTemplate>
        <table border=1>
            <tr>
                <td>
                    <%# XPath("category")%>
                </td>
            </tr>
            <tr>
                <td>
                    <%# XPath("make1")%>
                </td>
            </tr>
            <tr>
                <td>
                    <%# XPath("make2")%>
                </td>
            </tr>
            <tr>
                <td>
                    <%# XPath("make3")%>
                </td>
            </tr>
        </table>

    </ItemTemplate>
</asp:DataList>

这里的关键是每个项目的数据都绑定在 中。然后，DataList 本身负责根据标志 RepeatColumns="2" 和 RepeatDirection="Horizo​​ntal" 排列每个项目。

一些快速的 魔法：

<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
    XPath="//items/item">
</asp:XmlDataSource>

其中 XPath="//items/item" 将 XmlDataSource 指向 xml 中每个实体的位置。它通过 DataList 本身上的以下标记绑定到 DataList： DataSourceID="XmlDataSource1"

在代码隐藏文件中，我作了作弊，只是将 XML 作为字符串提供：

 this.XmlDataSource1.Data = @";
                                  <项目>
                                      <类别>类别 1
                                      101
                                      102
                                      103
                                  
                                  <项目>
                                      <类别>类别 2
                                      201
                                      202
                                      203
                                  
                                  <项目>
                                      <类别>类别 3
                                      301
                                      302
                                      303
                                  
                                  <项目>
                                      <类别>类别 4
                                      401
                                      
                                      
                                  
                                  <项目>
                                      <类别>Cat 5
                                      501
                                      502
                                      
                                  
                                  ";

她工作了！

顺便说一句，我永远不会原谅你缺少“>”在您原始帖子的 XML 中。找到它让我发疯。 :)

现在，假设理想情况下完成所有这些操作的最佳方法是将 xml 反序列化为 .NET 类并以正确的方式绑定所有内容（即：数据的代码隐藏绑定等），但总体思路是这样的。

关于嵌套表问题的OP评论：

GridList有一个名为RepeatLayout的属性。将此属性设置为 RepeatLayout.Flow 将使用其他元素而不是表。来自 MSDN：

显示的项目没有表结构。渲染的标记由 span 元素组成，项目由 br 元素分隔。 此处每个枚举的布局

另外，本文还讨论了 DataGrid、DataList 和 Repeater 之间的区别 MSDN

旧答案：

我正在考虑接受两个项目实体作为参数的用户控件。

因此，如果您有一个名为 Item: 的类，

public class Item
{
    public string Category{get;set;}
    public List<string> Makes { get; set; }
}

并且您的 UserControl 如下所示：
(ASPX)

<table> 
<tr>
    <td><asp:Label ID="lblCategory1" runat="server" /></td>
    <td><asp:Label ID="lblCategory2" runat="server" /></td>
</tr> 
<asp:Repeater ID="rptMakes" runat="server">
    <HeaderTemplate><tr></tr></HeaderTemplate>
    <ItemTemplate>
        <td>
        <asp:Label ID="lblMake1" runat="server" />
        </td>
        <td>
        <asp:Label ID="lblMake2" runat="server" />
        </td>
    </ItemTemplate>
    <SeparatorTemplate></tr><tr></SeparatorTemplate>
    <FooterTemplate>
        </tr>
    </FooterTemplate>
</asp:Repeater>
</table>

并在 .cs 页面上像这样：

private Item Item2;

protected override void OnInit(EventArgs e)
{
    this.rptMakes.ItemDataBound += new RepeaterItemEventHandler(rptMakes_ItemDataBound);
    base.OnInit(e);
}

void rptMakes_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        ((Label)e.Item.FindControl("lblMake1")).Text = e.Item.DataItem.ToString();
        if (this.Item2 != null)
        {
            ((Label)e.Item.FindControl("lblMake2")).Text = this.Item2.Makes[e.Item.ItemIndex];
        }
        else
        {
            ((Label)e.Item.FindControl("lblMake2")).Text = " ";
        }
    }
}

protected void Page_Load(object sender, EventArgs e)
{

}
public void Populate(Item item1, Item item2)
{
    this.lblCategory1.Text = item1.Category;
    if (item2 != null)
    {
        this.lblCategory2.Text = item2.Category;
    }
    else
    {
        this.lblCategory2.Text = " ";
    }
    this.Item2 = item2;
    this.rptMakes.DataSource = item1.Makes;
    this.rptMakes.DataBind();
}

从那里，只需迭代 aspx 页面上的原始 Item 实体列表并将每两个实体传递到 UC 即可。