How do i get my repeater results to appear line by

问题:

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

And in the code behind I have

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

    }
}

But the result I get is like this:

Software Development Web Development

Instead I want it to appear as:

Software Development Web Development

回答1:

Remember that in WebForms, all of your output is HTML, and HTML as a language does not care about spaces or line breaks.

So, if you view source on that HTML you will see something like this:

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

Now, since HTML does not care about the fact that there is a line break in the file, they run together and you see:

Software Development Web Development

So, in order to get the space, you need to indicate that space in a way that HTML understands. There are a few ways of doing that, but I'll suggest three for you here:

1. You can use the <br/> tag, which indicates that a line break should be visually displayed. If you were to go this route, your repeater's item template would look like this:

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

2. SPAN tags are an HTML tag called an inline element, because it does not care about line spacing. If you used a DIV tag or a P tag to wrap your label in, those tags are block elements and do respect spacing, so your item template would look like this:

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

3. You can also make an inline element act like a block element with CSS. By applying a classname to the label and then using CSS to style it, you could get the same result. That would look like this:

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

and then the css:

   .mystyle { display: block; }

That gives you a few different ways to solve the problem and helps explain why your code wasn't working.

回答2:

Try wrapping your output in a div element.

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