optimize asp.net c# code for repeaters using a table

Question

on the aspx:

<table>
<tr>
<asp:Repeater ID="rptHeader" runat="server">
    <ItemTemplate>
        <th><%#Eval("Category")%></th>
    </ItemTemplate>
</asp:Repeater>
</tr>
<tr>
<asp:Repeater ID="rptContents" runat="server">
    <ItemTemplate>
        <td valign="top">
            <%#Eval("Content")%>
        </td>
    </ItemTemplate>
</asp:Repeater>
</tr>
</table>

on the code-behind:

protected void Page_Load(object sender, EventArgs e) 
{
    rptHeader.DataSource = DataSource;
    rptHeader.DataBind();
    rptContentBlocks.DataSource = DataSource;
    rptContentBlocks.DataBind();
}

The problem here is that instead of using Two repeaters, can we use only one? We actually need the header to be separated from the contents using a different table row...

Edit: changed rptHeader's ItemTemplate's html element from <td> to <th> to be a little clearer. :-)

Answer 1

An HTML table is always declared as cells nested within rows, i.e.

<table>
    <tr>
        <td>
        ...
        </td>
    </tr>
</table>

rather than

<table>
    <td>
        <tr>
        ...
        </tr>
    </td>
</table>

This means you won't be able to write a single Category followed by a single Content. You will have to repeate the Category values and then the Content values as you are already doing.

I see nothing wrong with the approach you are using. The use of 2 repeaters rather than one should be a negligible overhead.

The alternative would be to nest a table within each column. This would allow you to use just a single repeater but the resulting HTML would be rather contrived and bloated. I would not recommend this approach but somehow I can't stop myself from providing an example.

<table>
<tr>    
<asp:Repeater ID="rptHeader" runat="server">    
    <ItemTemplate>    
        <td>
            <table>
                <tr>
                    <td valign="top">    
                        <strong><%#Eval("Category")%></strong>    
                    </td>
                </tr>
                <tr>
                    <td valign="top">    
                        <%#Eval("Content")%>    
                    </td>
                </tr>
            </table>
        </td>
    </ItemTemplate>    
</asp:Repeater>    
</tr>    
</table>

Answer 2

Correct me if i misunderstood but it sounds to me like you could use only one repeater, integrating your first repeater into a HeaderTeplate tag and the second into the ItemTemplate.

Answer 3

If it's important to place the content in a table, then you could "rotate" your table into a different structure and bind on that structure. Or if it's not important that the data is in a table, you could place the items in divs and float them so they're side-by-side.

Edit:

Here's what I mean by rotating the data. If your data is currently in a structure like List<MyDataClass>, where MyDataClass is defined as something like:

class MyDataClass
{
    public string Category { get; set; }
    public string Content { get; set; }
    public int OtherField { get; set; }
}

...then the logical layout when iterating through the structure would look like this:

MyDataClass[0]: Category, Content, OtherField
MyDataClass[1]: Category, Content, OtherField
...

When rotating the data, you'd turn those rows into columns and columns into rows. For example, you could populate a List<List<string>> with code such as this:

var rotated = new List<List<string>> {
    new List<string>(), new List<string>(), new List<string>(),
};
for each (MyDataClass object in myCollection) 
{
    rotated[0].Add(object.Category);
    rotated[1].Add(object.Content);
    rotated[2].Add(object.OtherField.ToString("n0"));
}

Now your data structure looks like this:

rotated[0]: MyDataClass[0].Category, MyDataClass[1].Category, ...
rotated[1]: MyDataClass[0].Content, MyDataClass[1].Content, ...
rotated[2]: MyDataClass[0].OtherField, MyDataClass[1].OtherField, ...

Basically, you transform the data into a form that can be dropped right into your table.

Edit 2:

I actually have to do these sorts of rotations for reports often enough that I made an extension method for IEnumerable that will do the rotation in a somewhat more elegant manner. Here's the extension method:

public static class MyCollectionExtensionMethods
{
    public static IEnumerable<IEnumerable<TResult>> Rotate<TOrig, TResult>(
        this IEnumerable<TOrig> collection, 
        params Func<TOrig, TResult>[] valueSelectors)
    {
        return valueSelectors.Select(s => collection.Select(i => s(i)));
    }
}

And here's how I'd use it:

IEnumerable<IEnumerable<string>> rotated = data.Rotate(
    i => i.Category, i => i.Content, i => i.OtherField.ToString("n0"))

Answer 4

IMO it's impossible without repeater hacking. Anyway, there is a rather irregular approach that maybe works. Also you can use two foreach statements instead of repeaters.

Code

protected string[] headers = { "A", "B", "C", "D" };
protected string[] contents = { "Alpha", "Beta", "Counter", "Door" };

//string[] headers = { "A", "B", "C", "D" };
//string[] contents = { "Alpha", "Beta", "Counter", "Door" };

//DataList1.RepeatColumns = headers.Length;
//DataList1.DataSource = headers.Concat(contents);
//DataList1.DataBind();

Html markup

<table>
    <tr>
        <%foreach (string item in headers)
          { %>
          <th><%= item %></th>
        <% } %>
    </tr>
    <tr>
        <%foreach (string item in contents)
          { %>
          <td><%= item %></td>
        <% } %>
    </tr>
</table>
<!--
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal">
        <ItemTemplate>
            <%# Container.DataItem %>
        </ItemTemplate>
    </asp:DataList>
-->