ASP.NET 4.0 - 動態表格生成和Css風格的動態應用

Question

我有以下Helper類來動態生成<ASP:Table>控件。

using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

namespace Test 
{ 
    public class TableDisplay10X2 
    { 
     # region public properties 

     # region Styles 

     public string TableStyle { get; set; } 
     public string HeaderStyle { get; set; } 
     public string CommonHeaderColumnStyle { get; set; } 
     public string CommonRowStyle { get; set; } 
     public string CommonColumnStyle { get; set; } 
     public string[] HeaderColumnStyles { get; set; } 
     public string[] RowStyles { get; set; } 
     public string[,] ColumnStyles { get; set; } 

     # endregion Styles 

     public IList<RowInfo> TableRows { get; set; } 

     # endregion 

     public TableDisplay10X2() 
     { 
      HeaderColumnStyles = new string[2]; 
      RowStyles = new string[10]; 
      ColumnStyles = new string[10, 2]; 
      TableRows = new List<RowInfo>(); 
     }  

     public Table Create(Panel panel) 
     { 
      var table = new Table(); 
      panel.Controls.Add(table); 
      table.CssClass = TableStyle; 

      // Add Header 
      var headRow = new TableHeaderRow(); 
      var leftHeaderColumn = new TableHeaderCell(); 
      var rightHeaderColumn = new TableHeaderCell(); 
      headRow.Cells.Add(leftHeaderColumn); 
      headRow.Cells.Add(rightHeaderColumn); 
      table.Rows.Add(headRow); 
      headRow.CssClass = HeaderStyle;    
      leftHeaderColumn.CssClass = (HeaderColumnStyles[0] != null) ? HeaderColumnStyles[0] : CommonHeaderColumnStyle;    
      rightHeaderColumn.CssClass = (HeaderColumnStyles[1] != null) ? HeaderColumnStyles[1] : CommonHeaderColumnStyle;    

      for (int count = 0; count < TableRows.Count; count++) 
      { 
       if (TableRows[count] != null) 
       { 
        TableRow tr = new TableRow(); 
        TableCell leftCell = new TableCell(); 
        TableCell rightCell = new TableCell(); 
        tr.Cells.Add(leftCell); 
        tr.Cells.Add(rightCell); 
        table.Rows.Add(tr); 

        leftCell.Text = TableRows[count].LeftColumn; 
        rightCell.Text = TableRows[count].RightColumn; 
        tr.CssClass = (RowStyles[count] != null) ? RowStyles[count] : CommonRowStyle; 
        leftCell.CssClass = (ColumnStyles[count, 0] != null) ? ColumnStyles[count, 0] : CommonColumnStyle;          
        rightCell.CssClass = (ColumnStyles[count, 1] != null) ? ColumnStyles[count, 1] : CommonColumnStyle; 
       } 
      } 


      return table; 
     } 
    } 

    public class RowInfo 
    { 
     public string LeftColumn { get; set; } 
     public string RightColumn { get; set; } 
    } 
} 

，並使用下面的代碼

var presidentTable = new TableDisplay10X2(); 
      presidentTable.TableStyle = "Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px"; 
      presidentTable.TableRows.Add(new RowInfo { LeftColumn = "President", RightColumn= "Mr D R" }); 
      presidentTable.TableRows.Add(new RowInfo { LeftColumn = "Address", RightColumn = "Add 1" }); 
      presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 2" }); 
      presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 3" }); 
      presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 4" }); 
      presidentTable.Create(panelBoardMembers); 

是越來越創建表，但沒有得到應用該樣式創建表格控件。什麼是問題？

Answer 1

由於您正在設置表格的class屬性，所以請使用css-styles！而你應該用css-class-name來設置它。請參閱：

table.CssClass = TableStyle; 

將被渲染爲：

<table class="Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px"> 

相反，你可以使用一個CssStyleCollection屬性的輔助類（例如命名爲CssStyles）或者使用下面的代碼：

// table.CssClass = TableStyle; YOU SHOULD REMOVE THIS LINE!!! 
table.Attributes.Add("style", TableStyle); 

將呈現爲：

<table style="Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px"> 

這將解決您的問題。問候。