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

Posted 2023-05-07

【中文标题】从 MVC 4 的数据库中填充 Select2 下拉框

【英文标题】：Fill Select2 dropdown box from database in MVC 4

【发布时间】：2013-01-29 00:06:27

【问题描述】：

我需要帮助编写 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" )

【问题讨论】：

我昨天刚做了这个，虽然是一个正常的下拉菜单。您使用 SelectListItem。我可以给出代码，但什么是“Select2”？

Select2 是一个附加插件，它以 Bootstrap 样式提供具有 v. 功能的下拉框。 ivaynberg.github.com/select2

【参考方案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;

【讨论】：

很高兴您使用 formatResult 让它工作。正如仅供参考（如果其他人遇到此问题），问题的一部分是默认情况下 select2 期望在 json 响应中名为 text 和 id 的项目键。您返回 name 和 id 这就是为什么 select2 没有自动呈现结果。在你的控制器中这样的东西可能会起作用：select new text = contract.ContractName, id = contract.ContractID ;

【参考方案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。

【讨论】：

好的，谢谢。这给了我一些东西可以继续。我会设置它，看看我得到了什么。

【参考方案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>

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

【讨论】：

我知道这是一种变通方法，但我需要使用 Select2 的功能（例如，在 Dropbox 中搜索）

是的，抱歉，我正在回答一个关于填充 ddl 的更通用的问题。我认为格雷厄姆的答案值得探索。祝你好运！