从 MVC 4 的数据库中填充 Select2 下拉框

Question

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

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

---

已更新 - 已解决！

---

所以我终于把这一切放在一起，我的问题的解决方案是我缺少格式化结果和列表选择的函数。下面的代码生成了一个功能正常的 Select2 保管箱，具有完美的预输入功能。

控制器上的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 包含提供的字符串“查询”（此“查询”来自Select2 下拉框中的搜索框）。

下面的代码是视图中的 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; }
});

然后在视图的主体中，您需要一个隐藏的 Input 元素，Select2 会将 Dropbox 渲染到该元素。

HTML：

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

或将 MVC Razor html.hidden 元素附加到您的视图模型，以使您能够将选择的项目 Id 发布回服务器。

HTML（MVC 剃刀）：

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

Answer 1

解决了！最后。

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

还需要 contractID 作为控制器中的属性，因为没有它，结果会显示在下拉列表中，但无法选择。

$("#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;
}

Answer 2

问题是您正在从该控制器方法返回 List<Contract>，但 MVC 运行时不知道如何将其交给浏览器。您需要返回 JsonResult：

public JsonResult FetchContracts() 
{
    TelemarketingContext teleContext = new TelemarketingContext();
    var contracts = teleContext.Contracts.ToList();
    var json = from contract in contracts 
        select new {
            name = contract.ContractName,
            id = contract.ContactID,
        };
    return Json(json, JsonRequestBehavior.AllowGet);
}

现在，AJAX 的 data 参数：Success 函数将是来自控制器的 JSON。我不熟悉这个插件的工作原理，但如果需要，您应该能够手动循环遍历data 中的 json。

Answer 3

Select 2 似乎是附加了 jquery 的标准选择，所以这应该可以工作：

型号：

  public class vmDropDown
  {
    public IEnumerable<SelectListItem> DeviceList { get; set; }
    [Required(ErrorMessage = "Please select at least one item")]
    public IEnumerable<int> SelectedItems { get; set; }
  }

控制器：

 [HttpGet]
    public ActionResult Assign(int id)
    {
      return View(CreateUnassignedModel(id));
    }

[HttpPost]
public ActionResult Assign(vmDeviceAssign model)
{
  if (ModelState.IsValid)
  {
    _deviceLogic.Assign(model.GroupId, model.SelectedItems);
    return View("ConfirmDevice");
  }
  else // Validation error, so redisplay data entry form
  {
    return View(CreateUnassignedModel(model.GroupId));
  }
}

private vmDeviceAssign CreateUnassignedModel(int id)
{
  return new vmDeviceAssign
  {
    DeviceList = _deviceLogic.GetUnassigned(),
    SelectedItems = null
  };
}

查看：

<div class="editor-field">
    @Html.ListBoxFor(model => model.SelectedItems, new SelectList(Model.DeviceList, "Value", "Text"))
    @Html.ValidationMessageFor(model => model.SelectedItems)
</div>

上班时不能解释，但如果你留言，今晚我会去接的