Looping through a list in razor and adding a separator between items

Question

I have a list of items which I want to output in a razor view. Between each item I want to add a separator line, like this:

item1 | item2 | item3

The simplest way to loop through items is with a foreach:

@foreach(var item in Model.items){
  <span>@item.Name</span> | 
}

Unfortunately this adds an extra separator line at the end of the list. Is there a simple way to skip this last separator line?

Oliver · Accepted Answer · 2017-05-25T15:49:43.817

20

You can use string.Join:

@Html.Raw(string.Join("|", model.Items.Select(s => string.Format("<span>{0}</span>", s.Name))))

Using string.Join negates the need to check for the last item.

You can mix this with a Razor @helper method for more complex markup:

@helper ComplexMarkup(ItemType item)
{ 
    <span>@item.Name</span>
}

@Html.Raw(string.Join("|", model.Items.Select(s => ComplexMarkup(s))))

You could even create a helper method to abstract the Html.Raw() and string.Join() calls:

public static HtmlString LoopWithSeparator
    (this HtmlHelper helper, string separator, IEnumerable<object> items)
{
    return new HtmlString
          (helper.Raw(string.Join(separator, items)).ToHtmlString());
}

Usage:

@Html.LoopWithSeparator("|",  model.Items.Select(s => ComplexMarkup(s)))

edited May 25 '17 at 15:49

answered Mar 18 '13 at 15:27

Oliver

8,794
2
40
60

This seems suitable only for very simple loop bodies. – Marius Mar 18 '13 at 15:33
This seems almost perfect, the only problem is the way it flows; defining the inside of the loop first, then the separator, then the loop. It is by far the best one though – Marius Mar 18 '13 at 15:44
This does not produce HTML, it only produces text – Marius Mar 18 '13 at 15:47
1

Sorry, I have added the Html.Raw method – Oliver Mar 18 '13 at 15:48

score 5 · Answer 2 · edited Feb 15 '23 at 16:02

5

Combining the other answers here with this article on inline templates, I came up with this helper method, which can be put in an extension class:

public static HelperResult Join<T>(this IEnumerable<T> list, Func<T, HelperResult> template, Func<T, HelperResult> separator)
{
    var first = true;
    var result = new HelperResult(writer =>
    {
        foreach (var item in list)
        {
            if (first == false)
                separator(item).WriteTo(writer);
            first = false;
            template(item).WriteTo(writer);
        }
    });

    return result;
}

The way to use it would then be

@Model.ListOfItems.Join(
    @<a href="@item.Href">
        @item.Name
    </a>, 
    @<text> | </text>)

This supports html in both the items and the separator.

edited Feb 15 '23 at 16:02

KyleMit

30,350
66
462
664

answered Mar 19 '13 at 09:23

Marius

57,995
32
132
151

Phil Haack did something similar, so you're in good company :). – Chris B. Behrens May 18 '18 at 17:13
Nice, great use case for [**Templated Razor delegates**](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#templated-razor-delegates)! – KyleMit Feb 20 '23 at 17:49

Shyju · Answer 3 · 2013-03-18T15:34:09.730

3

Keep a counter variable and inside the loop and check whether it is the last item or not.

@{ int counter=0; }
@foreach(var item in Model.items){
  counter++;
  <span>@item.Name</span>
  if(counter<Model.Items.Count) 
  {
    @Html.Raw("|")
  } 
}

and the short version is

@{ int counter=0; }
@foreach(var item in Model.items){
  counter++;
  <span>@item.Name</span> @(counter< Model.items.Count?"|":"")
 }

edited Mar 18 '13 at 15:34

answered Mar 18 '13 at 15:26

Shyju

214,206
104
411
497

This is how I'd do it because I've never found a way to get something like this to work: @for(int i = 0; Model.items.Count; i++) Would love to know how it's done. – sanepete Jul 05 '14 at 15:06

score 2 · Answer 4 · answered Mar 18 '13 at 15:25

Not sure if this is the simplest way, or if these is a more elegant way, but you could do something like;

@foreach ( var item in Model.items){
    <span>@item.Name</span> @(Model.items[Model.items.Count - 1] != item ? "|" : "")
}

So you are basically checking to see if the item is the last item in the list.

Not tried this code sample, so you might need to tweek it.

Looping through a list in razor and adding a separator between items

4 Answers4

Linked

Related