Question

我需要在下拉列表中显示图像，其值在Controller中加载而不是从DB加载。我谷歌很多，但通常它需要使用一些插件。有没有其他选项可以在没有任何插件的情况下实现此功能？

Answer 1

我知道你不想使用插件但是请继续阅读！

有一个名为Select2的插件，它为Bootstrap类型的下拉列表提供扩展功能。在Select2 webpage上有一个使用rotten-tomatoes api加载电影的例子。这些条目包括标题，图像和概要。

如果您查看页面源，您可以看到他们是如何实现这一目标的。

此摘录是处理返回值的javascript函数，并在将它们传递到下拉列表之前将它们包装在html标记中。

function movieFormatResult(movie) {
    var markup = "<table class='movie-result'><tr>";
    if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
        markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
    }
    markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
    if (movie.critics_consensus !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
    }
    else if (movie.synopsis !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

正如您所看到的，每个条目都在自己的表格中，因为它是html，您可以轻松插入图像。

在控制器上调用方法有jquery + ajax。该方法应该将JsonResult返回给视图上的jquery，然后在Select2示例中，两个javascript方法处理序列化的json，为下拉列表处理。

如何使用MVC / jQuery在下拉列表中显示图像

1 个答案: