在 MultiSelectList ASP.NET MVC Razor 中显示 HTML 和图像答案

【问题标题】：Displaying HTML and Images in MultiSelectList ASP.NET MVC Razor在 MultiSelectList ASP.NET MVC Razor 中显示 HTML 和图像
【发布时间】：2014-02-02 13:36:38
【问题描述】：

我需要显示一个能够选择多个项目的下拉列表。我可以将它与 Dictionary 对象绑定，并且它适用于纯文本值。但是，我还需要在值中包含 img 标签。

这基本上是一个人员列表以及他们的公开头像。但是，列表显示的是 html 标记，而不是显示实际的图像。

这是我认为的剃须刀代码：

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

输出显示为：

<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

但我想实际显示显示图片，后跟名称。有什么解决办法吗？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

您面临的问题与 Razor 甚至与 ASP.NET MVC 没有严格的关系。这与 DOM 禁止您直接在标签内放置标签的事实有关（因此这是与 HTML 相关的约束）。

可以使用 CSS 样式将图像添加到您的选择列表中： How to add a images in select list

这很可能无法解决您的问题，因为样式是静态添加的，而您的列表是动态的。

总而言之，我认为您应该考虑为Html.Listbox 使用一些替代方案，例如jQuery Combobox。

【讨论】：