Question

我有一个查找表，其中包含属性：ID，Name

public class Color
{
     public int ID {get;set;}
     public string Name {get;set;}
}

我想创建一个ComboBox，让我选择一种颜色，或者如果文本不是列表的一部分，则创建一个颜色。

//颜色控制器

public ActionResult Create()
{
     ViewBag.ColorID = new SelectList(db.Colors,"ID","Name");
     return View();
}

//创建视图

@model Color

@using(Html.BeginForm())
{
<dl>
   <dt>
        @Html.LabelFor(m=>m.Name)
   </dt>
   <dd>
        @Html.DropDownList("ColorID", null, "--Select Color --", new {})
   </dd>
</dl>
}

此时我有一个下拉列表，但由于它呈现为选择我无法编辑文本。有什么开箱即用的MVC5可以让我从这一点开始创建一个ComboBox吗？

Answer 1

我最终这样做了：

 @model Color
 .....

 @using(Html.BeginForm())
 {
    @Html.Hidden("ID")
    <input type="text" name="Name" list="colors" 
                       class="form-control"  id="co" value="@Model.Name" />
    <datalist id="colors">
    @foreach (var item in ViewBag.AttorneyOfficeID)
    {
      <option value="@item.Text" data-id="@item.Value" />
    }
    </datalist>
 }

我创建了一个隐藏的ID来保存所选的选项，并使用下面的更改脚本进行设置。

<script>
$('#co').on('change', function () {
   var id = $("option").filter("[value='" + $('#co').val() + "']").data("id");
   $("[name='ID']").val(id);
};
</script>

这已经完成了工作，但我将问题保持活跃，因为我愿意接受建议。

Answer 2

这将创建一个选择列表（组合框）

@Html.DropDownList("ColorID", null, "--Select Color --", new { size = "5"})

但是为了更深入地了解我的答案，你想要的东西在MVC5中没有开箱即用。你需要更多... 我过去曾使用KnockoutJs和AJAX调用来创建一个预先输入类型。

MVC5创建具有自动完成功能的ComboBox

2 个答案: