Заполнить выпадающий список Select2 из базы данных в MVC 4
Мне нужна помощь в написании jquery / ajax, чтобы заполнитьвыбор2 выпадающий список.
Для тех, кто не знает чтовыбор2 это расширение javascript для предоставления внешнего вида Bootstrap Twitter и функции поиска / опережающего ввода в раскрывающемся списке выбора html. Для получения дополнительной информации посмотрите примеры здесь:Выберите 2 страницы Github
ОБНОВЛЕНО - Решено!Итак, я наконец собрал все это вместе, и решение моих проблем заключалось в том, что мне не хватало функций для форматирования результатов и выбора списка. Код ниже производит функционированиевыбор2 Dropbox с опережением ввода отлично.
Метод JSON на контроллере:
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
}
Вышеприведенный метод контроллера Json возвращает список сериализованных объектов Json, ItemName которого содержит предоставленную строку 'query' (этот 'запрос' происходит из поля поиска ввыбор2 Drop Box).
Код ниже - это Javascript в представлении (или макете, если вы предпочитаете) для включениявыбор2 Drop Box.
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; }
});
Затем в теле представления вам нужен скрытый элемент ввода, которыйвыбор2 будет оказывать Dropbox для.
Html:
<input id="hiddenHtmlInput" type="hidden" class="bigdrop" style="width: 30%" value=""/>
Или присоедините элемент MVC Razor html.hidden к вашей модели представления, чтобы вы могли опубликовать идентификатор выбранного элемента на сервере.
HTML (MVC Razor):
@Html.HiddenFor(m => m.ItemModel.ItemId, new { id = "hiddenHtmlInput", @class = "bigdrop", style = "width: 30%", placeholder = "Select an Item" })