7

I was wondering is there a way to list image and label using @Html.DropDownListFor helper in MVC razor? Something like this:

a busy cat
(source: dotnetspeaks.com)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
TerryLi
  • 221
  • 1
  • 7
  • 13
  • Not with the standard helper as it only renders a specific set of HTML. Have a look at [**jquery image dropdown**](http://www.marghoobsuleman.com/jquery-image-dropdown) that might help. – Nope Mar 11 '13 at 22:25
  • Regardless of MVC this is going to be a HTML issue. Possible duplicate of SO issue [**putting-images-with-options-in-a-dropdown-list**](http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) then ? – Nope Mar 11 '13 at 22:29

3 Answers3

2

There's nothing like this built into MVC, but I'm sure there are many 3rd-party components. I personally use dijit for this kind of thing, but since you have JQuery as one of your tags, you could probably use the Menu from JQuery UI.

p.s.w.g
  • 146,324
  • 30
  • 291
  • 331
2

DropDownListFor renders a <select>. This HTML element does not support an image in the list. you will need to use a JavaScript library to get this effect. several of the libraries use a <select> as the basis (they hide the select but get values form it.) there are dozens of select replacement libraries.

Have a look at this tutorial, this will help you creating drop down list with images.

sampathsris
  • 21,564
  • 12
  • 71
  • 98
Irfan
  • 49
  • 6
-3

look here. It is jquery, it is easy to implement with a few lines

<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>

In order to work. I have to changed a Little.. I prefer to use title to show the image. It Works to me

Diego
  • 2,238
  • 4
  • 31
  • 68