ASP.NET 4.0 - 動的テーブルの生成とCssスタイルの動的アプリケーション

Question

私は以下のヘルパークラスを使用して、<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

CSSのスタイルで表のclass属性を設定しているため！あなたはcss-class-nameで設定するべきです。参照：

としてレンダリングされます

table.CssClass = TableStyle; 

：代わりに、あなたはヘルパークラスのCssStyleCollectionプロパティを使用する（例えば、それCssStylesに名前を付ける）、または以下のコードを使用することができます

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

：

に

// 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"> 

これで問題が解決します。よろしく。