Question

<p runat="server" id="pServices">
    <asp:Repeater runat="server" ID="rptServices" OnItemDataBound="rptServices_OnItemDataBound">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
            <asp:Label runat="server" ID="lblService"></asp:Label>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <asp:Label runat="server" ID="lblService"></asp:Label>
        </AlternatingItemTemplate>
    </asp:Repeater>
</p>

在我背后的代码中

private void updatePageWithUserData(User UserProfile)
{
    this.pProfile.InnerText = UserProfile.About;
    rptServices.DataSource = UserProfile.Services;
    rptServices.DataBind();
}

protected void rptServices_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Service serviceItem = (Service)e.Item.DataItem;
        ((Label)e.Item.FindControl("lblService")).Text = (serviceItem.ServiceName);

    }
}

但我得到的结果是这样的：

Software Development Web Development

相反，我希望它显示为：

Software Development Web Development

Answer 1

尝试将输出包装在div元素中。

  <ItemTemplate>
        <div>    
             <asp:Label runat="server" ID="lblService"></asp:Label>
        </div>
  </ItemTemplate>

Answer 2

请记住，在WebForms中，所有输出都是HTML，而HTML作为一种语言并不关心空格或换行符。

因此，如果您在该HTML上查看源代码，您将看到如下内容：

   <span>Software Development</span>
   <span>Web Development</span>

现在，由于HTML并不关心文件中存在换行符这一事实，因此它们会一起运行，您会看到：

软件开发Web开发

因此，为了获得空间，您需要以HTML理解的方式指示该空间。有几种方法可以做到这一点，但我会在这里建议三个：

您可以使用＆lt; br /＆gt; tag，表示应以可视方式显示换行符。如果您要使用此路线，则转发器的项目模板将如下所示：
```
<ItemTemplate>
    <asp:Label runat="server" ID="lblService"></asp:Label><br/>
</ItemTemplate>
```
SPAN标记是一个称为内联元素的HTML标记，因为它不关心行间距。如果您使用DIV标签或P标签来包装标签，那么这些标签就是块元素并且尊重间距，因此您的项目模板将如下所示：
```
<ItemTemplate>
    <div><asp:Label runat="server" ID="lblService"></asp:Label></div>
</ItemTemplate>
```
您还可以使内联元素像CSS一样使用块元素。通过将类名应用于标签然后使用CSS来设置样式，您可以获得相同的结果。这看起来像这样：
```
<ItemTemplate>
    <asp:Label runat="server" ID="lblService" CssClass="myStyle"></asp:Label>
</ItemTemplate>
```

然后是css：

   .mystyle { display: block; }

这为您提供了一些解决问题的方法，并帮助解释您的代码无效的原因。

如何让我的转发器结果逐行显示

2 个答案: