ASP-DropDownList CodeBehind images

问题

All I ever wanted is my DropDownList to be special. :(

I can write just names, but that won't be as intresting. So I tried to add images, like so:

// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);

However the evil thing escapes the text in a list automatically, like so:

<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">

So I get text instead of an image. How can I overcome this?

EDIT: Using Lajos' solution, I've got to a situation where I inspect the selection element, And I get the following :

<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">

Which is pretty much what I was looking for. Sadly, in the page source, I get the following:

<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>

The list itself shows 2 empty cells. The inspector says the pictures have been scaled down to 0x0.

Fiddle: here.

Why does that happen?

回答1:

You can set the Text to contain the source and not show them until the page is loaded. You can implement a Javascript library which replaces src text with images in your list. That should solve the problem.

// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);

And in Javascript you need something like:

$(function() {
    $(".imageconverter").each(function() {
        $(this).html('<img src="' + $(this).text() + '">');
    });
});

来源：https://stackoverflow.com/questions/30673981/asp-dropdownlist-codebehind-images