C＃在样式表中显示列表

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

然后，您可以将样式添加到中继器。

或者，你可以生成在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文本是凌乱的:)