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文本是凌亂的:)