ASP.net add text after Html.DisplayFor

Question

I am trying to add some text after @Html.DisplayFor() helper in ASP.net MVC 5 view, but can't get it to work.

My code:

@foreach (var item in Model.Changes)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Value)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Date)
        </td>
        <td>
            @foreach (var tag in item.Tags)
            {
                @Html.DisplayFor(modelItem => tag.Name)
            }
        </td>

    </tr>
    }

The problem is the Tags IEnumerable. It renders like this: What I get

I want to separate tags so that they are readable easily (eg. "Tag1, Tag2, ...") or with pipe sign (" | "). I guess this is easily done, but as I can't C#/ASP well I can't get it to work. Tried adding text just after @Html.DisplayFor(modelItem => tag.Name) but this gives me compilation error.

If this changes anything, Tags are added with Tag-it.

You could wrap each tag.Name in an element styled as inline-block and add padding or margin — user3559349
– user3559349, Commented Mar 23, 2015 at 9:51

Andre · Accepted Answer · 2015-03-23 09:53:06Z

7

One solution could be:

<td>
    @foreach (var tag in item.Tags)
    {
        @Html.DisplayFor(modelItem => tag.Name)<text>|</text>
    }
</td>

answered Mar 23, 2015 at 9:53

Andre

7221 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asunez Over a year ago

This works great, I'll mark your post as an answer because it does perfectly what I asked for.

Andre Over a year ago

wunderfull. can you please mark my answer as correct?

Aleksandr Ivanov Over a year ago

The problem with this solution is that you will have extra "|" at the end

Electric Sheep · Accepted Answer · 2015-03-23 10:45:31Z

1

I would move the display logic to your model by creating a new property in your model:

@using System.Linq;

...

public TagDisplayText
{
    get
    {
        return string.Join(", ", Tags.Select(x => x.Name));
    }
}

and then call this property from your view:

<td>
    @Html.DisplayFor(m => m.TagDisplayText)
</td>

answered Mar 23, 2015 at 10:45

Electric Sheep

4,4201 gold badge31 silver badges40 bronze badges

Comments

Vinod · Accepted Answer · 2015-03-23 10:47:21Z

0

Going further down the line. You can also do like this. If you want to apply css / modify dom element.

<span class="sometext">@Html.DisplayFor(modelItem => tag.Name) some text </span>

answered Mar 23, 2015 at 10:47

Vinod

5662 gold badges11 silver badges28 bronze badges

Comments

Aleksandr Ivanov · Accepted Answer · 2015-03-23 12:00:37Z

You should consider using display templates.

To create a display template you will need to add new view in Views/Shared/DisplayTemplates folder. In your example you can create view named "Tags" that could look something like that:

@model IEnumerable<Tag>

@{
    var tags = Model != null ? Model.ToList() : new List<Tag>();
    var tagsCount = tags.Count;
}

@for (int i = 0; i < tagsCount; i++)
{
    @tags[i].Name
    if (i < tagsCount - 1)
    {
        <text> | </text>
    }
}

And then in your main view:

@Html.DisplayFor(x => item.Tags, "Tags")

You can also think about making such code more generic and reusable. Views can't have generic models, so you can create a wrapper for that:

 public interface IDisplayItem
 {
     dynamic Item { get; }
     Func<string> DisplayValueFn { get; }
 }

 public class DisplayItem<T> : IDisplayItem
 {
     public T Item { get; set; }

     dynamic IDisplayItem.Item
     {
         get { return Item; }
     }

     public Func<T, string> DisplayValueFn { get; set; }

     Func<string> IDisplayItem.DisplayValueFn
     {
         get { return () => DisplayValueFn(Item); }
     }
 }

Then display template will look like that:

@model IEnumerable<IDisplayItem>

@{
    var items = Model != null ? Model.ToList() : new List<IDisplayItem>();
    var itemsCount = items.Count;
}

@for (int i = 0; i < itemsCount; i++)
{
    @items[i].DisplayValueFn()
    if (i < itemsCount - 1)
    {
        <text> | </text>
    }
}

And you can show tags from your example this way:

var tags = item.Tags
    .Select(tag => new DisplayItem<Tag>
    {
        Item = tag,
        DisplayValueFn = x => x.Name
    });

@Html.DisplayFor(x => tags, "Collection")

Collectives™ on Stack Overflow

ASP.net add text after Html.DisplayFor

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related