Question

我可以在选项标签内部添加标签，并且它可以工作（不知道它是否是有效的HTML4 / 5，但它至少在Firefox中有效）：

<select>
  <option><i class="icon-plus"></i>Add item</option>
  <option><i class="icon-remove"></i>Remove item</option>
  <option><i class="icon-edit"></i>Edit item</option>
</select>

我在这些选项标签中放置了Bootstrap / FontAwesome webfont图标。

但我正在使用MVC4 / Razor，我无法获得正确的语法来使其正确渲染。它编码所有内部标记，我得到<，>等

这就是我正在做的事情：

// first I make a new list with the icons inside
var items = Model.Items.Select(q => new SelectListItem() {
  Selected = q.Selected,
  Text = "<i class=\"icon-add\"></i>" + q.Text,
  Value = q.Value
  });
// then render the dropdown
Html.DropDownListFor(m => m.SelectedItem, items, "All")

我该如何运作？

Answer 1

你无法开箱即用。根据您需要使用它的频率 - 我个人建议通过循环手动完成。

如果需要，可以为下拉列表编写扩展方法/帮助程序。

我在这里找到了一个类似的例子，虽然这个人用它来自定义“选择”标签，但你需要自定义“选项”标签：Fun (?) with Linq Expressions in extension methods

希望这会有所帮助。

Answer 2

好的，我选择了一个简单易用的选项 ...

只需将FontAwesome类放在<option>标记上，而不是嵌套的子<i>标记。这样标记就有效了。

当然这需要在循环中手动完成。

如何强制MVC 4 / Razor在SelectListItem中呈现标签？

2 个答案: