asp.net - 从后面的代码在 ItemTemplate 中添加 HTML

Question

我有一个中继器控件，它列出了数据库中的 10 条记录。我想要做的是将这 10 条记录分成两列，我不知道该怎么做。
问题是我不能使用 <%# if (Container.ItemIndex == 0) %>。
我尝试使用 ItemDataBound 来操作数据，但我不知道如何使中继器控件将生成的数据显示回浏览器。

任何帮助或想法都可以。
希望你明白我要说什么。
谢谢。

Answer 1

你可以用javascript来做到这一点。或者您可以创建一个包装类来完成工作。这是一个例子（非javascript）：

aspx：

<asp:Repeater runat="server" ID="myRepeater">
    <HeaderTemplate>
        <table>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%#Eval("FirstColumnData.DisplayString") %>
            </td>
            <td>
                <%#Eval("SecondColumnData.DisplayString") %>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

后面的代码：

// Say, this is your data item class

public class MyData
{
    public string Field1;
    public int Field2;


    public string DisplayString
    {
        get { return Field1 + " " + Field2; }
    }
}

// Wrap it

public class TwoColumnWrappedData
{
    public MyData FirstColumnData { get; set; }
    public MyData SecondColumnData { get; set; }
}

// Convert your datasource to wrapped datasource

private IEnumerable<TwoColumnWrappedData> GetWrappedData(IEnumerable<MyData> dataSource)
{
    TwoColumnWrappedData wrappedData = null;
    foreach (var myData in dataSource)
    {
        if (wrappedData == null)
        {
            wrappedData = new TwoColumnWrappedData();
            wrappedData.FirstColumnData = myData;
        }
        else
        {
            wrappedData.SecondColumnData = myData;
            yield return wrappedData;
            wrappedData = null;
        }
    }
}

// Now data bind like this

...

var dataSource = Enumerable.Range(1, 10).Select(i => new MyData { Field1 = "Item", Field2 = i }); // This is just an example; Populate it with actual data
myRepeater.DataSource = GetWrappedData(dataSource);
myRepeater.DataBind();

...

Answer 2

<asp:Repeater runat="server">
    <ItemTemplate>
        <div class="<%# Container.ItemIndex % 2 == 0 ? "left" : "right"%>">
            <%# Eval("data") %>
        </div>
    </ItemTemplate>
</asp:Repeater>

将输出：

<div class="left">...</div><div class="right">...</div>
<div class="left">...</div><div class="right">...</div>
<div class="left">...</div>

现在您只需要一些 CSS（这显然只是简化的示例）：

.left {float:left;width:50%;}
.right {float:right;width:50%;}