当用户单击文本输入框时如何在@Html.EditorFor() 中显示下拉列表

Question

我正在使用 ViewData 将数据从控制器传递到视图
控制器中的代码：

public ActionResult Create()
        {
            ViewData["gN"] = new SelectList(db.gT, "id", "gN");
            return View();
        }

在视图中，我使用 @Html.EditorFor() 为我们存储在数据库中的表创建新项目。

<div class="col-md-10">
     @Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control" } })
     @Html.ValidationMessageFor(model => model.groupid, "", new { @class = "text-danger" })
</div>

当我使用@Html.DropDownList 时，我们的 gN 列表完美地显示为下拉列表

 @Html.DropDownList("gN", null, htmlAttributes: new { @class = "form-control" })

我想使用 EditorFor() 以便当用户开始在输入框中输入时，下拉列表会出现在它的下方。 如果用户正在键入的文本出现在下拉列表中，则用户可以选择它。 我们应该如何在 EditorFor() HTML 元素中显示列表 gN（我们使用 Controller 中的 ViewData 获取）？

Answer 1

Html.EditorFor()方法始终创建一个<input>元素，尽管type属性可能因模型属性类型而异。 HTML5 实际上通过<datalist>元素完全支持您想要的内容，您可以将其绑定到具有list属性的<input>元素。 <datalist>元素采用包含列表中所需值的子<option>元素。

在这里对您的模型进行一些猜测...

// Controller
public ActionResult Create()
{
    ViewData["gN"] = db.gT;
    return View();
}

// View
@Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control", list="gN-datalist" } })
<datalist id="gn-datalist">
    @foreach (var item in (gT)ViewData["gN"])
    {
        <option value="@item.id">@item.gN</option>
    }
</datalist>

您还可以创建一个HtmlHelper扩展方法来为您创建此方法。