带有 SeparatorTemplate 的中继器控制答案

【问题标题】：Repeater Control With SeparatorTemplate带有 SeparatorTemplate 的中继器控制
【发布时间】：2013-02-01 16:07:41
【问题描述】：

如何在中继器控件的每一行之后创建水平线？我认为我应该使用“SeparatorTemplate”，我试过但没有奏效。你能告诉我把分隔符放在代码中的什么地方，让每一行都分开吗？

这是我的代码

<asp:Repeater ID="EmployeesRepeater" runat="server">
        <HeaderTemplate>
            <table>
                <tr>
                    <th>
                       First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Title
                    </th>
                    <th>
                        HomePhone
                    </th>
                </tr>           
        </HeaderTemplate>
        <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("FirstName") %>
                    </td>
                    <td>
                        <%#Eval("LastName") %>
                    </td>
                    <td>
                        <%#Eval("Title") %>
                    </td>
                    <td>
                        <%#Eval("HomePhone") %>
                    </td>
                </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>    
        </FooterTemplate>

【问题讨论】：

ItemTemplate的最后一行不是分割点吗？

标签： c# asp.net templates separator

【解决方案1】：

您可以在ItemTemplate 中添加一个带有<hr> 的新行。

例如：

<ItemTemplate>
    <tr>
        <td>
            <%#Eval("FirstName") %>
        </td>
        <td>
            <%#Eval("LastName") %>
        </td>
        <td>
            <%#Eval("Title") %>
        </td>
        <td>
            <%#Eval("HomePhone") %>
        </td>
    </tr>
    <tr>
        <td colspan="4"><hr></td>
    </tr>
</ItemTemplate>

或使用SeparatorTemplate:

<SeparatorTemplate>
    <tr>
        <td colspan="4"><hr></td>
    </tr>
</SeparatorTemplate>

这里有一些关于SeperatorTemplate 工作原理的documentation。

编辑：SeparatorTemplate 非常适合您需要进行摘要格式化或需要更多 HTML、控件、绑定等的操作。如果您只想添加行，您应该只需使用 css 适当地设置行的样式以获得所需的输出。

【讨论】：

这项工作。你怎么看垂直线？我该怎么做？
@TheChampp 不确定您所说的垂直线是什么意思。您可以在tr 或td 上添加边框以获得垂直线效果。
我在“”标签上输入了border:“1px solid red”，但在“
”和“ ”标签上却无效。奇怪...

”和“	”标签上却无效。奇怪...

【解决方案2】：

如果你给tr元素设置了合适的样式就足够了。无需为添加分隔符而创建额外的行。

例如：

<ItemTemplate>
    <tr class="item">
   ....

style
{
    .item {
        border-bottom:1px solid #cfcfcf;
     }
}

【讨论】：