Question

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

下面是我的代码和图片链接，显示了我想要实现的目标。每个订单＃都应该拥有它自己的表。

我最初使用的是转发器但由于我需要对具有相同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

您可以在此处使用嵌套的中继器，并将分组的数据绑定到用作标头的外部中继器，并将每个组中的项目列表绑定到内部中继器，如下所示：

.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作为文本很乱：）

C＃显示样式表中的列表

1 个答案: