Заполнить выпадающий список 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" })