Preencha a caixa suspensa Select2 do banco de dados no MVC 4
Preciso de ajuda para escrever o jquery / ajax para preencher umSelect2 caixa suspensa.
Para quem não sabe o queSelect2 é, é uma extensão de javascript para fornecer aparência de Twitter Bootstrap e funcionalidade de pesquisa / digitação antecipada para uma caixa suspensa de lista de seleção de html. Para mais informações, veja os exemplos aqui:Página Select2 Github
ATUALIZADO - Resolvido!Então eu finalmente coloquei tudo isso junto, e a solução para meus problemas foi que eu estava faltando funções para formatar os resultados e a seleção da lista. O código abaixo produz um funcionamentoSelect2 dropbox com digitação perfeitamente.
Método Json no Controller:
public JsonResult FetchItems(string query)
{
DatabaseContext dbContext = new DatabaseContext(); //init dbContext
List<Item> itemsList = dbContext.Items.ToList(); //fetch list of items from db table
List<Item> resultsList = new List<Item>; //create empty results list
foreach(var item in itemsList)
{
//if any item contains the query string
if (item.ItemName.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0)
{
resultsList.Add(item); //then add item to the results list
}
}
resultsList.Sort(delegate(Item c1, Item c2) { return c1.ItemName.CompareTo(c2.ItemName); }); //sort the results list alphabetically by ItemName
var serialisedJson = from result in resultsList //serialise the results list into json
select new
{
name = result.ItemName, //each json object will have
id = result.ItemID //these two variables [name, id]
};
return Json(serialisedJson , JsonRequestBehavior.AllowGet); //return the serialised results list
}
O método do controlador Json acima retorna uma lista de objetos Json serializados, cujo ItemName contém a string 'query' fornecida (essa 'consulta' vem da caixa de pesquisa noSelect2 Dropbox).
O código abaixo é o Javascript na visão (ou layout, se você preferir) para alimentar oSelect2 Dropbox.
Javascript:
$("#hiddenHtmlInput").select2({
initSelection: function (element, callback) {
var elementText = "@ViewBag.currentItemName";
callback({ "name": elementText });
},
placeholder: "Select an Item",
allowClear: true,
style: "display: inline-block",
minimumInputLength: 2, //you can specify a min. query length to return results
ajax:{
cache: false,
dataType: "json",
type: "GET",
url: "@Url.Action("JsonControllerMethod", "ControllerName")",
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return {results: data};
}
},
formatResult: itemFormatResult,
formatSelection: function(item){
return item.name;
}
escapeMarkup: function (m) { return m; }
});
Então, no corpo da visão, você precisa de um elemento de entrada oculto, queSelect2 irá renderizar o dropbox para.
Html:
<input id="hiddenHtmlInput" type="hidden" class="bigdrop" style="width: 30%" value=""/>
Ou anexe um elemento html.hidden do MVC Razor ao seu modelo de exibição para permitir que você poste o ID do item escolhido de volta no servidor.
Html (MVC Razor):
@Html.HiddenFor(m => m.ItemModel.ItemId, new { id = "hiddenHtmlInput", @class = "bigdrop", style = "width: 30%", placeholder = "Select an Item" })