C# 在样式表中显示列表

Question

我希望在 html 表格或我可以设置输出样式的东西中显示我的列表。

以下是我的代码和一张图片的链接，该图片显示了我想要实现的目标。 每个 Order # 都应该有自己的表格。

我最初使用的是中继器，但因为我需要对具有相同 ID 的项目进行分组，所以无法正确显示。

谢谢。

public class myProducts
{
    public int Order { get; set; }
    public string Date { get; set; }       
    public string Qty { get; set; }       
    public string GrandTotal { get; set; }
    public string Ship_FirstName { get; set; }
    public string Ship_LastName { get; set; }
    public string Item { get; set; }
    public string Options { get; set; }        
}


List<myProducts> products = new List<myProducts>();        
    myProducts product = new myProducts
    {
        Order = 1111,
        Date = "5/8/2017",           
        Qty = "2",
        GrandTotal = "$50.00",
        Ship_FirstName = "John",
        Ship_LastName = "Doe",
        Item = "Item 4",
        Options = "Option1, Option2, Option3, Option4",
    };
    products.Add(product);      
    product = new myProducts
    {
        Order = 1111,
        Date = "5/8/2017",
        Qty = "2",
        GrandTotal = "$50.00",
        Ship_FirstName = "John",
        Ship_LastName = "Doe",
        Item = "Item 4",
        Options = "Option1, Option2, Option3, Option4",
    };
    products.Add(product);
    product = new myProducts
    {
        Order = 34556,
        Date = "5/9/2017",
        Qty = "2",
        GrandTotal = "$200.00",
        Ship_FirstName = "John",
        Ship_LastName = "Doe",
        Item = "Item 4",
        Options = "Option1, Option2, Option3, Option4",
    };
    products.Add(product);
    product = new myProducts
    {
        Order = 143566,
        Date = "5/2/2017",
        Qty = "2",
        GrandTotal = "$100.00",
        Ship_FirstName = "John",
        Ship_LastName = "Doe",
        Item = "Item 4",
        Options = "Option1, Option2, Option3, Option4",
    };
    products.Add(product);




    var groups = products.GroupBy(x => new { x.Order, x.GrandTotal, x.Date, x.Ship_FirstName, x.Ship_LastName });

    foreach (var group in groups)
    {
       var line1 = "Order # " + group.Key.Order + " <br />" + "Order Placed: " + group.Key.Date + " <br />" + " Total: " + group.Key.GrandTotal + " <br />" + " Ship To: " + group.Key.Ship_FirstName + " " + group.Key.Ship_LastName;
        Line1.Text = Line1.Text + " <br /> " + line1.ToString() ;

        foreach (var item in group)
        {
            var line2 = " -- Item: " +item.Item + " <br /> " + "-- Options: " + item.Options;
            Line1.Text = Line1.Text + " <br /> " + line2.ToString();
        }
    }

Answer 1

这里可以使用嵌套Repeater，将分组后的数据绑定到作为header的外层repeater，将每组中的item列表绑定到内层repeater，如下图：

.aspx：

        <asp:Repeater ID="ParentRepeater" runat="server">
            <ItemTemplate>
                <table class="table-styling">
                    <thead>
                        <th>Order Placed:
                            <br />
                            <%# Eval("Date") %></th>
                        <th>Total:
                            <br />
                            <%# Eval("GrandTotal") %></th>
                        <th>Ship To:
                            <br />
                            <%# Eval("Ship_FirstName") %> <%# Eval("Ship_LastName") %></th>
                        <th>Order # <%# Eval("Order") %></th>
                    </thead>
                    <tbody>
                        <asp:Repeater runat="server" DataSource='<%# Eval("OrderItems") %>'> <%--binding item list to the inner repeater--%>
                            <ItemTemplate>
                                <tr>
                                   <td colspan="4">Qty: <%# Eval("Qty") %></td>
                                </tr>
                                <tr>
                                   <td colspan="4">Item: <%# Eval("Item") %></td>
                                </tr>
                                <tr>
                                   <td colspan="4">Options: <%# Eval("Options") %></td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                    </tbody>
                </table>
            </ItemTemplate>
        </asp:Repeater>

后面的代码：

        // grouping
        var groups = products.GroupBy(x => new
                            {
                                Order = x.Order,
                                GrandTotal = x.GrandTotal,
                                Date = x.Date,
                                Ship_FirstName = x.Ship_FirstName,
                                Ship_LastName = x.Ship_LastName
                            })
                            .Select(item => new // flatten the group
                                    {
                                        Order = item.Key.Order,
                                        GrandTotal = item.Key.GrandTotal,
                                        Date = item.Key.Date,
                                        Ship_FirstName = item.Key.Ship_FirstName,
                                        Ship_LastName = item.Key.Ship_LastName,
                                        OrderItems = item.Select(i => new { Qty=i.Qty,Item=i.Item, Options = i.Options})
                                    })
                            .ToList();
        // binding to the outer repeater
        ParentRepeater.DataSource = groups;
        ParentRepeater.DataBind();

然后你可以给Repeater添加样式。

或者，您可以在 foreach 循环中为表格生成 HTML 代码，包括自定义样式所需的 CSS 类，例如：

foreach (var group in groups)
{
    var html = new StringBuilder();
    html.Append("<table class="table-styling">");
    html.Append($"<thead><th>Order # {group.Key.Order}</th><th>Order Placed: <br />{group.Key.Date}</th><th>Total: <br />{group.Key.GrandTotal}</th><th> Ship To: <br />{group.Key.Ship_FirstName} {group.Key.Ship_LastName}</th></thead>";

    html.Append("<tbody>");
    foreach (var item in group)
    {            
        html.Append($"<tr><td colspan=\"4\">Qty: {}</td></tr>");
        html.Append($"<tr><td colspan=\"4\">Item: {item.Item}</td></tr>");
        html.Append($"<tr><td colspan=\"4\">Options: {item.Options}</td></tr>");
    }
    html.Append("</tbody></table>")

    Line1.Text = Line1.Text + " <br /> " + html.ToString();
}

然后将样式添加到您的 css 文件中，例如：

.table-styling {
    // your style
}

.table-styling th {
    // your style
}

.table-styling td {
    // your style
}

不过，我会选择第一个选项 - 将 HTML 生成为文本很麻烦 :)