餐桌建筑物中继器的分隔符模板

问题描述

| 我之前已经建造过中继器，但是没有太多经验来处理中继器。目前，我有一台直放站，可以正确填充数据，但在一列中可以正确填充数据。我希望它是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>

    

解决方法

        中继器是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>

基本上，这就是您要实现循环的方式。     ,        分隔符模板用于定义行之间的分隔符。为什么不能在四个列中使用四个

<td/>

？

<Itemtemplate>

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

</ItemTemplate>

    ,        尝试这个

<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>

    ,        我最终使用文字作为表中断。然后根据我的计数器的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>\";

    ,        这是遵循中继器控制约定的方法。

<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();