0

I need to show a drop down list with ability to select multiple items. I am able to bind this with a Dictionary object and it works fine with plain text values. However, i need to include img tags as well in the values.

This is basically a list of people along with their public profile picture. However, the list shows the html tags instead of showing the actual image.

Here is the razor code in my view:

@Html.ListBox("MyFriends", new MultiSelectList(Model.Connections.Distinct(), "key", "value"), new { @class = "list-item"})

The output is shown as:

<img src="http://localhost/api/person/1211/dp" title="avatar" /> John Smith
<img src="http://localhost/api/person/1212/dp" title="avatar" /> Person Two
<img src="http://localhost/api/person/1213/dp" title="avatar" /> Person 3
<img src="http://localhost/api/person/1214/dp" title="avatar" /> Rick Rude

But i want to actually show display picture followed by the name. Any solution?

freakyroach
  • 462
  • 2
  • 14

1 Answers1

1

The problem you are facing is not strictly connected with Razor or even with ASP.NET MVC. It is connected with the fact that DOM prohibits you from placnig an tag directly inside tag (so it's an HTML-related constraint).

There is a possibility to use CSS styling to add images to your select list: How to add a images in select list

This will though most probably not solve your problem because the styles are added statically, whereas your list is dynamic.

All in all I think you should consider using some alternative for Html.Listbox like for example jQuery Combobox.

Community
  • 1
  • 1
Paweł Bejger
  • 6,176
  • 21
  • 26