如何使用MVC/jQuery在下拉列表中顯示圖像

Question

我需要在下拉列表中顯示圖像，其值不是從數據庫加載到控制器中的。我谷歌很多關於它，但通常需要使用一些插件。沒有任何插件可以實現這個功能嗎？

Answer 1

我知道你不想使用插件但是，請繼續閱讀！

有一個名爲Select2的插件，爲Bootstrap類型的下拉列表提供了擴展功能。在Select2 webpage有一個使用爛番茄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，準備好下拉列表來處理。