C# Liste in einer formatierten Tabelle anzeigen

Question

Ich möchte meine Liste in einer HTML-Tabelle anzeigen oder so, dass ich die Ausgabe formatieren kann.

Unten ist mein Code und ein Link zu einem Bild, das zeigt, was ich erreichen möchte. Jede Bestellnummer sollte eine eigene Tabelle haben.

Ich verwendete ursprünglich einen Repeater, aber weil ich Artikel mit der gleichen ID gruppieren muss, konnte ich nicht richtig angezeigt werden.

Danke.

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

Sie verschachtelte Wiederholer hier verwenden können und binden die gruppierten Daten an den äußeren Repeater, der als Header dient, und die Liste der Elemente in jeder Gruppe an den inneren Repeater, wie unten dargestellt:

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> 

-Code hinter:

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

Dann können Sie dem Repeater Styling hinzufügen.

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

und fügen Sie dann Styling zu Ihrer CSS-Datei, wie:

.table-styling { 
    // your style 
} 

.table-styling th { 
    // your style 
} 

.table-styling td { 
    // your style 
} 

Alternativ können Sie HTML-Code für Tabellen in der foreach-Schleife, einschließlich der notwendigen CSS-Klassen für individuelle Styling, zum Beispiel erzeugen

Ich würde für die erste Option obwohl - Generierung von HTML als Text ist chaotisch :)