c# - Best way to handle table with dynamic columns

Question

I usually deal with Repeater to generate tables in my asp.net pages, but now I need to handle dynamic columns in my table, so I wonder if there is a common approach to solve this issue using web controls.

I've never used GridView, so I don't know if this is better to render tables with dynamic columns? Can you suggest me wich is the more appropriate approach? Is there a way to achieve this using Repeater?

Answer 1

You could a GridView with AutoGenerateColumns set to true. It would inspect and add the columns in your DataSource

<asp:sqldatasource id="CustomersSource"
  selectcommand="SELECT CustomerID, CompanyName, FirstName, LastName FROM SalesLT.Customer"
  connectionstring="<%$ ConnectionStrings:AWLTConnectionString %>" 
  runat="server"/>

<asp:gridview id="CustomersGridView" 
  datasourceid="CustomersSource" 
  autogeneratecolumns="True"
  emptydatatext="No data available." 
  allowpaging="True" 
  runat="server" DataKeyNames="CustomerID">
</asp:gridview>

Answer 2

Here's a quick hack to do this if you must use Repeater:

In the .aspx:

    <asp:Repeater ID='rptr' runat='server'>
        <HeaderTemplate>
            <table>
                <thead>
                  <tr>
                    <th>
                        Always visible header col
                    </th>
                    <th id='thHidable' runat='server' class='hideable'>
                        Hideable header col
                    </th>
                  </tr>
                </thead>
                <tbody>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    Repeated col
                </td>
                <td id='tdHideable' runat='server' class='hideable'>
                    Hideable repeated col
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </tbody></table>
        </FooterTemplate>
    </asp:Repeater>

In the code behind (assuming C# used):

    protected override void Page_Init()
    {
        this.rptr.ItemDataBound += new RepeaterItemEventHandler(rptr_ItemDataBound);
    }
    void rptr_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = (RepeaterItem)e.Item;
        if (item.ItemType == ListItemType.Header)
        {
            HtmlTableCell thHidable = (HtmlTableCell)item.FindControl("thHidable");
            if (hideCondition)
            {
                // thHidable.Visible = false; // do not render, not usable by client script (use this approach to prevent data from being sent to client)
                thHidable.Style["display"] = "none"; // rendered hidden, can be dynamically shown/hidden by client script
            }
        }
        else if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
        {
            HtmlTableCell tdHideable = (HtmlTableCell)item.FindControl("tdHideable");
            if (hideCondition)
            {
                // tdHideable.Visible = false; // do not render, not usable by client script (use this approach to prevent data from being sent to client)
                tdHideable.Style["display"] = "none"; // rendered hidden, can be dynamically shown/hidden by client script
            }
        }
    }

(optional) If you want to dynamically show column on client side (assuming it was rendered), using jQuery (for brevity):

$(".hideable").show();

Answer 3

知道你想如何处理这种情况是非常重要的。

情况 1： 您有一个现有的表，并且不时添加列（虽然这不是很实用），您可以直接使用 GridView 并将 AutoGenerateColumns 绑定属性设置为 true。

情况2

您可以创建自己的 HTmlHelper 类来处理表格。为此，您可以访问以下帖子：

如何从对象列表创建 MVC HtmlHelper 表

如果您使用的是 MVC。