Question

之前我已经构建了中继器，但是没有太多使用它们来操纵表格布局的经验。目前我有一个正在填充数据的转发器，但在一列中这样做。我希望它是4列。我被告知使用分隔符模板是最好的方法。

这是我的转发器：

<asp:Repeater ID="myTestRepeater" runat="server"    
onitemdatabound="myTest_ItemDataBound">             
<Itemtemplate>
   <table cellpadding=0 width="100%" valign="top">
     <tr>
       <td valign="top" width="100%">
         <asp:HyperLink ID="lnkTest1" runat="server">
            <asp:Image ID="imgTest" runat="server" /></asp:HyperLink>
            <asp:HyperLink ID="lnkTest2" runat="server" />
            <asp:Label ID="lblCounter" runat="server />
            <asp:HyperLink ID="lnkTest3" runat="server"/>
       </td>
     </tr>
    </table>
</ItemTemplate>
</asp:Repeater>

Answer 1

转发器是ASP.NET WebForms库中最强大的控件;你只需要考虑一下使用它的最佳方法。

例如，您可以让转发器生成多行，并使用转发器生成多个列。在您的情况下，如果您希望转发器创建多个列，您可以轻松调整代码：

<asp:Repeater ID="myRepeater" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
    </HeaderTemplate>
    <ItemTemplate>
         <td>
             <span>This will be repeated for each element</span>
         </td>
    </ItemTemplate>
    <FooterTemplate>
        </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

基本上你想要实现你的循环。

Answer 2

Seperator Template用于定义行之间的分隔符。为什么你不能在四列中使用四个<td/>？

<Itemtemplate>

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

</ItemTemplate>

Answer 3

试试这个

<asp:Repeater runat="server" ID="myRepeater">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                Col 1
            </td>
            <td>
                Col 2
            </td>
            <td>
                Col 3
            </td>
            <td>
                Col 4
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table></FooterTemplate>
    <SeparatorTemplate>
        <tr>
            <td colspan="4" style="background-color: #E1E1E1">
            </td>
        </tr>
    </SeparatorTemplate>
</asp:Repeater>

Answer 4

我最终使用文字作为桌面休息。然后根据我的计数器mod来填充该文字

<asp:Repeater ID="myTestRepeater" runat="server"    
onitemdatabound="myTest_ItemDataBound">             
<Itemtemplate>
<table cellpadding=0 width="100%">
 <tr>
   <td valign="top" width="25%">
     <asp:HyperLink ID="lnkTest1" runat="server">
        <asp:Image ID="imgTest" runat="server" /></asp:HyperLink>
        <asp:HyperLink ID="lnkTest2" runat="server" />
        <asp:Label ID="lblCounter" runat="server />
        <asp:HyperLink ID="lnkTest3" runat="server"/>
   </td>
   <asp:literal id="tablebreak" runat="server"></asp:literal>
</ItemTemplate>
</asp:Repeater>

然后代码

Literal tableBreak = (Literal)e.Item.FindControl("tablebreak"); 
if (e.Item.ItemIndex % 4 == 3)
    tableBreak.Text = "</tr><tr>";

Answer 5

以下是按照转发器控制约定完成此操作的方法。

<asp:Repeater id="rptTest" runat="server">
    <HeaderTemplate>
        <table border="1">
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td>
                    <asp:Literal ID="litContent" runat="server" />
                </td>
    </ItemTemplate>
    <SeparatorTemplate>
            </tr>
            <tr>
    </SeparatorTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

代码隐藏：

int counter = 0
  , columnCount = 3;

rptTest.ItemDataBound += (rpt_sender, rpt_e) => {
    if (rpt_e.Item.ItemType == ListItemType.Item || rpt_e.Item.ItemType == ListItemType.AlternatingItem) {
        string cellData = (string)rpt_e.Item.DataItem;
        Literal litContent = (Literal)rpt_e.Item.FindControl("litContent");

        litContent.Text = cellData;
    }
    else if (rpt_e.Item.ItemType == ListItemType.Separator) {
        if (++counter % columnCount != 0)
            rpt_e.Item.Visible = false;
    }
};

rptTest.DataSource = new string[] { "Cell 1", "Cell 2", "Cell 3", "Cell 4", "Cell 5", "Cell 6", "Cell 7", "Cell 8", "Cell 9", "Cell 10" };
rptTest.DataBind();

用于表构建中继器的分隔符模板

5 个答案: