带有图像和标签的MVC Razor下拉列表？

Question

我想知道在MVC Razor中是否有一种使用@Html.DropDownListFor助手列出图像和标签的方法？ 类似于这样：

_{(来源：dotnetspeaks.com)}

- TerryLi

---

不要使用标准的帮助程序，因为它只能呈现特定的HTML。可以看看这个 jquery image dropdown ，可能会有所帮助。 - Nope

不管是MVC还是HTML问题。这可能是SO问题的重复，将图像与选项放在下拉列表中。 - Nope

Answer 1

在MVC中没有内置这样的功能，但我相信有很多第三方组件可以使用。我个人使用dijit来完成这样的任务，但由于您标记了JQuery作为其中之一的标签，您也可以使用JQuery UI中的菜单。

- p.s.w.g

Answer 2

DropDownListFor会渲染一个<select>。这个HTML元素不支持在列表中添加图片，您需要使用JavaScript库来实现此效果。其中几个库使用<select>作为基础（它们隐藏了选择框但从中获取值）。有数十个可替换选择框的库。

请查看该教程，它将帮助您创建带有图像的下拉列表。

- Irfan

Answer 3

请点击这里。这是jQuery，只需几行代码即可轻松实现

<link rel="stylesheet" type="text/css" href="../Scripts/msdropdown/dd.css" />
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery.dd.js"></script>

    <div>
        <select name="webmenu" id="webmenu">
            <option value="calendar" title="~/Content/Images/arrow.png">Calendar</option>
            <option value="shopping_cart" title="~/Content/Images/SendtoFriend.jpg">Shopping Cart</option>
            <option value="cd" title="~/Content/Images/facebook.png">CD</option>
            <option value="email" title="~/Content/Images/Email.png">Email</option>
            <option value="faq" title="~/Content/Images/VotePositive.png">FAQ</option>
            <option value="games" title="~/Content/Images/VoteNegative.png">Games</option>
        </select>  
    </div>
<script type="text/javascript">
        $(document).ready(function () {
            $("#webmenu").msDropDown();
        });
   </script>     
    

为了让它工作，我必须做一点改动。我更喜欢使用title来显示图片。这对我很有效。

- Diego

---

这对 @Html.DropDownListFor 有什么适用性？ - Darkloki

你不应该使用 <select > @foreach (var item in Model) { <option value="@item.Name" title="data:image;base64,@System.Convert.ToBase64String(item.ShowImgName)">@item.Name</option> } </select> - Diego