asp.net-mvc - 在 MVC 4 中从数据库填充 Select2 下拉框

Question

我需要帮助编写 jquery/ajax 来填充 Select2下拉框。

对于那些不知道什么的人 Select2是的，它是一个 JavaScript 扩展，用于为 html 选择列表下拉框提供 Twitter Bootstrap 外观和搜索/提前输入功能。有关更多信息，请查看此处的示例:Select2 Github page

<小时/> 已更新 - 已解决!

<小时/>

所以我最终将所有这些放在一起，问题的解决方案是我缺少格式化结果和列表选择的函数。下面的代码生成一个正常运行的 Select2 Dropbox 具有完美的提前输入功能。

Controller 上的 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 Controller 方法返回序列化 Json 对象的列表，其 ItemName 包含提供的字符串“query”(此“query”来自 Select2 下拉框中的搜索框)。

下面的代码是 View (或布局，如果您愿意)中的 Javascript，为 Select2 提供动力。投递箱。

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; }
});

然后在 View 的主体中，您需要一个隐藏的输入元素，即 Select2将渲染 dropbox 到。

HTML:

<input id="hiddenHtmlInput" type="hidden" class="bigdrop" style="width: 30%" value=""/>

或者将 MVC Razor html.hidden 元素附加到您的 View 模型，以便您能够将选取的项目 ID 发布回服务器。

Html(MVC Razor):

@Html.HiddenFor(m => m.ItemModel.ItemId, new { id = "hiddenHtmlInput", @class = "bigdrop", style = "width: 30%", placeholder = "Select an Item" })

Answer 1

解决了!最后。

完整的 jquery 如下，需要两个函数来格式化 Controller 返回的结果。这是因为 Dropbox 需要一些 html 标记来包裹结果以便能够显示它们。

此外，contractID 还需要作为 Controller 中的一个属性，因为如果没有它，结果会显示在下拉列表中，但无法选择它们。

$("#contractName").select2({
    placeholder: "Type to find a Contract",
    allowClear: true,
    minimumInputLength: 2,
    ajax: {
        cache: false,
        dataType: "json",
        type: "GET",
        url: "@Url.Action("FetchContracts", "Leads")",
        data: function(searchTerm){
            return { query: searchTerm };
        },
        results: function(data){
            return { results: data };
        }
    },
    formatResult: contractFormatResult,
    formatSelection: contractFormatSelection,
    escapeMarkup: function (m) { return m; }
});


function contractFormatResult(contract) {
    var markup = "<table class='contract-result'><tr>";
    if (contract.name !== undefined) {
        markup += "<div class='contract-name'>" + contract.name + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function contractFormatSelection(contract) {
    return contract.name;
}