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

因为你正在为css-styles设置表的class属性！你应该用css-class-name来设置它。参见：

table.CssClass = TableStyle;

将呈现为：

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

相反，您可以将CssStyleCollection属性用于helper-class（例如将其命名为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">

这将解决您的问题。问候。

ASP.NET 4.0 - 动态表生成和Css样式的动态应用

1 个答案: